高仿“点触验证码”做的一个静态Html例子

最新推荐文章于 2023-04-19 22:47:36 发布

码农先生

最新推荐文章于 2023-04-19 22:47:36 发布

阅读量6.2k

点赞数

分类专栏： Web HTML JavaScript

本文链接：https://blog.youkuaiyun.com/FOR_CHINA2012/article/details/12174043

版权

这是一个使用HTML静态页面仿制的点触验证码示例，包括验证界面展示、可点击区域、点击反馈、验证成功与失败状态、切换验证码图片及下载demo的链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上源码：

<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;
					$(&

最低0.47元/天解锁文章