使用JavaScript和HTML表单按钮实现当前时间的开始和暂停

最新推荐文章于 2023-07-18 13:41:45 发布

码农小武

最新推荐文章于 2023-07-18 13:41:45 发布

阅读量917

点赞数

分类专栏： Bootstrap v3 文章标签： javascript html

本文链接：https://blog.csdn.net/yusuhbdybxbdhj/article/details/131535394

版权

Bootstrap v3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文展示了如何使用HTML创建输入框和按钮，结合JavaScript实现动态显示和更新当前实时时间的功能。通过DOM获取元素，设置开始和暂停按钮的点击事件，以及使用setInterval和clearInterval控制时间的显示与停止。

摘要由CSDN通过智能技术生成

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>

效果：