* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
position: absolute;
right: 0;
}
.barrier {
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
left: 50%;
top: 50%;
}
img {
width: 500px;
height: 500px;
}
.run {
position: absolute;
left: 0;
top: 200px;
background-image: url(./img/p17.jpg);
background-size: 500px 500px;
width: 100px;
height: 100px;
background-position: 50% 50%;
z-index: 99;
}
.pipeline {
width: 600px;
height: 30px;
border: 1px solid black;
position: absolute;
top: 550px;
right: 0;
}
.bigbox {
position: relative;
height: 600px;
width: 600px;
}
.Slider {
width: 100px;
height: 31px;
background-color: red;
cursor: pointer;
position: absolute;
}
let Slider = document.querySelector(".Slider");
let pipeline = document.querySelector(".pipeline");
let run = document.querySelector(".run");
randomTop();
function reset() {
run.style.left = 0;
Slider.style.left = 0;
}
let o;
// no
function randomimg() {
let r = Math.floor(Math.random() * 17) + 1;
if (o !== undefined) {
console.log("old值是", o);
if (o === r) {
console.log("重复了", o, r);
r = Math.floor(Math.random() * o) + Math.ceil(Math.random() * (17 - o));
}
}
o = r;
console.log("r的值是" + r);
img.src = "./img/p" + r + ".jpg";
run.style.backgroundImage = `url(./img/p${r}.jpg)`;
randomTop();
}
function randomTop() {
let randomt = Math.random() * (box.offsetHeight - barrier.offsetHeight);
let randoml = Math.random() * (box.offsetWidth - barrier.offsetWidth);
barrier.style.top = randomt + "px";
barrier.style.left = randoml + "px";
run.style.top = randomt + "px";
reset();
let x = (randoml / (box.offsetWidth - barrier.offsetWidth)) * 100 + "%";
let y = (randomt / (box.offsetHeight - barrier.offsetHeight)) * 100 + "%";
run.style.backgroundPositionX = x;
run.style.backgroundPositionY = y;
}
let count = 0;
Slider.onmousedown = function(e) {
e.stopPropagation();
e.preventDefault();
let eex = e.offsetX;
pipeline.onmousemove = function(e) {
if (count === 5) {
document.body.style.background = "red";
setTimeout(() => {
alert("验证失败,去百度搜搜怎么移动吧!");
location.href = "http:www.baidu.com:80";
});
}
let ex = e.clientX;
let l = ex - pipeline.offsetLeft - eex - opo.offsetLeft;
console.log(l, pipeline.offsetLeft);
if (l < 0) {
l = 0;
} else if (l + e.target.offsetWidth > pipeline.offsetWidth) {
l = pipeline.offsetWidth - e.target.offsetWidth;
}
Slider.style.left = l + "px";
console.log(e.target);
let _l = (l / (pipeline.offsetWidth - e.target.offsetWidth)) * 100 + "%";
console.log(_l); //百分比
run.style.left = _l;
Slider.onmouseout = function() {
pipeline.onmousemove = null;
Slider.onmouseout = null;
isfinish();
};
};
};
let flag = null;
function isfinish() {
if (Math.abs(barrier.offsetLeft - (run.offsetLeft - run.offsetWidth)) < 5) {
flag = true;
} else {
flag = false;
}
if (flag) {
count = 0;
alert("完成√");
reset();
randomTop();
randomimg();
} else {
++count;
console.log(count);
reset();
randomimg();
}
}
Slider.onmouseup = function() {
pipeline.onmousemove = null;
Slider.onmouseout = null;
isfinish();
};