高仿“点触验证码”做的一个静态Html例子
先上源码：
<html>
<head>
<title>TouClick - Designed By MrChu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin: 0px;
padding: 0px;
} .click_area {
height: 320px;
text-align: center;
background: #777777;
} #season {
border: none;
} .keywords {
color: #FF0000;
}
</style>
<script type="text/javascript">
var touch = 1;
var spring = 0;
var summer = 0;
var autumn = 0;
var winter = 0;
var first = false;
var second = false;
function changeStyle () {
if (touch < 4) {
touch++;
} else {
touch = 1;
}
spring = 0;
summer = 0;
autumn = 0;
winter = 0;
first = false;
second = false;
$("txt1").style.color = "#FF0000";
$("txt2").style.color = "#FF0000";
// Spring
if (touch == 1) {
$("season").src = "images/spring.jpg";
$("season").useMap = "#springMap";
$("txt1").innerText = "春";
$("txt2").innerText = "桃";
}
// Summer
if (touch == 2) {
$("season").src = "images/summer.jpg";
$("season").useMap = "#summerMap";
$("txt1").innerText = "夏";
$("txt2").innerText = "荷";
}
// Autumn
if (touch == 3) {
$("season").src = "images/autumn.jpg";
$("season").useMap = "#autumnMap";
$("txt1").innerText = "秋";
$("txt2").innerText = "菊";
}
// Winter
if (touch == 4) {
$("season").src = "images/winter.jpg";
$("season").useMap = "#winterMap";
$("txt1").innerText = "冬";
$("txt2").innerText = "梅";
}
} // Spring
function springClick (txt) {
if (spring == 0) {
if (txt == "春") {
first = true;
$("txt1").style.color = "#008040";
}
}
if (spring == 1) {
if (txt == "桃") {
second = true;
$("txt2").style.color = "#008040";
}
}
if (spring >= 1) {
if (first && second) {
alert("验证成功!");
changeStyle();
} else {
alert("验证失败!");
changeStyle();
}
}
spring++;
} // Summer
function summerClick (txt) {
if (summer == 0) {
if (txt == "夏") {
first = true;
$("txt1").style.color = "#008040";
}
}
if (summer == 1) {
if (txt == "荷") {
second = true;
$("txt2").style.color = "#008040";
}
}
if (summer >= 1) {
if (first && second) {
alert("验证成功!");
changeStyle();
} else {
alert("验证失败!");
changeStyle();
}
}
summer++;
} // Autumn
function autumnClick (txt) {
if (autumn == 0) {
if (txt == "秋") {
first = true;
$("txt1").style.color = "#008040";
}
}
if (autumn == 1) {
if (txt == "菊") {
second = true;
$("txt2").style.color = "#008040";
}
}
if (autumn >= 1) {
if (first && second) {
alert("验证成功!");
changeStyle();
} else {
alert("验证失败!");
changeStyle();
}
}
autumn++;
} // Winter
function winterClick (txt) {
if (winter == 0) {
if (txt == "冬") {
first = true;
$("txt1").style.color = "#008040";
}
}
if (winter == 1) {
if (txt == "梅") {
second = true;
$("txt2").style.color = "#008040";
}
}
if (winter >= 1) {
if (first && second) {
alert("验证成功!");
changeStyle();
} else {
alert("验证失败!");
changeStyle();
}
}
winter++;
} // 图片抖动脚本
var typ = ["marginTop", "marginLeft"], rangeN=10, timeout=20;
function shake(o, end){
var range = Math.floor(Math.random() * rangeN);
var typN = Math.floor(Math.random() * typ.length);
o["style"][typ[typN]] = "" + range + "px";
var shakeTimer = setTimeout(function(){shake(o, end)}, timeout);
o[end] = function(){
clearTimeout(shakeTimer)
};
} function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<div class="click_area">
<center>
<div id="tb_clothes" onClick="shake(this, 'onmouseout')" style="width:372px;height:303px;background:#B7BBC3;">
<table width="372" height="303" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="data:images/TouClick_01.jpg" width="372" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="data:images/TouClick_02.jpg" width="7" height="197" alt=""></td>
<td colspan="3">
<img src="data:images/spring.jpg" width="358" height="181" id="season" useMap="#springMap"></td>
<td rowspan="2">
<img src="data:images/TouClick_04.jpg" width="7" height="197" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="data:images/TouClick_05.jpg" width="358" height="16" alt=""></td>
</tr>
<tr>
<td colspan="5">
<div style="width:372;height:26;font-family:'微软雅黑';font-size:16px;text-align:center;background:#F5F6F8;border:none;">点触验证：请依次点击图片中的"<span id="txt1" class="keywords">春</span>","<span id="txt2" class="keywords">桃</span>"</div>
</td>
</tr>
<tr>
<td colspan="5">
<img src="data:images/TouClick_07.jpg" width="372" height="17" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="data:images/TouClick_08.jpg" width="167" height="55" alt=""></td>
<td>
<img src="data:images/TouClick_09.jpg" width="37" height="37" onClick="changeStyle();" onMouseDown="this.src='images/TouClick_Active.jpg'" onMouseUp="this.src='images/TouClick_09.jpg'" style="cursor:pointer;"></td>
<td colspan="2" rowspan="2">
<img src="data:images/TouClick_10.jpg" width="168" height="55" alt=""></td>
</tr>
<tr>
<td>
<img src="data:images/TouClick_11.jpg" width="37" height="18" alt=""></td>
</tr>
<tr>
<td>
<img src="data:images/分隔符.gif" width="7" height="1" alt=""></td>
<td>
<img src="data:images/分隔符.gif" width="160" height="1" alt=""></td>
<td>
<img src="data:images/分隔符.gif" width="37" height="1" alt=""></td>
<td>
<img src="data:images/分隔符.gif" width="161" height="1" alt=""></td>
<td>
<img src="data:images/分隔符.gif" width="7" height="1" alt=""></td>
</tr>
</table>
</div>
</center>
</div>
<map name="springMap">
<area shape="circle" coords="64,133,17" href="javascript:springClick('春');" onfocus="this.blur()">
<area shape="circle" coords="268,151,18" href="javascript:springClick('桃');" onfocus="this.blur()">
</map>
<map name="summerMap">
<area shape="circle" coords="303,42,20" href="javascript:summerClick('夏');" onfocus="this.blur()">
<area shape="circle" coords="233,149,17" href="javascript:summerClick('荷');" onfocus="this.blur()">
</map>
<map name="autumnMap">
<area shape="circle" coords="211,74,19" href="javascript:autumnClick('秋');" onfocus="this.blur()">
<area shape="circle" coords="46,49,18" href="javascript:autumnClick('菊');" onfocus="this.blur()">
</map>
<map name="winterMap">
<area shape="circle" coords="108,158,18" href="javascript:winterClick('冬');" onfocus="this.blur()">
<area shape="circle" coords="245,91,19" href="javascript:winterClick('梅');" onfocus="this.blur()">
</map>
</body>
</html>
效果图：
1、验证界面
2、可点击区域
3、点击之后
4、验证成功
5、验证失败
6、点击切换验证图片
7、切换成功
8、demo下载
高仿“点触验证码”做的一个静态Html例子：http://download.csdn.net/detail/for_china2012/6339655
高仿“点触验证码”做的一个静态Html例子的更多相关文章
- Android高级控件（六）——自定义ListView高仿一个QQ可拖拽列表的实现
Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用L ...
- 浅谈android中只使用一个TextView实现高仿京东,淘宝各种倒计时
今天给大家带来的是只使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.近期公司一直加班也没来得及时间去整理,今天难得歇息想把这个分享给大家.只求共同学习,以及自己兴许 ...
- Servlet仿CSDN动态验证码的生成-带数字和字母
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 一.实现的思路: (1)首先,须要创建一个Servlet.该Servlet通过字节型响应给cl ...
- 微信小程序开发日记——高仿知乎日报（下）
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发日记——高仿知乎日报（中）
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...
- 微信小程序开发日记——高仿知乎日报（上）
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- [MFC] 高仿Flappy bird 桌面版
这是今年年初做的东西,一直没有时间整理,现在拿出来分享下~ 目录 开发背景 开发语言及运行环境 效果展示 游戏框架说明 游戏状态及逻辑说明 经典算法说明 重量级问题解决 开发感想 一.开发背景: fl ...
- 安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)
什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再 ...
- Android DrawerLayout 高仿QQ5.2双向侧滑菜单
1.概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣:另一方面 ...
随机推荐
- 关于模板中的动态取值 ---反射与javascript脚本编译
在项目中经常遇到一个问题,打印word或者打印excel的时候,我们经常使用一对一的赋值或者批量替换的方式来对模板进行修改. 但是现在遇到两种场景: 1.取值是通过自定以方法进行取值的. 如:一个销售 ...
- WPF 弱事件
因为在接触WPF的过程中追查INotifyPropertyChanged的通知原理的时候,发现了 PropertyChangedEventManager这个类,它是继承与WeakEventManage ...
- Maven Profile标签
Maven Profiles标签可以针对不同的环境来使用不同的配置文件 在发布的时候可以用 mvn release -p product mvn release -p test mvn release ...
- zookeeper集群一次性启动
编写shell脚本 新建文本,命名为start-zookeeper.sh #!/bin/sh echo "start zkServer…" for i in master work ...
- C++学习之DLL注入
#include<stdio.h> #include<Windows.h> #include<TlHelp32.h> //typedef unsigned long ...
- 你好，C++（38）从问题描述中发现对象的属性和行为 6.4 工资程序成长记：类与对象（上）
6.4 工资程序成长记:类与对象 “夜半三更哟,盼天明:寒冬腊月哟,盼春风.若要盼得哟,涨工资,岭上……”自从上次老板许诺给小陈涨工资以后,一转眼又过去几个月了,可是涨工资的事一点动静都没有.小陈只 ...
- windows 7下安装python+mongodb
1. python安装 下载:http://python.org/download/ 直接双击安装,安装完后将路径加入系统环境变量path中. 2. mongodb安装 下载:http://www.m ...
- Java学习----运算符与表达式
一.运算符 1.算术运算符 + - * / % ++ -- public class Test7 { public static void main(String[] args) { ...
- c# sqlserver备份还原（转）
WinForm c# 备份 还原 数据库 其实是个非常简单的问题,一个Form,一个Button,一个OpenFileDialog,一个SaveFileDialog.下面给出备份与还原类 using ...
- JS冒泡事件与处理
JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这 一过程被 ...