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

最新推荐文章于 2022-09-01 15:11:58 发布

置顶皮小孩ls

最新推荐文章于 2022-09-01 15:11:58 发布

阅读量2.5w

点赞数 19

分类专栏： html实例文章标签： html5 javascript 倒计时跨年倒计时烟花

本文链接：https://blog.csdn.net/qq_44809707/article/details/117659669

版权

html实例专栏收录该内容

25 篇文章 88 订阅

订阅专栏

这是一个HTML代码集合，提供三种不同的背景效果——樱花、雪花和烟花，用于创建富有节日气氛的倒计时网页。用户可以自定义网页标题、时间、文字和音乐链接。代码适用于电脑和手机，且每个效果都有详细的使用说明。通过将代码保存为HTML文件并打开，即可实现动态倒计时页面，背景音乐需手动点击播放。

摘要由CSDN通过智能技术生成

写在前面

其他爱心表白代码地址。html表白代码大全（14个效果）
对象生日快乐祝福代码—>>>html生日快乐代码
跨年烟花代码–>>>跨年代码，零点有烟花

网页倒计时代码，可用于各种倒计时场合。比如生日倒计时、春节倒计时、高考倒计时、纪念日倒计时、寒假倒计时、节日倒计时等等。
如何使用？
电脑桌面新建一个txt文档，把代码复制进去，时间、文字和音乐修改一下，保存后重命名文件后缀为html，再双击就可以打开了。（如果打开后没有音乐可以去看看解决方法）
本文有三个效果，普通效果可以直接使用，高级加背景的效果需要去我的资源下载。

普通效果

在这里插入图片描述

完整代码：
修改第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,'2022/2/1');     // 2022年春节时间
        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>距离2022年还有：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span>新年快乐</span>"
}
</script>
<audio autoplay="autoplay" src="http://music.163.com/song/media/outer/url?id=1851244378.mp3" id="song">
</audio>
</body>
</html>