html+css+js实现倒计时效果

js倒计时代码,可用于各种倒计时场合。比如生日倒计时、春节倒计时、高考倒计时、纪念日倒计时、寒假倒计时、节日倒计时等等。
电脑桌面新建一个txt文档,把代码复制进去,时间、文字和音乐修改一下,保存后重命名文件后缀为html,再双击就可以打开了。
本文有三个效果,普通效果可以直接使用,高级加背景的效果需要去我的资源下载。
普通效果:
《html+css+js实现倒计时效果》
完整代码:
修改第5行网页标题,42行的时间(精确到秒),54行的文字和倒数第四行的音乐链接。
如何找自己喜欢的音乐链接?
可以看我的另一篇文章—>>>怎么获取音乐的链接地址

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高考加油</title>
<style> canvas {  padding:0; margin:0; } body{  overflow: hidden; margin: 0; } h1{  position: fixed; top: 20%; left: 0; width: 100%; text-align: center; transform:translateY(-50%); font-family: 'Love Ya Like A Sister', cursive; font-size: 60px; color:black; padding: 0 20px; } h1 span{  position: fixed; left: 0; width: 100%; text-align: center; margin-top:30px; font-size:40px; color:black; } </style>
</head>
<body>
<h1 id="h1"></h1>
<script> window.onload=function starttime(){  time(h1,'2021/6/9 18:15:00'); // 2021年高考时间 ptimer = setTimeout(starttime,1000); // 添加计时器 } function time(obj,futimg){  var nowtime = new Date().getTime(); // 现在时间转换为时间戳 var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳 var msec = futruetime-nowtime; // 毫秒 未来时间-现在时间 var time = (msec/1000); // 毫秒/1000 var day = parseInt(time/86400); // 天 24*60*60*1000 var hour = parseInt(time/3600)-24*day; // 小时 60*60 总小时数-过去的小时数=现在的小时数 var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数 var second = parseInt(time%60); // 以60秒为一整份 取余 剩下秒数 obj.innerHTML="<br>距离高考还有:<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span>静静的是你的心情,急急的是你的笔锋,<br>满满的是你的自信,亮亮的是你的成绩,<br>默默的是我的祝福,<br>又是一年高考时,祝金榜题名。</span>" } </script>
<audio autoplay="autoplay" src="http://music.163.com/song/media/outer/url?id=191024.mp3" id="song">
</audio>
</body>
</html>

加上背景的效果1:
背景是飘落的樱花,十分好看。另外背景音乐不止一个,可以设置很多个,播放完一个自动播放下一个。下载地址:网页倒计时樱花背景
《html+css+js实现倒计时效果》
《html+css+js实现倒计时效果》
下载地址:网页倒计时樱花背景
里面有详细的使用说明。
《html+css+js实现倒计时效果》

加上背景的效果2:
背景是雪花和一张图片,适合春节倒计时。
下载地址:网页倒计时加雪花背景
《html+css+js实现倒计时效果》
《html+css+js实现倒计时效果》
下载地址:网页倒计时加雪花背景
里面有详细的使用使用。
《html+css+js实现倒计时效果》

    原文作者:……快乐的√4
    原文地址: https://blog.csdn.net/qq_44809707/article/details/117659669
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞