原生JS 实现日期倒计时效果

每逢佳节倍思亲

时间滴答滴答的逝去

离团聚的日子又近了一点

写一个简单的倒计时效果

让我们的团聚在一点点看见中来临

思路：

1.首先获取当前时间

2.获取所需时间

2.获取时间差（所需时间减去当前时间）

4.计算剩余时间天数小时数分钟数秒数毫秒数

5.时间不能是负数判定一下即可

代码如下：

<!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><style>#countdown {width: 680px;font-size: 80px;margin: 80px auto;text-shadow: 16px 10px 5px rgba(187, 65, 187, 0.678),5px 4px 6px rgba(215, 106, 82, 0.847), 2px 2px 2px rgb(118, 244, 9);font-family: 楷体;}</style></head><body><h2>距离中秋节还有：</h2><div id="countdown">XX天 XX时 XX分 XX秒 XXX</div><script>// window.onload ：等待网页中所有标签加载完成后，再执行事件中的代码// 网页加载事件：保障代码运行时，网页标签已经加载完成window.onload = function () {var _countdown = document.getElementById("countdown");var _time;// 倒计时函数function countDownFn() {// 获取当前时间var date = new Date();// 获取中秋时间var tgt = new Date("2022-09-10 00:00:00");// 获取时间差var distance = tgt - date;if (distance <= 0) {alert("目标时间不能小于当前时间");clearInterval(_time);return;}console.log(distance, "时间差");// 计算剩余时间var d = Math.floor(distance / (1000 * 60 * 60 * 24));var h = Math.floor((distance / (1000 * 60 * 60)) % 24);var m = Math.floor((distance / (1000 * 60)) % 60);var ms = distance % 1000;var time =d.toString().padStart(2, "0") +"天" +h.toString().padStart(2, "0") +"时" +m.toString().padStart(2, "0") +"分" +ms.toString().padStart(3, "0");_countdown.innerText = time;}_time = setInterval(function () {countDownFn();}, 80);};</script></body>
</html>

网页显示内容如下：

原生JS 实现日期倒计时效果相关推荐

vue+element UI＋原生JS实现日期倒计时
直接来代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
Html+Css+js实现春节倒计时效果（移动端和PC端）
目录前言导语效果预览 html部分移动端样式(mobile.css) pc端样式(style.css) js部分效果演示移动端 pc端总结下载地址前言我是歌谣我有个兄弟巅峰的时 ...
html时间选择器时分秒,原生js日历日期控件带时分秒日期选择器
特效描述:原生js日历日期时分秒日期选择器.时分秒日期选择代码结构 1. 引入JS 2. HTML代码 [注意事项] 一.请千万勿移动laydate中的目录结构,它们具有完整的依赖体系.使用时,只 ...
原生js实现日期选择器插件简单风格日期选择插件
原生js实现日期选择插件 xs-DatePicker ** 效果图 ** ** 简介通过原生HTML/CSS/JavaScript完成一个日期选择器. 代码如下: ** <!-- 时间:202 ...
html+js实现日期倒计时
html+js实现日期倒计时 <!DOCTYPE html> <html><head><meta charset="utf-8">& ...
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
react中react-custom-scrollbars返回顶部功能，如何使其有平滑动画效果；原生js scroll平滑动画效果
1.Scrollbars是react-custom-scrollbars插件暴露出来的组件 scrollRef.current.view.scroll({top: 0,left: 0,behavior ...
原生JS实现简单放大镜效果
[前言] 本文介绍下原生JS实现简单图片放大镜效果 [主体] 时间问题,直接上源码 <!DOCTYPE html> <html> <head><meta ch ...

原生JS 实现日期倒计时效果

原生JS 实现日期倒计时效果相关推荐

最新文章

热门文章