代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人机验证</title>
</head>
<style>
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
}
html,body{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box{
width: 400px;
height: 220px;
position: relative;
overflow: hidden;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
}
.white{
width: 80px;
height: 70px;
background: white;
position: absolute;
left: 200px;
top: 50px;
}
.imgbox{
width: 100%;
height: 95%;
background: #95BBFF;
position: relative;
}
#btnbox{
width: 80px;
height: 100%;
bottom: 0;
text-align: center;
position: absolute;
}
.btnboximg{
width: 80px;
height: 70px;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
top: 50px;
position: absolute;
background: #95BBFF;
}
#btn{
width: 80px;
height: 10px;
position: absolute;
bottom: 0;
background: #ccc;
}
</style>
<body>
<div class="box">
<div class="imgbox">
<div class="white"></div>
</div>
<div id="btnbox">
<div class="btnboximg"></div>
<div id="btn"></div>
</div>
</div>
</body>
<script>
var btn = document.getElementById("btn");
var btnbox = document.getElementById("btnbox");
var left;
btn.onmousedown = function (ev) {
var oEvent = ev || event;
var x = oEvent.clientX - btnbox.offsetLeft;
document.onmousemove = function (ev) {
var oEvent = ev || event;
var x1 = oEvent.clientX - x;
btnbox.style.left = x1 + "px";
left = x1;
};
document.onmouseup=function () {
document.onmousedown = null;
document.onmousemove = null;
if (left == 200){
alert("验证通过");
}else {
alert("验证失败");
btnbox.style.left = "40px";
}
}
}
</script>
</html>
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
