Javascript实现倒计时（计时器）

用js 实现倒计时功能，详细代码，及讲解如下

HTML代码：

<!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><link rel="stylesheet"href="index.css"></link>
</head>
<body><h1 align="center">纪念日</h1><div id="timdiv"><span id="hour" class="tim"></span><span id="minute" class="tim"></span><span id="second" class="tim"></span></div><script src="index.js"></script>
</body>
</html>

CSS代码：

*{padding: 0;margin: 0;
}
body{background-color: aquamarine;
}
.tim{background-color: aqua;font-size: 250px;color: rgb(237, 231, 231);
}
#timdiv{position: absolute;left: 275px
}
h1{font-size: 250px;
}

js代码：

var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');
var inputtime = +new Date('2022-6-21 18:00:00');//自定义的毫秒数
timer();//先调用一次，避免第一次的卡顿
setInterval(timer,1000);
function timer(){var nowtime = +new Date();//返回当前的总毫秒数var time = (inputtime - nowtime) / 1000 ;// 1秒=1000毫秒 剩余需要倒计时的总秒数var h = parseInt(time/60/60%24);var m = parseInt(time/60%60);var s = parseInt(time%60);h = h < 10 ? '0' + h : h;//如果小于10前面补零，大于10直接填写hour.innerHTML = h + ':';m = m < 10 ? '0' + m : m;//如果小于10前面补零，大于10直接填写minute.innerHTML = m + ':';s = s < 10 ? '0' + s : s;//如果小于10前面补零，大于10直接填写second.innerHTML = s;
}

Javascript实现倒计时（计时器）相关推荐

JavaScript 实现页面内时间实时倒计时计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数
JavaScript 实现页面内时间倒计时计时器可用于抢购倒计时,记录恋爱纪念日总时长等输出对应的天数小时分钟秒数注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制) 第一步:构 ...
jQuery实现倒计时计时器
本文转载自 jquery 做一个小的倒计时效果在实际运用中,经常会使用到倒计时的效果.以下代码利用jQuery实现了一个倒计时计时器. <!DOCTYPE html> <html& ...
使用 javaScript 编写倒计时小程序，到时提交表单
使用 javaScript 编写倒计时小程序,到时提交表单 <script type="text/javascript">var countdown = 10; // ...
Android课程设计倒计时app,999倒计时计时器课程设计.docx
倒计时计时器倒计时计时器的用途很广泛.它可以用做定时,控制被定时的电器的工作状态,实现定时开或者定时关,最长定时时间为 999 分钟.它还可以用做倒计时记数,最长记时时间为999 秒, 有三位数码 ...
Flutter学习之倒计时计时器
1.自定义倒计时计时器控件: import 'dart:async'; import 'package:flutter/material.dart';final TextStyle _availabl ...
【毕业设计】51-基于Multisim的篮球比赛24秒倒计时计时器的设计（仿真工程+相关芯片资料+答辩论文）
typora-root-url: ./ [毕业设计]51-基于Multisim的篮球比赛24秒倒计时计时器的设计(仿真工程+相关芯片资料+答辩论文) 文章目录 typora-root-url: ./ ...
C#上位机——倒计时计时器
C#工控上位机--倒计时计时器第一步:找出需要的工具第二步:对工具进行布局第三步:修改各个工具的属性 using System.Collections.Generic; using System ...
html广告倒计时代码,javascript实现倒计时关闭广告
用Javascript实现倒计时关闭广告案例正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教在很多app与网页中,我们可以看到这样的广告:进入某个网站后,会弹出一个广告,然后广 ...
利用JavaScript实现倒计时
利用JavaScript实现倒计时利用JS中的Date对象即可实现,创建目标时间和当前时间,利用getTime函数将两个时间转换成距离1970-01-01的秒数,相减后转化为年月日即可利用JS中的 ...
JavaScript 实现倒计时代码
以下是使用 JavaScript 实现页面动态倒计时的代码: 1. 定义一个 CountDown() 函数计算天.时.分.秒: 2. 使用 setInterval 对 CountDown() 函数 ...

Javascript实现倒计时（计时器）

Javascript实现倒计时（计时器）相关推荐

最新文章

热门文章