轻松愉悦的验证方式：实现图片旋转验证功能

原创已于 2023-11-29 22:31:41 修改 · 3.2k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

于 2021-04-01 23:32:21 首次发布

JavaScript 同时被 2 个专栏收录

272 篇文章

订阅专栏

前端

145 篇文章

订阅专栏

本文介绍了如何通过图形验证码中的图片旋转验证技术，提高网站安全性和用户体验。详细步骤包括搭建页面元素、设置样式以及编写关键的JavaScript代码，实现用户交互式的图片旋转验证。在验证过程中，用户通过拖动滚动条调整图片角度，达到预设的验证条件即可通过。文章还提供了代码示例和效果展示，帮助读者理解并应用这一技术。

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

说在前面

在当今互联网时代，随着技术的不断进步，传统的验证码验证方式已经无法满足对安全性和用户体验的需求。为了应对日益狡猾的机器人和恶意攻击，许多网站和应用程序开始引入图形验证码，其中一种备受欢迎的形式就是图片旋转验证功能。这项技术通过利用用户交互、视觉识别和动态效果，为用户提供了一种全新、有趣且高效的验证方式。本文将深入探讨如何实现这一引人注目的图片旋转验证功能，让您轻松保护网站安全，同时提升用户体验。

效果展示

在这里插入图片描述

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，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。