美文网首页从零开始学前端JavaScriptJavaScript学习笔记
前端基本功:JS必记知识点+案例(五)时间

前端基本功:JS必记知识点+案例(五)时间

作者: 越IT | 来源:发表于2016-11-04 01:20 被阅读93次

    日期函数 ( Date() )

    这个函数 (对象) 可以设置我们本地 日期。 年月日 时分秒

    1.声明日期

    var date = new Date();

    创造声明一个新的日期函数 赋值给了 date
    var arr = new Array();

    2.使用函数

    得到 毫秒数 ms s m h
    从 1970 年1 月1号 unix 32位 68年
    2038 千年虫 64 位

    var date = new Date();
    date.getTime();
    date.valueOf(); 得到 距离 1970年的毫秒数

    var date  = new Date();  // 声明
    console.log(date.getTime());  // 提倡使用的
    console.log(date.valueOf());
    
    // 直接使用
    console.log(Date.now());
    console.log(+new Date());
    

    常用的日期的方法

    常用的日期的方法

    案例:日历(获取当前时间)

    日历样式图
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 150px;
                height: 180px;
                background-color: #369;
                margin: 100px auto;
                text-align: center;
            }
            .box p {text-align: center;
                line-height: 60px;
                font-size:12px;
                color: #fff;
            }
            .box span{
                display: block;
                width: 75px;
                height: 75px;
                margin: 0 auto;
                font-size:50px;
                color: #000;
                background-color: yellowgreen;
                line-height: 75px;
            }
        </style>
        <script>
            window.onload = function(){
               var box = document.getElementById("box");
                var boys = box.children;
                 //日期函数
                var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
                 var date = new Date();   // 声明日期函数
                 boys[0].innerHTML = date.getFullYear()+"年"+ (date.getMonth()+1) +
                 "月" + date.getDate() + "日" + "  " + arr[date.getDay()];
                 boys[1].innerHTML = date.getDate();  // 今天的日子
            }
        </script>
    </head>
    <body>
    <div class="box" id="box">
        <p></p>
        <span></span>
    </div>
    </body>
    </html>
    

    定时器

    很多情况下,一些操作不需要人工干预, 代码自己会不断的去执行 。
    而且会有时间的绑定 。 比如每隔 5秒钟就去执行一次事件。

    我们可以设定时间 让某个动作不断的去执行 。 这个我们再js 里面用定时器来表示。

    window.setInterval(“执行的函数”,间隔时间)

    正确的写法:

    setInterval(fun, 1000); 1000 ms 毫秒

    每隔1秒钟,就去执行一次 fun 这个函数.

    setInterval(“fun()”,1000) 可以用
    setInterval( function(){} , 1000 )
    setInterval(fun(),1000) 错误的

    定时器 特别的像 for 循环,但是我 的定时器最大的特点在于, 自动,可以设定时间。

    案例源码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload = function(){
              var demo = document.getElementById("demo");
                setInterval(fn,1000);  //  每隔1秒,就去 调用 一次 fn 这个函数
                var num = 1;
                function fn(){
                    num++;
                    demo.innerHTML = num ;
                }
            }
        </script>
    </head>
    <body>
     <div id="demo"></div>
    </body>
    </html>
    

    倒计时

    倒计时 = 用将来的时间 - 现在的时间

    问题: 用 毫秒减去 现在距离 1970年1
    将来时间 距离 1970 毫秒数
    用将来的毫秒数 - 现在的毫秒数 不断转换就可以了

    定义自己的日子

    var endTime = new Date(“2016/12/12”);

    如果date 括号里面写日期 就是 自己定义的时间
    如果 date括号里面不写日期 , 就是当前时间 。

    new Date(“2016/12/12 17:30:00”);

    日期和时分秒中间 有空格隔开

    常考面试题:

    倒计时案例源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                font-size: 30px;
                text-align: center;
                color: red;
            }
        </style>
        <script>
            window.onload = function(){
                var demo = document.getElementById("demo");
                var endTime = new Date("2016/12/12 17:30:00");// 最终时间
                setInterval(clock,1000); //开启定时器
                function clock(){
                    var nowTime= new Date(); //一定是要获取最新的时间
                    //console.log(nowTime.getTime()); 获得自己的毫秒
                    var second = parseInt((endTime.getTime()-nowTime.getTime())/1000);
                    //用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能除不断 取整
                    //console.log(second);
                    //1 小时3600秒
                    //second/3600 一共的小时数            /24 天数
                    var d = parseInt(second / 3600 /24); //天数
                    //console.log(d);
                    var h = parseInt(second /3600 %24);  //小时
                    //console.log(h);
                    var m = parseInt(second/60 %60);//分
                    //console.log(m);
                    var s = parseInt(second %60); //当前的秒
                    console.log(s);
                    /*if(d<10)
                    {
                       d = "0" + d;
    
                    }*/
                    d<10 ? d="0"+d :d;
                    h<10 ? h="0"+h :h;
                    m<10 ? m="0"+m :m;
                    s<10 ? s="0"+s :s;
                    demo.innerHTML ="距离抢购时间还剩:"+d+"天"+h+"小时"+m+"分钟"+s+"秒";
    
    
                }
            }
        </script>
    </head>
    <body>
    <div id="demo"></div>
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:前端基本功:JS必记知识点+案例(五)时间

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