说在前面
在当今互联网时代，随着技术的不断进步，传统的验证码验证方式已经无法满足对安全性和用户体验的需求。为了应对日益狡猾的机器人和恶意攻击，许多网站和应用程序开始引入图形验证码，其中一种备受欢迎的形式就是图片旋转验证功能。这项技术通过利用用户交互、视觉识别和动态效果，为用户提供了一种全新、有趣且高效的验证方式。本文将深入探讨如何实现这一引人注目的图片旋转验证功能，让您轻松保护网站安全，同时提升用户体验。
效果展示
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，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。
