高仿“点触验证码”做的一个静态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,一方面官方的东西,我都比较感兴趣:另一方面 ...
随机推荐
- Swift - 33 - 返回函数类型和函数嵌套
//: Playground - noun: a place where people can play import UIKit /*---------------------------返回函数类 ...
- Xcode换版本或者改名字后无法使用simpholders2
修改一下路径,在终端下输入下面的命令sudo /usr/bin/xcode-select -switch /Applications/Xcode.app/Contents/Developer 敲回车后 ...
- IOS中截屏的实现，很简易的方法
// 添加QuartzCore.framework库 #import <QuartzCore/QuartzCore.h> -(void) screenShot { // 截屏 UIGrap ...
- 三、singleton(单例化)一个对象的几种方法
方案一:私有化构造器,通过static final域 @Test public void test13() { A215 a=A215.a; A215 b=A215.a; System.out.pri ...
- Hibernate 一对多双向关联Demo
以Classes[班级]和Student[学生]为例的Demo //Classes.java public class Classes implements Serializable { privat ...
- 浅谈C++ 异常处理的语义和性能
异常处理是个十分深奥的主题,这里只是浅论其对C++性能的影响. 在VC++中,有多个异常处理模式,三个最重要: No exception handling (无异常处理) C++ only (C++语 ...
- 『重构--改善既有代码的设计』读书笔记----Replace Method with Method Object
有时候,当你遇到一个大型函数,里面的临时变量和参数多的让你觉得根本无法进行Extract Method.重构中也大力的推荐短小函数的好处,它所带来的解释性,复用性让你收益无穷.但如果你遇到上种情况,你 ...
- MyBatis学习笔记(1) —— 基础知识
mybatis 是支持普通SQL查询,存储过程和高级映射的优秀持久层框架,mybatis 清除了几乎所有的jdbc代码和参数的手工设置及对结果集的检索封装.mybatis可以使用简单的xml和注解用于 ...
- 更快的使用你的键盘：AUTOHOTKEY
本文适合于:每天用电脑工作学习的朋友.游戏发烧手指又不灵敏的朋友.希望提高自己使用电脑效率的朋友. 本文将将告诉你AutoHotkey能做什么,并会一步一步地教会你轻易地使用它,但不会教你更多Auto ...
- 199bit总结的影响最大的十个算法
1. 归并排序(MERGE SORT).快速排序(QUICK SORT)和堆积排序(HEAP SORT) 哪个排序算法效率最高?这要看情况.这也就是我把3种算法放在一起讲的原因,可能你更常用其中一种, ...