zoukankan      html  css  js  c++  java
  • javascript——日期时间实例

    案例一:输出当前系统时间:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取当前系统时间</title>
        <script>
        window.onload = function(){
    
            // 获取body元素
            var oBody = document.body;
    
            // 设置定时器,每隔1秒执行一次该函数
            setInterval(fnTime,1000);
    
            //页面加载完先执行日期函数,防止刷新时显示空白
            fnTime();
    
            // 将小于两位的数字变成两位的数字
            function toDouble(num){
                return num < 10 ? '0' + num : '' + num;
            };
    
            // 时间函数体
            function fnTime(){
    
                // 获取日期对象
                var myDate = new Date();
    
                // 获取年月日时分秒
                var iYear = myDate.getFullYear();
                var iMonth = myDate.getMonth()+1;
                var iDay = myDate.getDay();
                var iHour = myDate.getHours();
                var iMin = myDate.getMinutes();
                var iSec = myDate.getSeconds();
                var str = '';
    
                // 将iDay的值对应iWeek数组的下标来获取星期
                var iWeek = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    
                // 将当前的年月日时分秒保存在字符串str中
                str = '今天是:' + iYear + '' + iMonth + '' + iWeek[iDay] + ',' + toDouble(iHour) + ':' + toDouble(iMin) + ':' + toDouble(iSec);
    
                // 将时间直接输出到body页面上显示出来
                oBody.innerHTML = str;
    
            };
    
        };
        </script>
    </head>
    <body>
        
    </body>
    </html>

    注意点:
    1)getMonth()返回值是 0——11

    在获取月份的时候就得在后面加1,不然获取到的是上一个月的月份。

    2)getDay()返回星期几(0——6)
    0 ——> 星期日
    1 ——> 想起一
    2 ——> 星期二
    3 ——> 星期三
    4 ——> 星期四
    5 ——> 星期五
    6 ——> 星期六
    思想:放入数组iWeek = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];,利用数组下标与getDay()的值对应取值

    3)细节问题:将一位数处理成两位数的表示

    通过toDouble函数三目运算判断或者用if else 判断

    --------------------------------------------------------------------------------------------------------------------------------

    案例二:图片模拟系统时间

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片时间</title>
        <script>
        window.onload = function(){
    
            // 获取相关元素
            var oP = document.getElementById('time');
            var aImg = document.getElementsByTagName('img');
    
            // 设置定时器
            setInterval(fnTime ,1000);
    
            //页面加载完立即执行定时器,防止刷新出现空白
            fnTime();
    
            // 十位补零变两位
            function toDouble(num){
                return num <10 ? '0' + num : '' + num;
            }
    
            // 时间函数
            function fnTime(){
    
                // 获取日期对象及时分秒
                var myDate = new Date();
                var iHour = myDate.getHours();
                var iMin = myDate.getMinutes();
                var iSec = myDate.getSeconds();
                
                // 将获取到的时分秒保存到字符串str中
                var str = toDouble(iHour) + toDouble(iMin) + toDouble(iSec);
                
                // 将时分秒赋给p标签显示在页面上
                oP.innerHTML = str;
    
                // str = '150556'
                //str.charAt()选择字符串中的第几个字符,默认从0开始,正好和图片数组中图片路径数字对应[str.charAt(i)对应相应的图片数字]
                // console.log(str.charAt(4));        
                // aImg[4].src = 'img/' + str.charAt(4) + '.JPG';
                // aImg[5].src = 'img/' + str.charAt(5) + '.JPG';
    
                for(var i = 0; i<str.length; i++){
                    aImg[i].src = 'img/' + str.charAt(i) + '.JPG';
                }
    
            };
        };
        </script>
    </head>
    <body>
    <p id="time" style="font-size:30px;"></p>
    <img src="img/0.JPG" />
    <img src="img/0.JPG" />
    <img src="img/0.JPG" />
    <img src="img/0.JPG" />
    <img src="img/0.JPG" />
    <img src="img/0.JPG" />
    </body>
    </html>

    注意点:

    六张图片按顺序对应时分秒存在字符串str中,然后通过str.charAt()方法找到数组中对应的图片路径,最后通过for循环,输出六张图片对应的时分秒。

    ----------------------------------------------------------------------------------------------------------------------------------------------

    案例三:倒计时1:APP上线倒计时(天时分秒)

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    
    <script>
    // var t = Math.floor((iNew - iNow)/1000);
    // 毫秒 - 秒
    // var str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
    
    // alert( str );
    
    // 天:Math.floor(t/86400)
    // 时:Math.floor(t%86400/3600)
    // 分:Math.floor(t%86400%3600/60)
    // 秒:t%60
    
    // 数字形式:new Date( 2013,4,1,9,48,12 );
    // 字符串形式:new Date('June 10,2013 12:12:12');
    
    // January、February、March、April、May、June、
    // July、August、September、October、November、December
    
    window.onload = function(){
        
        var oBody = document.body;
    
        setInterval(showCountDown ,1000);
    
        showCountDown();
        // 将小于两位的数字变成两位的数字
        function toDouble(num){
            return num < 10 ? '0' + num : '' + num;
        };
    
        function showCountDown(){
            // 获取当前时间
            var iNow = new Date();
    
            // 获取结束时间
            var iNew = new Date('2015/6/10,00:00:00');
    
            // alert(Math.floor(4.9));        //向下取整 返回4
            // 获取剩余秒数,因为有小数可能,所以就需要向上取整
            var t = Math.floor((iNew.getTime() - iNow.getTime())/1000);
            // alert(t);
            // 获取天时分秒
    
            var d = Math.floor(t/(60*60*24));
            var h = Math.floor((t/(60*60))%24);
            var m = Math.floor((t/60)%60)
            var s = Math.floor(t%60);
    
            // 然后将秒转换为天时分秒【下面的那种算法也行,不知道怎么算的~_~】
            // var str = Math.floor(t/86400) +'天'+ Math.floor(t%86400/3600) +'时'+ Math.floor(t%86400%3600/60) +'分'+ t%60 +'秒';
            
            var str = d +''+ toDouble(h) +''+ toDouble(m) +''+ toDouble(s) +'';
    
            oBody.innerHTML = '距离APP上线倒计时:' + str;
        };
    };
    </script>
    
    </head>
    
    <body>
    </body>
    </html>

    倒计时2:高考倒计时(天)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>考试天数倒计时</title>
        <script>
    
        window.onload = function(){
         // 获取相关元素
            var oShowTime = document.getElementById('showtime');
         
         // 获取当前时间 
    var curTime = new Date();
         // 获取结束时间
         var endTime = new Date('2015,6,6');
         // 获取剩余天数
         var days = Math.ceil((endTime.getTime()-curTime.getTime())/(1000*60*60*24)); if(days>0){ oShowTime.innerHTML = days; } }; </script> </head> <body> <div>距离高考还有:<span id="showtime"></span></div> </body> </html>

    倒计时关键点:

    1)知道当前时间new Date()和结束时间new Date("2015,6,10");  可通过new Date("2015,6,10");自定义时间

    2)调用getTime()将时间转换成毫秒来进行运算

    3)将毫秒转换成天的计算

    1天 = 24h, 1h=60m, 1m=60s, 1s=1000ms

    天:Math.floor(t/86400)
    时:Math.floor(t%86400/3600)
    分:Math.floor(t%86400%3600/60)
    秒:t%60

    或者:

    天: Math.floor(t/(60*60*24));
    时: Math.floor((t/(60*60))%24);
    分: Math.floor((t/60)%60)
    秒: Math.floor(t%60);

    4)Math.ceil —— 向上取整 (Math.ceil(12.2) == 13)

        Math.floor —— 向下取整 (Math.floor(12.9) == 12)

        Math.round —— 四舍五入 (Math.round(12.2) == 12 ;Math.round(12.9) == 13)

       此处采用向上取整

    -------------------------------------------------------------------------------------------------------------------------------------------

    案例三:限时抢购倒计时

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js代码实现限时抢购还剩 ?天?时?分?秒的计算并显示,要求实现自动倒计时效果</title>
        <script>  
           
            window.onload = function(){  
                // 获取相关元素
                var oBox = document.getElementById('box');
                var oShowTime = document.getElementById('showtime');
    
                setInterval(autoCount,1000);  
    
                // 页面加载完成执行,防止刷新显示空白
                autoCount();  
    
               // 将小于两位的数字变成两位的数字
                function toDouble(num){
                    return num < 10 ? '0' + num : '' + num;
                };        
      
                //倒计时函数  
                function autoCount(){  
                    // 获取当前时间(变化)
                    var currTime = new Date();  
    
                    // 获取结束时间(不变)
                    var endTime = new Date("2015,6,10");  
    
                    // 获取剩余时间的秒数
                    var times = (endTime.getTime()-currTime.getTime())/1000;  //换算成秒  
    
                    // 将秒转换成天时分秒
                    var surplusDay = Math.floor(times/(24*60*60));  
                    var surplusH = Math.floor(times/(60*60)%24);  
                    var surplusM = Math.floor(times/60%60);  
                    var surplusS = Math.floor(times%60);  
    
                    // 将时分秒转换为两位数字
                    var h = toDouble(surplusH);
                    var m = toDouble(surplusM);
                    var s = toDouble(surplusS);
                    
                    // 判断剩余时间是否小于0,执行相应操作
                    if(times < 0){  
                        oBox.innerHTML = "抢购已结束";  
                    }else{  
                        oShowTime.innerHTML = surplusDay+""+h+""+m+""+s+"";  
                    }  
                };
            };
            </script>  
    </head>
    <body>
        <div id="box">限时抢购还剩:<span id="showtime"></span></div>
    </body>
    </html>

    倒计时关键点:

    1)知道当前时间new Date()和结束时间new Date("2015,6,10");  可通过new Date("2015,6,10");自定义时间

    2)调用getTime()将时间转换成毫秒来进行运算

    3)将毫秒转换成天的计算

    1天 = 24h, 1h=60m, 1m=60s, 1s=1000ms

    4)Math.floor()用于取整,只取数字的整数部分,即省掉小数部分。 如果是字符串就只取字符串中开头的数字,如果开头没有数字就返回NaN。

    5)计算剩余小时,分钟,秒需要注意的问题:

    需要采用求余,整数部分是比其大一单位的,所以需要取余数部分,采用Math.floor()再取整数部分,是因为小数部分是比其小一单位的来计算。

    比如求还剩多少小时:times的单位是秒,先把times换算成小时,即times/(60*60),总的剩余times/(60*60)小时,但是现在要除去天的时间,所以times/(60*60)%24 去掉

    了天的部分,取余得到小时,此时times/(60*60)%24可能为小时,调用Math.floor(times/(60*60)%24)取整

     ----------------------------------------------------------------------------------------------------------------------------------------------

    案例三2:带按钮倒计时

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    .t1 { width:400px; }
    </style>
    <script>
    
    /*
    var t =  Math.floor( new Date().getTime()/1000 );
    alert( Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒' );
    */
    
    window.onload = function () {
        var aInp = document.getElementsByTagName('input');
        var iNow = null;
        var iNew = null;
        var t = 0;
        var str = '';
        var timer = null;
        
        aInp[2].onclick = function () {
            iNew = new Date(aInp[0].value);
            clearInterval( timer );
            
            timer = setInterval (function (){
                
                iNow = new Date();
                // t = Math.floor( ( iNew.getTime() - iNow.getTime() ) / 1000 );
                t = Math.floor( ( iNew - iNow ) / 1000 );
                
                if ( t >= 0 ) {
                    
                    str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+''+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
                
                    aInp[1].value = str;
                    
                } else {
                    
                    clearInterval( timer );
                    
                }
            
            }, 1000);
        };
    };
    </script>
    </head>
    
    <body>
    
    距离:<input class="t1" type="text" value="November 27,2015 22:3:0" /><br />
    还剩:<input class="t1" type="text" />
    <input type="button" value="开始倒计时吧" />
    
    </body>
    </html>
  • 相关阅读:
    Webpack4 入门手册(共 18 章)下
    npm(Node Package Manager)
    C#(99):C# 5.0 新特性(.NET Framework 4.5 与 Visual Studio 2012 )
    C#(99):四、Async和Await使异步编程更简单
    C#(99):三、.NET 4.0基于任务的异步模式(TAP),推荐使用
    C#(99):二、.NET 2.0基于事件的异步编程模式(EAP)
    C#(99):一、.NET 1.0 异步编程模型(APM)
    VS中的代码段功能
    VS在C#类文件头部添加文件注释的方法
    C#(99):C# 语言历史版本特性(C# 1.0到C# 8.0汇总)
  • 原文地址:https://www.cnblogs.com/bokebi520/p/4414546.html
Copyright © 2011-2022 走看看