HTML中 JS 實現時間倒計時、自定義時間

天、時、分、秒

HTML部分

<div class="content"></div>

JS部分

<script type="text/javascript">
function countDown(){
    var start = new Date();  //開始時間
var end = new Date('2018/2/14,23:10:59');//結束時間，可以設置時間  
//var end = new Date('2021,06,25');//設置時間 這種時間格式 不兼容安卓蘋果端

//parseInt()取整
var result = parseInt((end.getTime()-start.getTime())/1000);//計算出豪秒
var d = parseInt(result/(24*60*60));//用總共的秒數除以1天的秒數
var h = parseInt(result/(60*60)%24);//精確小時，用去余
var m = parseInt(result/60%60);//剩余分鍾就是用1小時等於60分鍾進行趣余
var s = parseInt(result%60);
document.querySelector('.content').innerHTML = '距離倒計時結束'+d+'天'+h+'時'+m+'分'+s+'秒';
setTimeout(countDown,500);
//當倒計時結束時，改變內容
if(result<=0){
    document.querySelector('.content').innerHTML = '倒計時結束'
}
}
countDown()
</script>

天數倒計時

<script type="text/javascript">
// 首先要知道開始天數和結束天數，然后進行相減
var start = new Date();
var end= new Date("2021/06/26")
//var end = new Date('2018,2,14');//可以設置時間
//其次1天=24小時 1小時=60分鍾 1分鍾=60秒 1秒等於1000毫秒
var retule = (end.getTime() - start.getTime())/(24*60*60*1000);//用總共的秒數除以一天的秒數

//最后用math方法取整

retule = Math.ceil(retule)

document.querySelector('.content').innerHTML = "距離倒計時結束有"+retule+"天"

</script>

時鍾demo

<script type="text/javascript">
function checkTime(i){
    if(i<10){

        i = '0'+i;
    }
    return i;
}
function showTime(){
    var obj = new Date();
    var year = obj.getFullYear();
    var month = obj.getMonth()+1;
    var dates = obj.getDate();
    var day = obj.getDay();
    var minutes = obj.getMinutes();
    var seconds= obj.getSeconds();
    
    var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    m = checkTime(minutes);  //之所以這樣賦值，是因為當小於10上，會出現01、02等
    s = checkTime(seconds);
    
    getEle('.content').innerHTML = year+'年'+month+"月"+dates+'日'+week[day]+m+'分'+s+"秒";
    setTimeout(showTime,1000);
}
function getEle(name){
    return document.querySelector(name)
}

    
    showTime()
    
    
// console.log(obj.yearMonthDay())
    setTimeout(showTime,500);
</script>
</html>

ps：學習記錄