说在前面
在当今互联网时代，随着技术的不断进步，传统的验证码验证方式已经无法满足对安全性和用户体验的需求。为了应对日益狡猾的机器人和恶意攻击，许多网站和应用程序开始引入图形验证码，其中一种备受欢迎的形式就是图片旋转验证功能。这项技术通过利用用户交互、视觉识别和动态效果，为用户提供了一种全新、有趣且高效的验证方式。本文将深入探讨如何实现这一引人注目的图片旋转验证功能，让您轻松保护网站安全，同时提升用户体验。
效果展示
1、搭建页面元素（图片+滚动条）
<body>
<div>
<img src="https://c-ssl.duitang.com/uploads/item/201506/24/20150624231809_CQvds.thumb.1000_0.jpeg" />
<div class="scroll" id="scroll">
<div class="bar" id="bar">
</div>
<div class="mask" id="mask"></div>
</div>
<span></span>
</div>
</body>
2、给它们加一点点样式
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
text-align: center;
}
.scroll{
margin:100px auto;
width: 500px;
height: 5px;
background: #ccc;
position: relative;
}
.bar{
width: 20px;
height: 20px;
background: #369;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
border-radius: 50% 50%;
}
.mask{
position: absolute;
left: 0;
top: 0;
background: #369;
width: 0;
height: 5px;
}
span{
font-size: large;
display: none;
}
img{
margin-top: 100px;
width: 200px;
height: 200px;
overflow: hidden;
object-fit: cover;
border-radius: 50% 50%;
/* transform: rotate(30deg); */
}
button{
width: 80px;
height: 40px;
}
</style>
3、关键的js代码
<script>
var scroll = document.getElementById('scroll');
var bar = document.getElementById('bar');
var mask = document.getElementById('mask');
var ptxt = document.getElementsByTagName('span')[0];
var img = document.getElementsByTagName('img')[0];
var barleft = 0;
var angle = Math.random()*360;
bar.onmousedown = function(event){
var event = event || window.event;
var leftVal = event.clientX - this.offsetLeft;
var that = this;
// 拖动一定写到 down 里面才可以
document.onmousemove = function(event){
var event = event || window.event;
barleft = event.clientX - leftVal;
if(barleft < 0)
barleft = 0;
else if(barleft > scroll.offsetWidth - bar.offsetWidth)
barleft = scroll.offsetWidth - bar.offsetWidth;
mask.style.width = barleft +'px' ;
that.style.left = barleft + "px";
newangle = angle;
newangle = parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 360) + newangle;
newangle %= 360;
img.style.transform = 'rotate('+newangle+'deg)';
console.log(newangle);
//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup = function(){
document.onmousemove = null; //弹起鼠标不做任何操作
let nowangle = img.style.transform;
console.log(nowangle);
nowangle = nowangle.substr(7,6);
//判定成功的角度误差，可以根据自己的需求来修改
if(nowangle > 350 || nowangle < 10){
alert("验证通过");
}else{
alert("验证失败!!!!!!!!!!!!!!!!");
}
window.location.reload();
}
}
function check(){
let nowangle = img.style.transform;
console.log(nowangle);
nowangle = nowangle.substr(7,6);
if(nowangle > 350 || nowangle < 10){
alert("验证通过");
}else{
alert("验证失败");
}
}
//随机图片初始旋转角度
while(angle < 20 || angle > 350){
angle = Math.random()*360;
}
img.style.transform = 'rotate('+angle+'deg)';
</script>
公众号
关注公众号『前端也能这么有趣』，获取更多新鲜内容。
说在后面
🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。
