js尝试 新年倒计时2023
目录
一.效果展示:
二.实现
1.源代码展示
2.思路
3.步骤(js部分)
B. 获取时间
C.创建计时器函数
D.反复调用计时器函数
一.效果展示:
距离2023.1.1还有27天.
二.实现
1.源代码展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var count = document.getElementsByClassName('main');var times0 = document.getElementsByClassName('time');var inputtime = +new Date("2023/01/01 00:00:00");console.log(inputtime);var timer = null;clearInterval(timer)timer = setInterval(countdown,1000)function countdown(){var nowtime = +new Date();var times = parseInt((inputtime - nowtime ) / 1000);if(times >= 0){var d = parseInt(times/60/60/24);d = d < 10 ? '0' + d : d ;var h = parseInt(times/60 /60%24);h = h < 10 ? '0' + h : h ;var m = parseInt(times/60%60);m = m < 10 ? '0' + m : m ;var s = parseInt(times%60);s = s < 10 ? '0' + s : s ;times0[0].innerHTML = d;times0[1].innerHTML = h;times0[2].innerHTML = m;times0[3].innerHTML = s;}else{clearInterval(timer)}} </script><style>*{margin: 0%;padding: 0%;}body{height: 100vh;width: 100%;display: flex;align-items: center;justify-content: center;}.block{display: inline-block;margin-left: 50px;}.block p{font-size: 40px;color: aliceblue;font-weight: bolder;text-align: center;}.block a{font-size: 20px;color: aliceblue;}#nyc{color: aliceblue;font-size: 50px;}</style>
</head><body background="图片\10523Q492-0.jpg"><div class="main"><p id="nyc"> New Year Countdown</p><br><div class="block"><p class="time">00</p><a>days</a></div><div class="block"><p class="time">00</p><a>hours</a></div><div class="block"><p class="time">00</p><a>minutes</a></div><div class="block"><p class="time">00</p><a>seconds</a></div></div>
</body></html>2.思路
创建一个计时器函数, 计算出当前时间和目标时间的距离.
利用"setInterval"方法不断调用计时器函数,达到数字变换, 也就是倒计时的效果.
3.步骤(js部分)
var count = document.getElementsByClassName('main');var times0 = document.getElementsByClassName('time');var inputtime = +new Date("2023/01/01 00:00:00");var nowtime = +new Date();console.log(inputtime);var timer = null;clearInterval(timer)timer = setInterval(countdown,1000)
A."var"定义变量
利用"document.getElementsByClassName()"方法提取<body>中已经创建的元素作为js对象.
类似的方法有:
B. 获取时间
"+new Date()"方法可以获取当前时间距离"1970年1月1日0时0分0秒'的毫秒数, 利用这点可以获取当前时间.
括号中若添加具体日期(写法: 年/月/日 时:分:秒 ), 则可以获取具体日期距离"1970年1月1日0时0分0秒'的毫秒数, 利用这点可以获取目标时间.
function countdown(){var times = parseInt((inputtime - nowtime ) / 1000);if(times >= 0){var d = parseInt(times/60/60/24);d = d < 10 ? '0' + d : d ;var h = parseInt(times/60 /60%24);h = h < 10 ? '0' + h : h ;var m = parseInt(times/60%60);m = m < 10 ? '0' + m : m ;var s = parseInt(times%60);s = s < 10 ? '0' + s : s ;times0[0].innerHTML = d;times0[1].innerHTML = h;times0[2].innerHTML = m;times0[3].innerHTML = s;}else{clearInterval(timer)}}
C.创建计时器函数
计算时间的距离:
(目标时间-当前时间)/1000=时间距离
var times = parseInt((inputtime - nowtime ) / 1000);时间距离转换成 天数,时数,分数,秒数:
并做一个简单判断:
如果计算出来的数字小于10, 则在数字面前添加一个0一保持美观和谐.
var d = parseInt(times/60/60/24);d = d < 10 ? '0' + d : d ;var h = parseInt(times/60 /60%24);h = h < 10 ? '0' + h : h ;var m = parseInt(times/60%60);m = m < 10 ? '0' + m : m ;var s = parseInt(times%60);s = s < 10 ? '0' + s : s ;将计算所得数字添加到页面中:
times0[0].innerHTML = d;times0[1].innerHTML = h;times0[2].innerHTML = m;times0[3].innerHTML = s;利用到了 "innerhtml"方法, 主要用于改变<body>中已经定义的元素.
最后做一个总的判断:
如果时间距离大于零, 则做计算, 展现倒计时效果.
如果距离等于零, 则对函数的反复调用停止, 计时终止
if(times >= 0){}else{clearInterval(timer)}
D.反复调用计时器函数
var timer = null;clearInterval(timer)timer = setInterval(countdown,1000)"setInterval()"方法中有两个参数:
第一个: 将要调用的函数名;
第二个: 调用的间隔时间, 单位为一毫秒, 自然, "1000"即代表"1秒钟调用一次"
"clearInterval(timer)"指在调用之前将调用器归零
以上就是全部内容, 感谢阅读.
js尝试 新年倒计时2023相关推荐
- HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
HTML+CSS+svg绘制精美彩色闪灯圣诞树, HTML+CSS+Js实时新年时间倒数倒计时(附源代码) 本篇目录 一.前言 二.主要功能 三.效果展示 四.编码实现步骤 五.资源下载 六.完整源代 ...
- HTML5七夕情人节表白网页(新年倒计时-红色雪花) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱
HTML5七夕情人节表白网页❤新年倒计时-红色雪花❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 ...
- HTML5七夕情人节表白网页(新年倒计时+白色雪花飘落) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 c
HTML5七夕情人节表白网页❤新年倒计时+白色雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表 ...
- 2023 新年倒计时HTML源码
最近马上也快到2023年了,我为大家准备了一款精美的2023年倒计时的HTML源码,直接上传至服务器部署即可. 2023 新年倒计时HTML源码
- 简易新年倒计时的js部分
因为前面HTML和CSS学的不扎实,在学习JS的过程中前面的一些知识点已经有所遗忘了,所以这里是我参考GitHub中所给代码完成的简易新年倒计时的js部分.代码如下: <!DOCTYPE htm ...
- 2023年最新html5cavnas新年倒计时烟花动画特效
效果图 利用html5cavnas实现烟花特效,文字特效,新年倒计时,月亮动画特效 1.找素材背景 百度搜了几张图片 2.抠图 网上找了在线美图秀秀,发现要钱,就顺便po解了一下,扣出素材 3.编 ...
- 用js制作一个新年倒计时
效果图 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&q ...
- 用 JavaScript 写一个新年倒计时
目录 前言: 主题: 运行结果: 对应素材: 代码实现思路: 运行代码: 春节的由来: 总结: 前言: 在春节即将到来,钟声即将响起,焰火即将燃起的日子里,本篇文章带着祝福先送去给你.愿你在新的一年里 ...
- 一文带你学会python新年倒计时
作者简介:一名在校计算机学生.每天分享Python的学习经验.和学习笔记. 座右铭:低头赶路,敬事如仪 个人主页:网络豆的主页 目录 前言 一.新年介绍 二.代码介绍 1.应用的技术 ...
最新文章
- android显示温湿度设计与实现,基于Android平台蝴蝶兰大棚温湿度测控系统的设计与实现...
- docker-compose常用命令
- [BZOJ1068/Luogu2470][SCOI2007]压缩
- 在VS.NET2003中无法新建C＃项
- TFOD：基于TFOD API的官方模型案例对图片进行目标检测
- linux如何挂载windows共享文件,linux如何挂载windows下的共享文件
- 适合STM32的三大嵌入式操作系统
- 第一节：从面向对象思想(oo)开发、接口、抽象类以及二者比较
- 简短—揭开数学学科对于计算机应用的神秘面纱
- ProcessStartInfo 例子
- 使用bat运行jar文件
- iOS底层探索之类的加载(一):read_images分析
- 2015农行软开笔试+面试小记
- 关于SGD的一些小笔记
- 请简述SSM框架整合思路。
- 13.荔枝派 zero(全志V3S)-gadget Mass Storage虚拟U盘
- 华硕关闭更新BIOS
- 指令能被计算机硬件理解并执行,计算机
- 【OI做题记录】【BZOJ】【Usaco2008 Mar】土地购买
- 一个简单的网站（适合课设）