拼图验证码

最新推荐文章于 2024-07-04 11:11:39 发布

风叶翩翩

最新推荐文章于 2024-07-04 11:11:39 发布

阅读量1.5k

点赞数

分类专栏： H5 JavaScript

本文链接：https://blog.csdn.net/weixin_45743799/article/details/103199292

版权

本文介绍了如何使用HTML5的Canvas元素来创建一个拼图验证码，包括验证码图片的生成、滑块图片显示、滑块的横向移动及文字显示等功能。并提供了效果演示和完整的代码示例。

摘要由CSDN通过智能技术生成

H5的Canvas实现一个拼图验证码。

功能分析：
1.验证码图片的生成
2.滑块图片的显示
3.底部滑块的横向移动
4.滑块上的文字显示

效果演示：

初始状态
在这里插入图片描述
滑动成功之后
有没有一种心动的感觉呢？？？

代码演示

==注意：==程序中要引入jquery.js架包

Body内容

		<link rel="stylesheet" href="css/style.css">

		<style>
			.container {
   
  width: 310px;
  margin: 100px auto;
}
#msg {
   
  width: 100%;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
}
a:link,a:visited,a:hover,a:active {
   
  margin-left: 100px;
  color: #0366D6;
}
</style>

	</head>
	<body>

		<div class="container">
			<div id="captcha" style="position: relative"></div>
			<div id="msg"></div>
		</div>


	</body>

jquery内容

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		jigsaw.init(document.getElementById('captcha'), function() {
   
			document.getElementById('msg').innerHTML = '登录成功！'
		})
	</script>

引入的style.css样式

.block {
   
  position: absolute;
  left: 0;
  top: 0;
}

.sliderContainer {
   
  position: relative;
  text-align: center;
  width: 310px;
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
  background: #f7f9fa;
  color: #45494c;
  border: 1px solid #e4e7eb;
}

.sliderContainer_active