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

您所在的位置:网站首页 节日倒计时软件桌面怎么设置 html+css+js实现倒计时效果

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

2023-12-21 08:51| 来源: 网络整理| 查看: 265

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

写在前面

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

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

普通效果

在这里插入图片描述

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

新年快乐 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; } 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+"秒"+"新年快乐" } 樱花背景效果:

背景是飘落的樱花,十分好看,整个页面全程有背景音乐(不会自动播放的话需要点击一下页面) 手机和电脑都可以访问。 截图效果: 在这里插入图片描述 gif动图效果: 在这里插入图片描述

完整项目下载地址—>>>网页倒计时樱花背景 里面有详细的使用说明。 在这里插入图片描述

雪花背景效果

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

完整项目下载地址—>>>网页倒计时加雪花背景 里面有详细的使用使用。 在这里插入图片描述

烟花背景效果(推荐)

倒计时背景一直在放烟花,和城市放的烟花差不多,十分好看,而且还有多种烟花音效(没有烟花音效的话需要点击一下页面),还是比较逼真的。 手机和电脑都可以访问。 截图效果: 在这里插入图片描述

gif动图效果: 在这里插入图片描述

完整项目下载地址—>>>网页倒计时加烟花背景 里面有详细的使用使用。 下载资源后没有烟花音效的话,点击一下页面就有了!!!!! 下载资源后没有烟花音效的话,点击一下页面就有了!!!!! 下载资源后没有烟花音效的话,点击一下页面就有了!!!!! 在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3