代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">* {padding: 0;margin: 0;list-style: none;}#imgDiv {background: url(../img/niubi.jpg) no-repeat;width: 750px;height: 350px;margin: auto;position: relative;}#huaKuai {width: 750px;height: 45px;background: bisque;margin: auto;border: 1px solid #000000;position: relative;}#huaKuai>div {position: absolute;width: 75px;height: 45px;background: darkgray;border: 1px solid #000000;border-radius: 5px;box-shadow: #000000 2px 2px 5px 0px;cursor: pointer;}#divMove {position: absolute;margin-top: 170px;width: 75px;height: 75px;background: url(../img/niubi.jpg) no-repeat;background-size: 750px 350px;background-position-y: -170px;border: 1px solid red;z-index: 2;}#divDown {text-align: center;color: white;margin-top: 170px;position: absolute;width: 75px;height: 75px;border: 1px solid red;line-height: 32px;background: #000000;background-size:750px 350px ;background-position-y: -170px;}</style></head><body><div><div id="imgDiv"><div id="divMove"></div><div id="divDown">移动图片到此处</div></div><div id="huaKuai"><div></div></div></div><script type="text/javascript">let huaKuai = document.querySelector('#huaKuai')let huaKuaiDiv = document.querySelector('#huaKuai div')let divDown = document.querySelector('#divDown')let divMove = document.querySelector('#divMove')let time = 0, timeOuthuaKuai.addEventListener('mousedown',(e)=>{if (time == 0) {//如果time等于0则添加定时器time == -1setIntval()//当鼠标按下时添加定时器}huaKuai.addEventListener('mousemove',move)//添加鼠标移动事件})huaKuai.addEventListener('mouseup',(e)=>{//添加鼠标抬起事件huaKuai.removeEventListener('mousemove',move)//如果鼠标抬起则取消跟随鼠标移动事件if (divMove.offsetLeft >= divDown.offsetLeft -(20) && divMove.offsetLeft < divDown.offsetLeft+(20)) {//如果滑块的offsetleft 大于 滑块放置区域的offsetleft 并且 滑块的offsetleft 小于 滑块放置区域的offsetleft //操作div的offsetleft必须大于指定div的offsetleft 如果有-20 则能少,//并且 操作div的offsetleft必须小于指定div的左边加上 20 代表着可以多出来边距alert('验证成功,'+'您一共用了'+time/10+'秒钟')clearInterval(timeOut)//清除定时器reStrat()//重置移动,并重新开始return time = 0}else {alert('验证失败')clearInterval(timeOut)//清除定时器reStrat()return time = 0}})function move(e) {//setAttribute可以设置style属性if (((e.clientX-huaKuai.offsetLeft)-35) >0 && ((e.clientX-huaKuai.offsetLeft)-35) < 675) {//如果滑块left位置小于0则不赋值并且滑块的位置不能大于675divMove.setAttribute('style','left:'+((e.clientX-huaKuai.offsetLeft)-35)+'px; background-position-x:'+(-suiJiShu)+'px')huaKuaiDiv.setAttribute('style','left:'+((e.clientX-huaKuai.offsetLeft)-35)+'px')return false//取消浏览器默认行为,如文字拖动}}let suiJiShu = Math.floor(Math.random()*750)suiJiShu += suiJiShu >580 ? -100: +90function reStrat() {//重置suiJiShu = Math.floor(Math.random()*750)//生成随机数0-750suiJiShu += suiJiShu >580 ? -100: +90//如果随机数大于580就-100否则+90 此做法不会让随机数大于750并且不会小于90divMove.setAttribute('style','left:'+0+'px; background-position-x:'+(-suiJiShu)+'px')//将随机数赋值给background-position-xhuaKuaiDiv.setAttribute('style','left:'+0+'px')//重置滑块的初始位置divDown.setAttribute('style','left:'+ suiJiShu + 'px')//将滑块放置处left赋值随机数return false//取消浏览器默认行为}reStrat()function setIntval() {timeOut = setInterval(()=>{console.log(time)return time++ ; timeOut},100)}</script></body></html>
效果图如下：
验证完成后是这样子的：
