練習倒計時例子_v1.0-byKL

heartFollower 發布于2019-08-21 15:27 / 1691人閱讀

摘要：練習倒計時例子倒計時就是時間一秒秒的倒數一般都是目標時間跟現在時間進行比較部分結果部分對象的使用對象基于年月日世界標準時間起的毫秒數返回的是毫秒數傳入的參數表示日期的字符串值。

練習倒計時例子

倒計時就是時間一秒秒的倒數,一般都是目標時間跟現在時間進行比較

html部分




    結果:

js部分

Date對象的使用

Date 對象基于1970年1月1日（世界標準時間）起的毫秒數,返回的是毫秒數

傳入的參數dateString表示日期的字符串值。該字符串應該能被 Date.parse() 方法識別的才能夠解析為毫秒數

通過解析時間字符串獲得他們的毫秒數,然后可以對毫秒數進行運算來獲取相差值

有類似getFullYear()的方法提取時間值,參考

對于數字運算后的取整(Math對象的使用)

floor方法是取整,并且沒有四舍五入的情況

setInterval的使用

 var inputTime = document.getElementById("inputTime");
    var submitBtn = document.getElementById("submit");

    submitBtn.addEventListener("click", function () {
        countDownFunc();
    }, false);

    //倒計時func
    var countDownFunc = function(){
        setInterval(function () {
            var dstTime = new Date((inputTime.value));
            var now = new Date();
            var time = (dstTime - now) / 1000;
            console.log(time);
            // 秒轉化為小時，分鐘，天
            var day = Math.floor(time / (24 * 60 * 60));
            var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60));
            var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);
            var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);


            var str = "距離還剩下:" + day + "天" + hour + "時" + minute + "分" + second + "秒";
            var _timmer = document.getElementById("view");
            _timmer.innerHTML = str;
        },1000)
    };

GPU云服務器云服務器 html練習阿里大于 php短信例子練習練習代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88188.html

task0002（四）- 練習：數據處理、輪播及交互

摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。轉載自我的個人博客歡迎大家批評指正包括5部分：小練習1-處理用戶輸入小練習2-日期對象的使用小練習3：輪播圖小練習4：輸入提示框小練習...

cnTomato 2019-08-22 10:59 評論0 收藏0
task0002（四）- 練習：數據處理、輪播及交互

摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。轉載自我的個人博客歡迎大家批評指正包括5部分：小練習1-處理用戶輸入小練習2-日期對象的使用小練習3：輪播圖小練習4：輸入提示框小練習...

趙春朋 2019-08-01 15:00 評論0 收藏0
原生js練習題---第三課

摘要：我這里更進一步修復了這個，想法很簡單我可以等你輸完再把非數字全替換掉，只要把方法的正則改成全局匹配就。頁面加載后累加，自加實現效果頁面加載后累加，自加第三題的變種，換成觸發變化而已。 0x1用typeof查看數據類型略過，不過typeof用來判斷數據類型是不太靠譜的，尤其是涉及到引用類型的時候，除非是要檢測一個變量是否有定義，否則最好采用Object.prototype.toStri...

tomlingtm 2019-08-19 17:56 評論0 收藏0
html5之canvas

摘要：是新加的標簽，主要有和，的應用是動畫和圖像，的應用是游戲渲染。 HTML5 Canvas canvas是html5新加的標簽，主要有2D和3D，2D的應用是動畫和圖像，3D的應用是游戲渲染。 1. 2D基礎 1.1繪制線 canvas window.onload = function(){ ...

蘇丹 2019-08-26 13:43 評論0 收藏0