HTML
首先写三个input表单元素,分别为输入框、开始按钮、暂停按钮,并为其赋予一个id属性
<input type="text" id="in_time">
<input type="button" value="开始" id="start">
<input type="button" value="暂停" id="stop">
JavaScript
实现步骤:
- 首先使用dom通过其id属性查找到html中的三个表单元素
- 定义一个显示当前实时时间的函数
- 在时间函数中创建一个时间对象并获取当前时间
- 在时间函数中为input输入框赋一个value属性,并且让value的属性值等于所获取到的当前时间
- 调用函数
- 声明一个全局变量t用来存放计时器
- 为开始按钮绑定一个点击事件,在这个点击事件中写一个对布尔值取反的操作if(!t){执行内容}--表示当变量名t的值为假时执行{}中的内容,防止双击开始按钮后不能进行暂停操作
- 为暂停按钮绑定一个点击事件在这个点击事件中通过clearInterval(t)来进行清除计时器,还要写一个t=""的语句表示将t变成一个空字符串,防止点击暂停按钮后不能进行开始操作
代码演示:
<script>
//DOM查找获取到input框、开始、暂停按钮
var inEle = document.getElementById("in_time");
var startEle = document.getElementById("start");
var stopEle = document.getElementById("stop");
//显示当前实时时间函数
function showTime() {
//时间对象
var date_obj = new Date();
//获取当前时间
var now_time = date_obj.toLocaleString();
//为input输入框赋一个value属性,并且值等于所获取的当前时间
inEle.value = now_time;
}
//调用函数
showTime();
//全局变量t用来存放计时器
var t;
//为开始按钮绑定点击事件
startEle.onclick=function (){
//对布尔值进行取反操作,表示当变量t的值为假时执行{}中的内容
if (!t){
//当点击开始按钮时通过计时器每1秒刷新一次数据
t=setInterval(showTime,1000);
}
};
//为暂停按钮绑定点击事件
stopEle.onclick=function () {
//当点击stop按钮时清除变量t中的计时器
clearInterval(t);
//将变量t变成一个空字符串,防止点击暂停按钮后不能进行开始操作
t="";
}
</script>
效果: