<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试你的手速</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="main-div">
<div id="main-div-font">0秒，点击次数0</div>
<div id="main-div-line"></div>
<div id="main-div-thing"></div>
</div>
<script src="jquery-1.7.2/jquery1.7.2.min.js"></script>
<script type="text/javascript">
//初始化变量值
var speed = 3;
var mode = true;
var times = 0;
var clickTimes = 0;
var outTime = 60;
//初始化jquery值
var $oDiv = $('#main-div');
var $oDivLine = $('#main-div>#main-div-line');
var $oDivThing = $('#main-div>#main-div-thing');
var $oDivFont = $('#main-div>#main-div-font');
//设置CSS样式表
$oDivFont.css({position: 'relative', fontSize: '60px', left: '500px', top: '100px'});
$oDivThing.css({position: 'relative', width: '50px', height: '50px', backgroundColor: 'red', left: '60px', top: '285px', zIndex: '1',});
$oDivLine.css({position: 'relative', width: '1200px', height: '1px', backgroundColor: '#000', left: '60px', top: '310px',});
//方便处理的函数
function setX(x) {
$oDivThing.css('left', x + 'px');
}
function getX() {
return parseInt($oDivThing.css('left'));
}
var timer = setInterval(function () {
if(times < outTime) {
if(mode) {
if(getX() < 1250) {
setX(getX() + speed);
}
else {
mode = false;
}
}
else {
if(getX() > 0) {
setX(getX() - speed);
}
else {
mode = true;
}
}
}
else {
clearInterval(timer);
}
}, 10);
var helpTimer = setInterval(function () {
if(times >= outTime) {
clearInterval(helpTimer);
}
else {
times++;
}
}, 1000)
setInterval(function () {
if(!(times > outTime)) {
$oDivFont.html(times + '秒，点击次数' + clickTimes);
}
}, 1)
$oDivThing.on('click', function () {
if(!(times >= outTime)) {
clickTimes++;
}
});
</script>
</body>
</html>
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-7-27 09:04:03
置顶卡
千斤顶
显身卡
发表于 2020-7-27 11:18:57
楼主