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

目录

  • 写在前面
  • 普通效果
  • 樱花背景效果:
  • 雪花背景效果
  • 烟花背景效果(推荐)

写在前面

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

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

普通效果

html+css+js实现倒计时效果_第1张图片

完整代码:
修改第5行网页标题,42行的时间,54行的文字和倒数第四行的音乐链接。
如何找自己喜欢的音乐链接?
可以看我的另一篇文章—>>>怎么获取音乐的链接地址


<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="
距离2022年还有:
"
+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"
新年快乐"
}
script> <audio autoplay="autoplay" src="http://music.163.com/song/media/outer/url?id=1851244378.mp3" id="song"> audio> body> html>

樱花背景效果:

背景是飘落的樱花,十分好看,整个页面全程有背景音乐(不会自动播放的话需要点击一下页面)
手机和电脑都可以访问。
截图效果:
html+css+js实现倒计时效果_第2张图片
gif动图效果:

完整项目下载地址—>>>网页倒计时樱花背景
里面有详细的使用说明。
html+css+js实现倒计时效果_第3张图片

雪花背景效果

背景是雪花和一张图片(背景图片可以更换),适合春节倒计时,整个页面全程有背景音乐(不会自动播放的话需要点击一下页面)
手机和电脑都可以访问。
截图效果:

gif动图效果:

完整项目下载地址—>>>网页倒计时加雪花背景
里面有详细的使用使用。
html+css+js实现倒计时效果_第4张图片

烟花背景效果(推荐)

倒计时背景一直在放烟花,和城市放的烟花差不多,十分好看,而且还有多种烟花音效(没有烟花音效的话需要点击一下页面),还是比较逼真的。
手机和电脑都可以访问。
截图效果:
html+css+js实现倒计时效果_第5张图片

gif动图效果:

完整项目下载地址—>>>网页倒计时加烟花背景
里面有详细的使用使用。
下载资源后没有烟花音效的话,点击一下页面就有了!!!!!
下载资源后没有烟花音效的话,点击一下页面就有了!!!!!
下载资源后没有烟花音效的话,点击一下页面就有了!!!!!
html+css+js实现倒计时效果_第6张图片

你可能感兴趣的:(html实例,html5,javascript,倒计时,跨年倒计时,烟花)