zoukankan      html  css  js  c++  java
  • js学习笔记9----时间操作

    1.时间操作函数如下:

    new Date();   //获取系统时间

    getFullYear(); //年

    getMonth()+1; //月,初始值为0

    getDate(); //日

    getDay(); //星期,星期日返回的值为0

    getHours(); //时

    getMinutes(); //分

    getSeconds(); //秒

    完整示例如下:

    <!DOCTYPE html>
    <html>
    <head>
        <title>操作系统时间</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            window.onload = function(){
                setInterval(getClock,1000);
    
                getClock();//页面打开自动执行,防止刷新1s后才显示
                function getClock(){
                    var oBody = document.body;
                    var str = "";
                    var myDate = new Date(); //获取系统时间
    
                    var iYear = myDate.getFullYear(); //
                    var iMonth = myDate.getMonth()+1; //月,初始值为0
                    var iDate = myDate.getDate(); //
                    var iWeek = myDate.getDay(); //星期,星期日返回的值为0
                    var iHour = myDate.getHours(); //
                    var iMin = myDate.getMinutes(); //
                    var iSec = myDate.getSeconds(); //
    
                    if(iWeek === 0) iWeek = "星期日";
                    if(iWeek === 1) iWeek = "星期一";
                    if(iWeek === 2) iWeek = "星期二";
                    if(iWeek === 3) iWeek = "星期三";
                    if(iWeek === 4) iWeek = "星期四";
                    if(iWeek === 5) iWeek = "星期五";
                    if(iWeek === 6) iWeek = "星期六";
    
                    str = iYear+""+iMonth+""+iDate+""+ iWeek+ addZero(iHour)+":"+addZero(iMin)+":"+addZero(iSec);
                    oBody.innerHTML = str;
                }
    
                function addZero(n){
                    //如果当前返回的值小于10,则给它添加一个0
                    return n<10 ? "0"+n : ""+n;
                }
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>
    2.倒计时原理:

    倒计时在网页中也是一种常见的效果,它的原理就是将两个时间进行比较,然后再把算出来的值进行天,时,分,秒的转化,具体的使用案例如下代码所示:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>倒计时</title>
        <script type="text/javascript">
            window.onload = function(){
                cutdown();
                function cutdown(){
                    var str="";
                    var timer=null;
                    var iNow = new Date();    //当前日期
                    var iNew = new Date(2018,4,1,0,0,0); //未来的一个时间,数字形式,月份需要当前月份-1
                    //var iNew = new Date('August 9,2016 0:0:0'); 字符串形式
    
                    var t = Math.floor((iNew - iNow)/1000); //毫秒转化成秒
                    var day = addZero(Math.floor(t/86400)); //获取天
                    var hours = addZero(Math.floor(t%86400/3600)); //获取小时
                    var min = addZero(Math.floor(t%86400%3600/60)); //获取分钟
                    var sec = addZero(Math.floor(t%60)); //获取秒钟
                    if(t>=0){
                        str = "距离2018年国庆节还有:"+day+"" + hours+"小时"+ min+""+ sec+"";
                        document.body.innerHTML = str;
                    }else{
                        clearInterval(timer);
                    }
                }
                function addZero(n){
                    //如果当前返回的值小于10,则给它添加一个0
                    return n<10 ? "0"+n : ""+n;
                }
                timer = setInterval(cutdown,1000);
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>
  • 相关阅读:
    解决关于ArcGIS10.2服务手动启动的问题
    简单利用XSS获取Cookie信息实例演示
    Sublime text 3 如何格式化HTML/css/js代码
    和你一起做一百件事
    两个人在一起,无论做什么都觉得很浪漫。 盘点了情侣之间一定要做的100件事,做完这100件事就结婚吧!
    摩根士丹利
    2016中国app年度排行榜:十大行业、25个领域、Top 500 和2017趋势预测
    国外最受欢迎的十大社交APP网站
    中国境内PEVC投资公司名单
    2015中国10大最佳创业投资人(含50强完整名单)
  • 原文地址:https://www.cnblogs.com/sese/p/5726594.html
Copyright © 2011-2022 走看看