首页js显示五一倒计时效果

js显示五一倒计时效果

时间: 2024-12-19 14:23:15 浏览: 45

JS显示五一倒计时效果可以通过以下步骤实现： 1. 获取当前时间和五一节日时间的时间戳； 2. 计算两个时间戳之差，即剩余时间； 3. 将剩余时间转换为天、小时、分钟、秒的形式，并将其显示在页面上。以下是一个简单的实现代码示例： ``` <html> <head> <title>五一倒计时</title> <script type="text/javascript"> function showTime() { //获取当前时间 var now = new Date(); var nowTime = now.getTime(); //设置五一节日时间为5月1日0时0分0秒 var endTime = new Date("2022/05/01 00:00:00"); var end = endTime.getTime(); //计算剩余时间 var leftTime = end - nowTime; //转换为天、小时、分钟、秒 var leftSecond = parseInt(leftTime / 1000); var day = Math.floor(leftSecond / (60 * 60 * 24)); var hour = Math.floor((leftSecond - day * 24 * 60 * 60) / 3600); var minute = Math.floor((leftSecond - day * 24 * 60 * 60 - hour * 3600) / 60); var second = Math.floor(leftSecond - day * 24 * 60 * 60 - hour * 3600 - minute * 60); //显示倒计时 document.getElementById("timer").innerHTML = "距离五一节还有：" + day + "天" + hour + "小时" + minute + "分钟" + second + "秒"; } setInterval(showTime, 1000);//每秒更新一次倒计时 </script> </head> <body> <div id="timer"></div> </body> </html> ```

阅读全文