3、面试题：端午的倒计时，冒号闪烁

最新推荐文章于 2023-03-11 14:25:55 发布

avoidaily

最新推荐文章于 2023-03-11 14:25:55 发布

阅读量524

点赞数

CC 4.0 BY-SA版权

分类专栏：前端面试题

本文链接：https://blog.youkuaiyun.com/qq_43459224/article/details/90108469

前端面试题专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一段用于计算端午节倒计时的HTML与JavaScript代码。通过获取当前时间和端午节时间，计算剩余的天数、小时、分钟和秒数，并在网页上实时更新显示。代码还实现了秒数闪烁效果，提升视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>端午倒计时</title>
	</head>
	<body>
		<p></p>
    </body>

    <script>
        (function(){
        //查找触发事件的元素
        var p=document.getElementsByTagName("p")[0];
        //创建定时器
        var time=setInterval(function(){
            //获取当前时间
            var now=new Date;
            //获取端午的时间
            var hld=new Date("2019/6/6 18:00:00");
            //console.log(now);
            //console.log(time);
            //计算毫秒数，并转为秒
            var scd=parseInt( (hld-now)/1000 );
            //console.log(scd);
            if(scd==0){
                p.innerHTML="端午节快乐！"
                clearInterval(time);
            }else{
                //计算相隔 xx小时 xx分 xx秒
                //不满一分钟的秒数=相差秒数 % 一分钟的秒数   
                var second=scd%60; //不满一分钟的秒数，取余为秒数
                var minute=Math.floor( scd%(60*60)/60 ); //不满一小时的秒数，取余为分钟
                var hour=Math.floor( scd%(24*60*60)/(60*60) );  //不满一天的秒数，取余为小时
                var day=Math.floor( scd/(24*60*60) ); //相差毫秒数 / 一天毫秒数 = 相差天数 ？
                console.log( day+"天"+hour+"小时"+minute+"分钟"+second+"秒");

                var t=parseInt( (hld-now)/100 )%10;//0-9
                console.log(t);
                //实现：闪烁效果。每秒中，100ms-900ms，显示：，1000ms时，不显示：
                if(t>0){
                    p.innerHTML=`距离端午节还有${day}天${hour}小时:${minute}分钟:${second}秒`;
                }else{
                    p.innerHTML=`距离端午节还有${day}天${hour}小时  ${minute}分钟  ${second}秒`;
                }
            }
        },100);
    })();
    </script>
</html>