JavaScript实现前端倒计时效果

作者：L在前方时间：2024-06-05 09:34:10　

本文实例为大家分享了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>

来源：https://blog.csdn.net/qq_45828598/article/details/113727446

标签：js,倒计时

投稿

JavaScript实现前端倒计时效果

猜你喜欢

python扫描proxy并获取可用代理ip的实例

使用Selenium实现微博爬虫(预登录、展开全文、翻页)

MySQL分页分析原理及提高效率

关于python并发编程中的协程

window环境配置Mysql 5.7.21 windowx64.zip免安装版教程详解

Python flask sqlalchemy的简单使用及常用操作

vscode通过Remote SSH远程连接及离线配置的方法

Python爬虫信息输入及页面的切换方法

Python使用xlrd读取Excel格式文件的方法

pytorch GAN伪造手写体mnist数据集方式

Python同时处理多个异常的方法

浅谈Python中文件夹和python package包的区别

asp生成不需要数据库的中奖码

Python多线程与同步机制浅析

解决mysql8.0.19 winx64版本的安装问题

pytorch的batch normalize使用详解

SQL窗口函数之聚合窗口函数的使用(count,max,min,sum)

新版php study根目录下文件夹无法显示的图文解决方法

Oracle密码错误次数过多账号锁定的问题(推荐)

Python绘制股票移动均线的实例