马上又是新的一年了 “跨年倒计时”送给大家

今日学习目标:

跨年倒计时
✅创作者:林在闪闪发光
⏰预计时间:30分钟
个人主页:林在闪闪发光的个人主页

 林在闪闪发光的个人社区,欢迎你的加入: 林在闪闪发光的社区

目录

前言

效果展示 

如何使用 


前言

一眨眼,马上就2023年了,祝大家在新的一年里:身体健康平安,生活充实饱满,事业步步高升,心情阳光灿烂,财运滚滚而来,家庭美满幸福,新年开心快乐! 

效果展示 

文字、背景音乐、倒计时时间可以自己更改

 

如何使用 

 1.第一种方法也是最简单的拿来就可以直接用的

每一行都有注释  我相信没有人会看不懂吧




  
  新年快乐
  



倒计时讲解

其实实只需要用当前window的事件来设置一个开始的事件。【倒计时时间=过年时间-当前时间】

设置time为2023年1月1日,添加计时器从当前时间开始, 设置作用时间,将时间进行一个转换为当前的时间,并设置未来的一个时间戳随后定义一个变量来获取倒计时时间是多少。【未来时间-现在的时间】

再将获取到的时间毫秒为单位/1000来计算,小时数用总小时数-过去的小时数为现在的小时数,再以60秒为一整份,取余计算得到的就是分钟数在用当前的时间%60就是秒数,最后我们插入想要的信息将上述设置的变量插入进去即可!
 

2.第二种其实和第一种差不多 

1. 电脑桌面新建一个txt文本文档(鼠标右击然后点击新建文本文档)

马上又是新的一年了 “跨年倒计时”送给大家_第1张图片

2、进入txt文档把代码复制进去之后,点击关闭并保存 

马上又是新的一年了 “跨年倒计时”送给大家_第2张图片

 3、修改文件后缀为html,最后双击打开即可。

马上又是新的一年了 “跨年倒计时”送给大家_第3张图片

手机端发送: 把电脑端弄好的html文件直接通过QQ或者微信发送给ta,然后让ta使用qq浏览器打开即可

有两种播放背景音乐的方法 一种就是打开自动播放的 还有一种就是需要我们手动点击的

我们用谷歌 或者edge浏览器打开 都是可以自动播放的 代码里我放的有音乐

 马上又是新的一年了 “跨年倒计时”送给大家_第4张图片

如果想设置这种的也非常简单 你只需要把下面的这个复制进去就好了 

非常简单 大家都可以去试一下

 

 最后 祝大家

一帆风顺二龙腾飞三羊开泰四季平安五福临门六六大顺七星高照八方来财

吉星高照张灯结彩    辞旧迎新阖家欢乐

出口成章恭贺新禧    年年有余岁岁平安

 马上又是新的一年了 “跨年倒计时”送给大家_第5张图片

 

你可能感兴趣的:(css,html,前端)