日期:2014-05-16  浏览次数:20686 次

高仿“点触验证码”做的一个静态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 = "