博客

HTML

首先写三个input表单元素，分别为输入框、开始按钮、暂停按钮，并为其赋予一个id属性

<input type="text" id="in_time">
<input type="button" value="开始" id="start">
<input type="button" value="暂停" id="stop">

JavaScript

实现步骤：

1. 首先使用dom通过其id属性查找到html中的三个表单元素
2. 定义一个显示当前实时时间的函数
3. 在时间函数中创建一个时间对象并获取当前时间
4. 在时间函数中为input输入框赋一个value属性，并且让value的属性值等于所获取到的当前时间
5. 调用函数
6. 声明一个全局变量t用来存放计时器
7. 为开始按钮绑定一个点击事件，在这个点击事件中写一个对布尔值取反的操作if(!t){执行内容}–表示当变量名t的值为假时执行{}中的内容，防止双击开始按钮后不能进行暂停操作
8. 为暂停按钮绑定一个点击事件在这个点击事件中通过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>

效果：