[HTML/JS]使用JS新年倒计时

最新推荐文章于 2023-08-23 23:55:00 发布

死呆鱼

最新推荐文章于 2023-08-23 23:55:00 发布

阅读量1.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/GS119115/article/details/128662232

版权

眨眼间2023年春节即将到来，一个好的春节倒计时也能为过年增加一丢仪式感。具体效果及代码如下。

效果图：

代码如下：

样式部分

body {
        background-color: #D81112;
        text-align: center;
    }

    span {
        color: white;
        font-size: 60px;
    }
    .newyear{
        font-size: 200px;
        color: white;

    }

主体部分

     <div>
        距离2023年春节还有
        <span>    
        </span>
     </div>
     <br>
     <img src="兔年快乐.jpg" alt="">

JS部分

<script>
        window.onload = function(){
            var span = document.querySelector('span')

setInterval(function () {
    
    var nowTime = (new Date()).valueOf();
    var targetTime = (new Date('2023-01-22 00:00:00')).valueOf();

    var time = targetTime - nowTime;

var day = parseInt(time/1000/60/60/24);
var h = parseInt(time/1000/60/60%24);
var m = parseInt(time/1000/60%60);
var s = parseInt(time/1000%60);

span.innerText = day + '天' + h + "小时" + m + "分" + s + "秒";

if(day < 10 ){
    span.innerText =  0 + day + '天' + h + "小时" + m + "分" + s + "秒";
}

if(h < 10 ){
    span.innerText = day + '天' + 0 + h + "小时" + m + "分" + s + "秒";
}

if(m < 10 ){
    span.innerText = day + '天'  + h + "小时" + 0 + m + "分" + s + "秒";
}

if(s < 10 ){
    span.innerText = day + '天' + h + "小时" + m + "分" + 0 + s + "秒";
}
},1000)

if (day == 0 && h == 0 && m == 0 && s == 0) {
                span.style.className = 'newyear'
                span.innerText = "过年啦！新年快乐！";
            }
        }
        
    </script>

//用window.onload提前渲染body部分，使JS部分可置于body部分之前

window.onload = function(){

//获取span节点用于添加需要显示的时间

var span = document.querySelector('span')

setInterval(function () {

//获取观看程序的时间

var nowTime = (new Date()).valueOf();

//设置目标时间（新年）

var targetTime = (new Date('2023-01-22 00:00:00')).valueOf();

//新年日期-观看程序的时刻得到所需时间

var time = targetTime - nowTime;

//时间差'time'基本单位是毫秒/1000将单位换成秒再换算成所需日/时/分/秒