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%;
}
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;
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);
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>