1.倒计时效果

这是一段简单的倒计时代码，倒计时效果将基于此代码进行修改

<script>function getDaojishi(time) {var date = +new Date();//返回当前时间总毫秒数var now = +new Date(time);//返回用户输入时间总毫秒数var times = (now - date) / 1000;//剩余时间总秒数var t = parseInt(times / 60 / 60 / 24);//天t = t < 10 ? '0' + t : t;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;return t + '天' + h + '小时' + m + '分钟' + s + '秒'}var shijian = getDaojishi('2022-7-1 00:00:00');console.log(shijian);var dates = new Date();console.log(dates);</script>

2、京东倒计时效果

这是按照京东的倒计时效果进行的解析，代码可能会有点区别，大致原理如此：

<!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>* {padding: 0;margin: 0;}.box {position: relative;margin: 100px auto;width: 240px;height: 340px;padding-top: 51px;background-color: red;text-align: center;box-sizing: border-box;}.p1 {width: 240px;height: 70px;line-height: 70px;color: aliceblue;font-size: 40px;}.p2 {width: 240px;height: 40px;line-height: 40px;color: #ccc;font-size: 23px;}.p3 {width: 240px;height: 60px;line-height: 60px;font-size: 20px;color: #fff;}.p4 {width: 240px;height: 45px;line-height: 45px;font-size: 18px;color: #fff;}.times {width: 240px;height: 74px;text-align: center;}span {display: inline-block;margin-top: 12px;width: 50px;height: 50px;background-color: #000;margin-right: 5px;font-size: 30px;color: #fff;line-height: 50px;}</style>
</head><body><div class="box"><div class="'txt"><div class="p1">京东秒杀</div><div class="p2">FLASH DEALS</div><div class="p3">肖友无敌</div><div class="p4">本场距离结束还剩</div></div><div class="times"><span class="hours">1</span><span class="min">2</span><span class="second">3</span></div></div><script>var hours = document.querySelector('.hours')var min = document.querySelector('.min')var second = document.querySelector('.second')var now = +new Date('2022-7-1 00:00:00'); //返回用户输入时间总毫秒数getDaojishi(); // 我们先调用一次这个函数，防止第一次刷新页面有空白//  开启定时器setInterval(getDaojishi, 1000)function getDaojishi(time) {var date = +new Date(); //返回当前时间总毫秒数var times = (now - date) / 1000; //剩余时间总秒数var t = parseInt(times / 60 / 60 / 24); //天t = t < 10 ? '0' + t : t;var h = parseInt(times / 60 / 60 % 24); //小时h = h < 10 ? '0' + h : h;hours.innerHTML = h;var m = parseInt(times / 60 % 60); //分钟m = m < 10 ? '0' + m : m;min.innerHTML = m;var s = parseInt(times % 60); //秒s = s < 10 ? '0' + s : s;second.innerHTML = s;// return t + '天' + h + '小时' + m + '分钟' + s + '秒'}</script>
</body></html>

以上便是全部代码，原理是基于最开始的倒计时JS代码，然后用HTML和CSS加以修饰和调用！

如果有错误或者有能优化的地方，欢迎提出！

【倒计时】用JS写出京东倒计时效果相关推荐

网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]
图片效果 ↓(代码为粉图,生日歌自动播放) 视频效果 ↓(音乐为自动播放) 网页通过CSS写出生日倒计时(利用:日期倒计时.元素自动旋转.边框视觉按钮效果) 代码 ↓(可直接复制使用,音乐引用网易云音 ...
纯html5+css3能写出什么惊人效果
纯html5+css3能写出什么惊人效果? 在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video) 离 ...
JS写的随机数倒计时效果
JS写的倒计时效果过程: 1.随机生成4-10之间的随机数 2.随机数是几就从几开始倒计时 3.开始倒计时 4.到 0 时倒计时结束(或者点击也可以停止倒计时) 来康康效果图片吧这里我加了个数字小 ...
一个js写的桌面倒计时（请高手帮忙改一下）
这个Js写的倒计时是一个htm的网页可以附一张图片必须保证是同一路径下,这样就可以在桌面上显示了如下图: 那张图片就是桌面的背景可以更改,具体操作如下: 在桌面上点击右键->属性->桌面- ...
游戏里WASD移动控制人物的操作，用js写出的效果，简单易上手！
游戏里的人物控制需要通过上下键或者WASD键来控制人物的前进后退. 那么我们就来写一个这样的效果吧! 这个效果说简单也很简单无非就是通过按键来操作.code的按键操作. 接下来就上我们的效果图了. 样 ...
js 倒计时 php,JS如何实现分钟倒计时（十分钟倒计时实例）
工作中经常需要在页面中设置倒计时,那你知道JS如何实现分钟倒计时吗?这篇文章和大家分享一个JS十分钟倒计时代码,非常简单实用,感兴趣的朋友可以看看. 编写JS倒计时代码需要用到很多JavaScript ...
纯html5+css3能写出什么惊人效果?
在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video) 离线存储, 新的表单元素, 新的表单控件地理定 ...
JS案例-仿京东放大镜效果
需要实现的效果图如下: ①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个部分.左边的盒子里面放了一个img和一个遮罩层cover,右边盒子里面放的是800*800的大图片, ...
html抢购倒计时,基于JS实现限时抢购倒计时间表代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: 限时抢购倒计时间表 *{margin:0;padding:0;} #content{width:300px;margin:0 auto;paddi ...
用JS写出JS事件中京东图片放大特效
图片放大特效准备两张相同的图片,小图和大图. 小图显示在商品的展示区域. 大图用于鼠标在小图上移动时,按比例的显示大图中的对应区域. 编写HTML页面,展示小图.隐藏鼠标的遮罩及大图. 当鼠标在小图 ...

【倒计时】用JS写出京东倒计时效果

1.倒计时效果

2、京东倒计时效果

【倒计时】用JS写出京东倒计时效果相关推荐

最新文章

热门文章