JavaScript实现前端倒计时效果
更新时间：2021年02月09日 09:43:42 作者：L在前方
这篇文章主要为大家详细介绍了JavaScript实现前端倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现前端倒计时效果的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
padding: 10px;
font-size: 100px;
}
p {
float: left;
width: 300px;
height: 300px;
border: 1px solid #000000;
color: #ffffff;
background-color: #333333;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div>
<p class="hour">1</p>
<p class="minute">2</p>
<p class="second">3</p>
</div>
<script>
window.addEventListener('load', function() {
//获取元素
var hour = document.querySelector('.hour'); //小时的黑盒子
var minute = document.querySelector('.minute'); //分钟的黑色盒子
var second = document.querySelector('.second'); //秒数的黑色盒子
var inputTime = +new Date('2021-2-6 18:00:00'); //返回的是用户输入时间总的毫秒数
countDown(); //先调用一次这个函数，防止第一次刷新页面有空白
//开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); //返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //tiems是剩余时间总的毫秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; //把剩余的小时给小时黑盒子
var m = parseInt(times / 60 % 60); //分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); //当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
})
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript判断变量是对象还是数组的方法,本文分别使用instanceof和typeof实现,需要的朋友可以参考下2014-08-08
为了解决VSCode扩展i18nAlly在不同项目中无法正确找到翻译文件路径的问题,推荐在项目根目录下的.vscode目录中编辑settings.json文件进行配置,需要的朋友可以参考下2024-11-11
本篇文章通过实例给大家分享了layui实现动态和静态分页的详细方法，以及效果展示，有需要的朋友可以跟着参考学习下。2018-04-04
javascript中数组（Array)对象和字符串（String)对象的常用方法总结
这篇文章主要介绍了javascript中数组（Array)对象和字符串（String)对象的常用方法,结合实例形式总结分析了javascript中关于数组和字符串的常用函数与使用技巧,需要的朋友可以参考下2016-12-12
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
下面小编就为大家带来一篇js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了解决JavaScript中0.1+0.2不等于0.3问题,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了javascript+canvas制作九宫格小程序，效果非常棒，这里推荐给有需要的小伙伴们2014-12-12
使用Asp.net+Javascript控制的日期控件，需要的朋友可以参考下。2010-05-05
本文主要介绍了Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法。具有一定的参考价值，下面跟着小编一起来看下吧2016-12-12
这篇文章主要为大家介绍了uni-app的iPhonex底部安全区域解决方案示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最新评论