编写简易计时程序HTML,JS实现简易计时器

JS实现简易计时器

原创

Cherish纯紫2019-11-21 14:59:44著作权

阅读数

464

©著作权归作者所有：来自51CTO博客作者Cherish纯紫的原创作品，如需转载，请注明出处，否则将追究法律责任

https://blog.51cto.com/u_13701875/2452243

.container {

width: 300px;

height: 100px;

background-color: #eee;

padding: 20px 10px;

margin: 100px auto;

}

.box {

width: 100px;

height: 30px;

margin: 30px auto;

}

.box span {

color: red;

font-size: 20px;

display: inline-block;

padding: 0 5px;

}

Document

计时开始

暂停

结束

倒计时 秒

var time = document.querySelector('#time')

var btn1 = document.querySelector('#btn1')

var btn2 = document.querySelector('#btn2')

var btn3 = document.querySelector('#btn3')

var span = document.querySelector('.box').children[0]

// 计时

btn1.addEventListener('click', function() {

var val = time.value

time.value = ''

if (!val) {

alert('请输如大于0的时间，单位：秒')

} else {

var timeId = funTime(val)

}

// 暂停

btn2.addEventListener('click', function() {

var txt = btn2.innerHTML

if (span.innerHTML) {

if (txt == '暂停') {

clearInterval(timeId)

btn2.innerHTML = '开始'

} else {

timeId = funTime(span.innerHTML)

btn2.innerHTML = '暂停'

}

}

})

// 结束

btn3.addEventListener('click', function() {

if (timeId) {

clearInterval(timeId)

span.innerHTML = ''

}

})

// 计时器函数

function funTime(val) {

span.innerHTML = val

var timer = setInterval(() => {

if (val === 0) {

clearInterval(timeId)

span.innerHTML = ''

alert('时间到！')

} else {

val--

span.innerHTML = val

}

}, 1000)

return timer

}

})

赞

0收藏

评论