今日分享:js制作一个简单的新年倒计时

今日分享:

js制作一个简单的新年倒计时

一个简单的js倒计时的实现

今日分享:js制作一个简单的新年倒计时_第1张图片
这是页面内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年倒计时</title>
</head>
<body>
    <!-- 现在据春节(211日还有多少小时多少分多少秒) -->
    <div class="time" style="color: red;text-align: center;font-size: 30px;border: 1px solid yellow;margin-top: 300px;">  
        距离春节倒计时:
        <span id="lefttime"></span>
    </div>

 
    <script >
		//封装函数newtime
        function newtime(){
            var time=new Date("2021/2/11,00:00:00")//这是春节那天的时间
            var nowtime=new Date()//获取今天现在的事件
            var lefttime=parseInt((time.getTime()-nowtime.getTime())/1000)//他们之间的时间差
            d=parseInt(lefttime/(24*60*60))//所剩day 
            h=parseInt(lefttime/(60*60)%24)//小时
            m=parseInt(lefttime/60%60)//分钟
            s=parseInt(lefttime%60)//秒
            document.getElementById("lefttime").innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";//获取值呈现在页面上
            if(lefttime<=0){
                document.getElementById("lefttime").innerHTML="新年快乐!"
            }
        }//判断是否达到如果倒计时完成则显示新年快乐
        newtime();
        var sh;
        sh=setInterval(newtime,1000)//计时器
        
    </script> 
    
</body>

</html>

HTML效果:

今日分享:js制作一个简单的新年倒计时_第2张图片

难点:

1.时间的计算,算了好几次都没有成功

2.js定时器的用法
定时器有两种
周期性定时器:setInterval();按照指定的周期(以毫秒记)来调用函数或计算表达式。方法会不停地调用函数,直到clearInterval()被调用窗口才会关闭
今日分享:js制作一个简单的新年倒计时_第3张图片他有两个必须参数
code是必须的,一般是要调用的函数
millisec 是周期时间间隔一般规定单位为毫秒

延迟性定时器:setTimeout():在指定的毫秒数后才调用函数或计算表达式
今日分享:js制作一个简单的新年倒计时_第4张图片

清除定时器:clearInterval(函数名)
clearTimeout(函数名);

例子:

setTimeout只执行一次function(){}

setInterval会每隔interval时间执行一次,直至定时器关闭

//创建定时器方法
var time1 = window.setTimeout(function(){},interval);
var time2 = window.setInterval(function(){},interval);

//清除定时器方法
window.clearTimeout(time1);
window.clearTimeout(time2);

总结:今天的分享就到这里了,主要是定时器的使用。

你可能感兴趣的:(javascript,js)