<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>
