用Javascript实现倒计时效果，供大家参考，具体内容如下
正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教
在某些商城网站中，我们常常可以看见其网站或者app上有一个区域放的是倒计时，来用来提醒用户还有多少时间将会发生什么事情，下面我们用代码来对其进行实现
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
margin: 300px;
border: 1px solid pink;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: blue;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
var hours=document.querySelector('.hour')
var min=document.querySelector('.minute')
var sce=document.querySelector('.second')
var inputTime=+new Date('2021-2-8 16:40:00')
//countDown()//先1调用，防止第一次刷新有空白
//开启定时器,这是等了1000ms后才开启的定时器
setInterval(countDown,1)
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 "text-align: center">
时间一秒一秒得倒计时
代码解释：
这里我把三个行内元素span放在了块元素div里面，由于行内元素不能改宽高，所以都换成行内块元素。
这里因为倒计时要修改的地方是三个span盒子，分别对应这小时，分钟，秒数所以获取这三个span的事件。然后用inputTime这个变量来接收我们的目的时间。
然后创建一个countDown为名字的函数。函数里面用nowTime这个变量来接收当前的时间。因为接收到的时间是以毫秒为单位，所以用一个变量times来接收目的时间和现在时间的时间差，然后再除以1000，因为1s=1000ms，这里就得到了剩余的秒数。
用h表示剩余的小时一天=24小时，一个小时=60分钟，1分钟=60s。所以这里用总的秒数/60/60%24就得到了剩余的小时数。然后为了让样式更好看，我们把显示小数设置为两位，这里用的是三元运算符：小时小于10？如果小于就在前面+‘0'；如果大于10就只返回数字。并用h来进行接收，然后把h给hours这个盒子。下面的分钟和秒数都是一样的原理。
然后函数写好了，我们再用定时器来调用这个函数，间隔时间为1/1000ms。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。