<>今日分享:

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

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

这是页面内容:
<!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> <!-- 现在据春节(2月11日还有多少小时多少分多少秒) --> <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效果:

难点:

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

2.js定时器的用法
定时器有两种

周期性定时器:setInterval();按照指定的周期(以毫秒记)来调用函数或计算表达式。方法会不停地调用函数,直到clearInterval()被调用窗口才会关闭
他有两个必须参数
code是必须的,一般是要调用的函数
millisec 是周期时间间隔一般规定单位为毫秒

延迟性定时器:setTimeout():在指定的毫秒数后才调用函数或计算表达式

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

<>例子:

setTimeout只执行一次function(){}

setInterval会每隔interval时间执行一次,直至定时器关闭
//创建定时器方法 var time1 = window.setTimeout(function(){},interval); var time2 =
window.setInterval(function(){},interval); //清除定时器方法 window.clearTimeout(time1);
window.clearTimeout(time2);
<>总结:今天的分享就到这里了,主要是定时器的使用。

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信