高仿“点触验证码”做的一个静态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,一方面官方的东西,我都比较感兴趣:另一方面 ...
随机推荐
- hibernate_validator_09
创建自己的约束规则 尽管Bean Validation API定义了一大堆标准的约束条件, 但是肯定还是有这些约束不能满足我们需求的时候, 在这种情况下, 你可以根据你的特定的校验需求来创建自己的约束 ...
- css margin collapse
css中存在margin collapse,即边界塌陷或边界重叠. http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.h ...
- 在fragment中获取他附着的activity中的变量
final String data=(关联的activity类)getActivity().getData(); getData();自定义的方法
- js移动设备手机跳转地址代码
if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alc ...
- WEB编码事项
标准 WEB开发标准是一系列标准的集合, 包含HTML结构标准.CSS表现标准.JS行为标准.代码标准.标准测试. 目标 WEB开发流程统一标准化,实现页面结构.表现.行为适当分离,提高页面易维护性, ...
- bestcoder单调区间
http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=584&pid=1006 题解:ORZ Matrix67 ht ...
- TCP回射客户程序：str_cli函数
str_cli函数完成客户处理循环: 从标准输入读入一行文本,写到服务器上,读回服务器对该行的回射,并把回射行写到标准输出上 读入一行,写到服务器 fgets读入一行文本,writen把该行发送给服务 ...
- 实验六：分析Linux内核创建一个新进程的过程
原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 题目自拟,内容围绕对Linu ...
- jquery-object.js
/** * jQuery.query - Query String Modification and Creation for jQuery * Written by Blair Mitchelmor ...
- Scut：脚本引擎
Scut 可以执行 C#.Python.Lua 三种类型的脚步,Scut 是如何加载并传递参数的呢? 首先值得注意的是:Scut 在编译时就会将逻辑层脚本源码复制到bin/Script的目录下. 1. ...