美文网首页
17.JavaScript之Date对象、定时器

17.JavaScript之Date对象、定时器

作者: 讲武德的年轻人 | 来源:发表于2019-08-21 16:53 被阅读0次

    一. Date对象

    • 获取当前时间
    var d1 = new Date();
    console.log(d1);
    
    控制台输出如下图: 哈哈,暴露学习时间了
    • 时间戳数(严格上讲不能叫时间戳,因为时间戳的单位是秒):1970年1月1日起到现在的毫秒数
      现在我就想看一下这个数,则用getTime()方法
    console.log(d1.getTime());
    var x = d1.getTime();
    x = x / (1000*60*60*24*365);
    console.log('距离1970年有' + x + '年了')
    
    输出如下 获得毫秒数1

    获得毫秒数主要是为了方便计算时间差。
    获得毫秒数的另一个办法

    var d2= new Date();
    console.log(d2);
    var d3 = Date.parse(d2.toString());
    console.log(d3);
    
    输出如下: 获得毫秒数2
    • setFullYear
      setFullYear可以设定时间对象的年月日,注意月份的表示为0-11:0为1月,11为12月。
    var d1= new Date();
    d1.setFullYear(2017,0,1) //这里直接修改d1的值
    console.log(d1);
    console.log(setFullYear(2017,0,1));
    
    输出如下:

    再看(通过getFullYear设定年份):

    var d1= new Date();
    console.log(d1)
    d1.setFullYear(d1.getFullYear()+1)
    console.log(d1)
    
    输出如下:
    • 有参数的构造函数
      直接在new Date的时候就直接设定时间:
    var d2 = new Date(2017,4,1);
    console.log(d2)
    
    输出如下:
    • 怎么把年月日单独取出来呢?
    var d1= new Date();
    console.log(d1);
    console.log(d1.getMonth()+1) //输出月份,注意需要+1
    console.log(d1.getDate()) //输出日
    console.log(d1.getDay()) //输出星期几,0是星期日,1-6是周一至周六
    
    输出如下:
    • GMT和UTC
      GMT:世界时即格林尼治平太阳时间,是指格林尼治所在地的标准时间,也是表示地球自转速率的一种形式;
      UTC:协调世界时,又称世界统一时间、世界标准时间、国际协调时间
    var d1= new Date();
    console.log(d1.toGMTString())
    console.log(d1.toUTCString())
    
    输出如下:
    • Date克隆
    var d2= new Date();
    console.log(d2);
    d4 = new Date(d2)
    console.log(d4);
    
    输出如下: Date的克隆

    练习:做一个电子时钟,可以在浏览器实时显示时间

    方法一:
    <body>
        <div id="txt"></div>
        <form>
            <input type="button" value="终止时钟" onclick="stopTime()">
        </form>
        <script>
            // 获取小时、分钟、秒数
            function startTime(){
                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();
                
                var div = document.getElementById('txt');
                div.innerHTML = to2bit(h) + ':' + to2bit(m) + ':' + to2bit(s);
                timer = setTimeout('startTime()',20);
            }
    
            // 定时执行函数
            timer = setTimeout('startTime()',20);
            
            // 数字小于10时,防止出现单位数
            function to2bit(num){
                if(num < 10){
                    return '0' + num;
                }else{
                    return '' + num;
                }
            }
    
            function stopTime(){
                clearTimeout(timer)
            }
        </script>  
    </body>
    ----------------------------------------------------------------------------------
    方法二:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="txt"></div>
        <form>
            <input type="button" value="终止时钟" onclick="stopTime()">
        </form>
        <script>
            // 获取小时、分钟、秒数
            function startTime(){
                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();
                
                var div = document.getElementById('txt');
                div.innerHTML = to2bit(h) + ':' + to2bit(m) + ':' + to2bit(s);
                // timer = setTimeout('startTime()',20);
            }
    
            // 定时执行函数
            timer = setInterval('startTime()',20);
            
            // 数字小于10时,防止出现单位数
            function to2bit(num){
                if(num < 10){
                    return '0' + num;
                }else{
                    return '' + num;
                }
            }
    
            function stopTime(){
                clearInterval(timer)
            }
        </script>  
    </body>
    </html>
    
    看下效果: 按下终止时钟,时钟停止

    二. Date对象常用的方法

    1. setTimeout()
      setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式
      提示:1000 毫秒 = 1 秒。
      提示: 如果你只想重复执行可以使用 setInterval()方法。
      提示: 使用clearTimeout()方法来阻止函数的执行。

      语法:
      setTimeout(code, milliseconds, param1, param2, ...)
      setTimeout(function, milliseconds, param1, param2, ...)
      code/function是要调用一个代码串,也可以是一个函数,不可省略;
      milliseconds是执行或调用 code/function 需要等待的时间,以毫秒计。默认为 0。可选;
      param1, param2, ......是传给执行函数的其他参数(IE9 及其更早版本不支持该参数),可选。

    1. clearTimeout()
      clearTimeout()方法可取消由setTimeout()方法设置的定时操作。
      clearTimeout()方法的参数必须是由 setTimeout()返回的ID值。
      注意: 要使用 clearTimeout()方法, 在创建执行定时操作时要使用全局变量。

      语法:
      clearTimeout(id_of_settimeout)
      id_of_setinterval是调用 setTimeout() 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setTimeout() 所设定的定时执行操作。

    2. setInterval()
      setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
      setInterval() 方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
      提示:1000 毫秒= 1 秒。
      提示:如果你只想执行一次可以使用setTimeout()方法。

      语法:
      setInterval(code, milliseconds);
      setInterval(function, milliseconds, param1, param2, ...)
      code/function是要调用一个代码串,也可以是一个函数,不可省略;
      milliseconds是周期性执行或调用 code/function 需要等待的时间,以毫秒计。默认为 0。可选;
      param1, param2, ......是传给执行函数的其他参数(IE9 及其更早版本不支持该参数),可选。

    3. clearInterval()
      clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
      clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
      注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量。

      语法:
      clearInterval(id_of_setinterval)
      id_of_setinterval是调用 setInterval() 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setInterval() 所设定的定时执行操作;
      该方法没有返回值。

    相关文章

      网友评论

          本文标题:17.JavaScript之Date对象、定时器

          本文链接:https://www.haomeiwen.com/subject/vfrvsctx.html