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>

 

posted @ 2016-08-01 17:28  前端[色色]  阅读(454)  评论(0)  编辑  收藏  举报