1、实现点击按钮，滚动条走动和百分比走动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动条和百分比走动</title>
</head>
<body>
<button >进度条</button>
<div id="" style="border: 1px solid black;width: 700px;height: 100px;">
<div id="d1" style="width: 0;height: 100px;background-color: palegoldenrod">
</div>
</div>
<div id="d2" style="font-size: 30px;">
0
</div>
<div id="">
<button id="b1">开始</button>
<button id="b2">暂停</button>
</div>
</body>
</html>
<script type="text/javascript">
var obtn1 = document.getElementById('b1')
var obtn2 = document.getElementById('b2')
var odiv1 = document.getElementById('d1')
var odiv2 = document.getElementById('d2')
var timer = null
var i = 0
obtn1.onmouseup = function(){
this.disabled = true
timer = setInterval(function(){
if (i<100){
i++
odiv1.style.width = 700*i/100+'px'
odiv2.innerHTML = i+'%'
}
obtn1.disabled = false
},100)
}
obtn2.onmouseup = function(){
clearInterval(timer)
}
</script>
结果
2、实现秒表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>秒表</title>
</head>
<body>
<div id="d1" style="height: 100px;width: 200px;background-color: paleturquoise;">
00:00
</div>
<button id="b1">开始</button>
<button id="b2">暂停</button>
<button id="b3">重置</button>
</body>
</html>
<script type="text/javascript">
var odiv = document.getElementById('d1')
var obtn1 = document.getElementById('b1')
var obtn2 = document.getElementById('b2')
var obtn3 = document.getElementById('b3')
var timer = null
obtn1.onclick = function(){
var i = 0
var j = 0
list = odiv.innerHTML.split(':')
var i1 =list[0]
var j1 =list[1]
timer = setInterval(function(){
j++
if (j == 100){
j = 0
i++
}
if (j<10){
j1='0'+j
}
else{
j1=j
}
if (i<10){
i1 = '0'+ i
}
else{
i1 = i
}
odiv.innerHTML=i1+':'+j1
},10)
}
obtn2.onclick = function(){
clearInterval(timer)
}
obtn3.onclick = function(){
clearInterval(timer)
odiv.innerHTML='00:00'
}
</script>
结果
网友评论