高仿“点触验证码”做的一个静态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,一方面官方的东西,我都比较感兴趣:另一方面 ...
随机推荐
- tinkphp URL重写,支持伪静态
通常的URL里面含有index.php,为了达到更好的SEO效果可能需要去掉URL里面的index.php ,通过URL重写的方式可以达到这种效果,通常需要服务器开启URL_REWRITE模块才能支持 ...
- ORACLE 解析xml字符串-转载的
--------------------------方法一------------------------------------- 1.xml字符串 /* <orderlist> ...
- 全文索引--自定义chinese_lexer词典
全文索引它的数据字典本来就是自己加密过的数据格式,只有翻译过来了,才可以修改.这样修改后再生成它自己的数据格式文件,覆盖掉原来的,就会将新添加的关键词加入进去了!! 以下操作是在Oracle服务器安装 ...
- iOS应用架构谈 开篇 (转)
iOS应用架构谈 开篇 iOS应用架构谈 view层的组织和调用方案 iOS应用架构谈 网络层设计方案 iOS应用架构谈 动态部署方案 iOS应用架构谈 本地持久化方案 缘由 之前安居客iOS ap ...
- IIS7、IIS6 web.config注册HttpModule
IIS6注册HttpModule <system.web> <httpModules> <add name="..." type= ...
- 解析一下rtmp协议比较难懂的地方
官方文档写的过于复杂,这里弄个简单的好入门的.chunk 分基础头,消息头,时间戳,数据部分基础头中第一个字节最高位的两个位是用来设置消息头的四种格式的,和基础头没关系,整个基础头有3个字段的长度存储 ...
- 关于超链接自动提示的demo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- HTTP协议学习-01
在学习一门新知识前还是先了解一下这个知识的一点点背景吧! http是属于协议层当中的最顶层的应用层,的面向对象的协议:它于 1990 年提出, 经过几年的使用与发展, 得到不断地完善和扩展. 目前在 ...
- Scrapy使用以及Xpath的一些坑, 再入剁手
scrapy爬虫: https:www.scrapy.org 本篇博客依托的项目: https://github.com/viciousstar/BitcointalkSpider/ 一. Scrap ...
- layer弹出标签层tab
引入文件: <script type="text/javascript" src="layer/layer.min.js"></script& ...