<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="con">
<p>加速器</p>
<p>显示数值<input id="num"></p>
<div class="btn">
<span id="add" >数值加0.01</span>
<span id="jian">数值减0.01</span>
</div>
</div>
<script type="text/ecmascript">
window.onload = function () {
var add =document.getElementById('add');
var num = document.getElementById('num');
num.value = 0;
var timer;
var time = 1000;
function toAdd () {
time = time - 50;
timer = setInterval(function () {
num.value = Number(num.value).toFixed(2);
num.value = Number(num.value) + 0.01;
clearInterval(timer);
toAdd();
},time)
}
add.addEventListener('touchstart', function () {
console.log('goooood');
num.value = Number(num.value).toFixed(2);
console.log('yessss');
num.value = Number(num.value)+ 0.01;
time = 1000;
toAdd();
});
add.addEventListener('touchend',function () {
clearInterval(timer);
})
}
</script>
<style type="text/css">
.con {
height: 4rem;
font-size: 2rem;
}
.con input {
font-size: 3rem;
height: 2rem;
margin: 0.5rem;
}
.btn span {
display: inline-block;
13rem;
height: 8rem;
background-color: lightskyblue;
}
</style>
</body>
</html>