本地计时器
作者:互联网
<body>
<div>
<input type="text" class="d1">
<button class="d2" value="开始"></button>
<button class="d3" value="结束"></button>
</div>
<script>
// let startBtn = $('#d2')[0];
let startBtn = document.getElementById('d2')
let stopEle = document.getElementById('d3')
let inputEle = document.getElementById('d1')
// 4.专门定义一个展示时间的函数
function showTime(){
// 2.获取当前时间对象
let cTimeObj = new Date()
// 3.添加到input标签value属性中
inputEle.value = cTimeObj.toLocaleString()
}
// 6.定义一个存储定时器对象的全局变量(多个函数都要用)
let timeObj = null;
// 1.先给开始按钮绑定一个点击事件
startBtn.onclick = function () {
// 8.判断变量是否已经指代了定时器 其实就是判断是否已经有了一个任务 如果有了就不要再新建
if(!timeObj){
// 5.循环定时任务
timeObj = setInterval(showTime, 1000) // 如果起了多个任务 变量只能指向最后一个
}
}
// 7.给停止按钮绑定一个取消定时器的点击事件
stopEle.onclick = function () {
clearInterval(timeObj) // 移除任务 并不会清空变量的值
// 清空变量的值
timeObj = null
}
</script>
</body>
标签:function,startBtn,timeObj,getElementById,let,本地,计时器,document 来源: https://www.cnblogs.com/051nogato/p/16217176.html