JS 实现简单时钟效果

最新推荐文章于 2024-05-07 11:38:22 发布

Oscar不是秃头Boy

最新推荐文章于 2024-05-07 11:38:22 发布

阅读量522

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/m0_50873883/article/details/118886922

版权

JavaScript实现动态时间获取

html的基础知识这里就不解释了（其实就用了h标题、input、p标签）

input标签的onclick属性
<input type="button" value="暂停" onclick="stop()";/>
上代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单时钟</title>
</head>

<body>
	<h4>简单的时间</h4>
<p id="time"></p>
<input type="button" value="暂停" onclick="stop()";/>
<input type="button" value="开始计时" onclick="goon()";/>
<p>测试的时候，注意一些特殊的测试用例，比如连续多次点击暂停或开始，看结果是否符合要求。</p>
<script type="text/javascript">
    //向段落里面写入数字1：
    var obj = document.getElementById("time");//getElementById();获取的是简单对象，不是数组或集合
    function getTime(){
        var odate = new Date();        //说明：当前的日期对象，要想实时获得当前的时间，就需要实时的获得当前的日期对象
        var year = odate.getFullYear(); //获取当前年格式：（四位数）
        var month = odate.getMonth()+1; //获取当前月 注意：（月是从0开始的）
        month = month < 10 ? '0'+month:month; //如果当前月小于10月给它前面添0位格式：（2位）
        var day = odate.getDate(); //获取当前天
        day = day < 10 ? '0'+day:day;//同月
        var hour = odate.getHours();//获取当前小时
        hour = hour < 10 ? '0'+hour:hour;//同月
        var minute = odate.getMinutes();//获取当前分钟
        minute = minute < 10 ? '0'+minute:minute;//同月
        var second = odate.getSeconds();//获取当前秒
        second = second < 10 ? '0'+second:second;//同月
        obj.innerHTML = "当前时间："+year+'年'+month+'月'+day+'日  '+hour+'小时:'+minute+'分钟:'+second+'秒';
    }
    
    var timer = setInterval(getTime, 1000);        //每隔1秒，通过函数名getTime找到function体并执行

    //让时间继续切换，每隔1秒执行一次
    function goon(){
        clearInterval(timer);
        //表示使用的就是全局的变量
        timer = setInterval(getTime, 1000);  //更新timer
    }

    function stop()
    {
        clearInterval(timer);//清除定时器,参数就是设置定时器时返回的结果
    }
</script>
</body>
</html>

document对象的方法 getElementById(); （简单对象）getElementsByName()；getElementsByTagName()；getElementsByClassName()；等等（Elements拿到的都是数组对象）；

效果图
动动小手快去试一试吧！方法有很多种喔，最好能从我这里获得启发想到自己的实现方法。

Oscar不是秃头Boy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS 实现简单时钟效果

JavaScript实现动态时间获取html的基础知识这里就不解释了（其实就用了h标题、input、p标签）input标签的onclick属性<input type="button" value="暂停" onclick="stop()";/>上代码<!doctype html><html><head><meta charset="utf-8"><title>简单时钟</title></head
复制链接

扫一扫