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：学习记录