首页 > Web开发 > 详细

JS-DOM编程-07-周期函数setlnterval

时间:2021-08-08 16:01:45      阅读:23      评论:0      收藏:0      [点我收藏+]

JS-DOM编程-07-周期函数setlnterval

1.获取系统当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周期函数setlnterval</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            //获取当前标准时间对象
            var nowtime1 = new Date();
            //默认格式
            // document.write(nowtime1);
            document.getElementById("timeDiv1").innerText = "默认格式:" + nowtime1;

            //本地化格式:
            var nowtime2 = nowtime1.toLocaleString();
            document.getElementById("timeDiv2").innerText = "本地化格式:" + nowtime2;

            //自定义格式
            //获取当前标准时间对象
            var t = new Date();
            var year = t.getFullYear();//返回年信息,以全格式返回
            var month = t.getMonth();//月份是0-11
            //var dayOfWeed = t.getDay();//获取一周的第几天(0-6)
            var day = t.getDate();//获取日信息
            var hour = t.getHours()//获取时
            var minute = t.getMinutes()//获取分
            var second = t.getSeconds()//获取秒
            document.getElementById("timeDiv3").innerText = "自定义格式:" + 
            year + "年" + (month + 1) + "月" + day +  "日" 
            + hour + "时" + minute + "分" + second + "秒";

            //获取格林尼治时间(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)
            var gltime = t.getTime();//一般使用格林尼治时间当作时间戳(timestamp)
            document.getElementById("timeDiv4").innerText = "格林尼治时间:" + gltime;
            
        }ss
    </script>
    <div id="timeDiv1"></div>
    <div id="timeDiv2"></div>
    <div id="timeDiv3"></div>
    <div id="timeDiv4"></div>
</body>
</html>

技术分享图片

按以上方法获取到当前系统时间后,是静态的,不会自动运行。

下面我们需要做到让显示在网页上的时间自动走起来。

2.显示网页时钟

自动计时:

  • 周期函数setInterval()能按照指定的周期(以毫秒计)来调用函数或计算表达式。
  • 在定义一个获取当前系统时间的函数后,可以在使用周期函数setInterval按指定的周期调用该函数,如此便可实现自动计时的时钟。

停止自动计时:

  • clearInterval()函数可取消setInterval()函数的运行。
  • setInterval()函数返回一个值,可以传入clearInterval()函数中终止周期运行。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周期函数setlnterval</title>
</head>
<body>
    <script type="text/javascript">
        //点击按钮显示当前时间
        var displayTime = function() {
            var t2 = new Date();
            var strTime = t2.toLocaleString();
            document.getElementById("timeDiv5").innerText = strTime;
        }
        //自动定期获取当前时间
        // setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式。 
        var startTime = function() {
            //setInterval()函数返回一个值,可以传入clearInterval()函数中终止周期运行
            //不加var,定义为全局参数
            stop = window.setInterval("displayTime()",1000);
        }
        //停止时间
        //clearInterval()函数可取消setInterval()函数的运行
        //clearInterval()函数的参数必须是setInterval()函数返回的值。
        var stopTime = function() {
            window.clearInterval(stop);
        }
    </script>
    <input type="button" id="btn1" value="点击开始时间" onclick="startTime();">
    <input type="button" id="btn2" value="砸瓦鲁多,停止时间" onclick="stopTime();">
    <div id="timeDiv5"></div>
</body>
</html>

技术分享图片

JS-DOM编程-07-周期函数setlnterval

原文:https://www.cnblogs.com/TSCCG/p/15114646.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!