html倒计时工具

最新推荐文章于 2024-02-29 16:32:05 发布
最新推荐文章于 2024-02-29 16:32:05 发布
阅读量770 收藏 1
点赞数
分类专栏： just for fun computer

zz ：http://blog.chinaunix.net/uid-18962755-id-2808331.html


<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<head>
<title>CISCO@Chips Timer</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script language="JavaScript">
<!-- //
var startTime = new Date();
var EndTime=startTime.getTime()+(5*60*1000+5000);
function GetRTime(){
var NowTime = new Date();
var nMS =EndTime - NowTime.getTime();
//var nD =Math.floor(nMS/(1000 * 60 * 60 * 24));
var nH=Math.floor(nMS/(1000*60*60)) % 24;
var nM=Math.floor(nMS/(1000*60)) % 60;
var nS=Math.floor(nMS/1000) % 60;
 //document.getElementById("RemainD").innerHTML=nD;
 document.getElementById("RemainH").innerHTML=nH;
 document.getElementById("RemainM").innerHTML=nM;
 document.getElementById("RemainS").innerHTML=nS;
if(nMS>(5*60*1000-1000)&&nMS<=5*60*1000)
{
alert("Just 5 Minutes left!");
}
setTimeout("GetRTime()",1000);
}
window.οnlοad=GetRTime;
// -->
</script>
</head>
<body>
 <br> <br> <br>
<div style=font-size:50px>
<center>
<font color="red">
Mind Your Time
</font>
<center>
</div>
 <br> <br> <br>
<div style=font-size:200px>
<center>
<strong id="RemainH">xx</strong>:<strong id="RemainM">xx</strong>:<strong id="RemainS">XX</strong>
</center>
</div>
</body>
</html>

sxlwzl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单小程序倒计时器
11-21
1. html文件，可以本地运行，也可以部署服务器 2. 可以设置倒计时分钟数，最大60分钟 3. 计时结束可以循环播放音乐直到“取消音乐” 4. 可以在index.html文件中自己更换标题
html倒计时小工具
09-29
canvas绘制的炫酷倒计时工具，可以自定义倒计时分钟数。
（案例贴2） html+css 倒计时器
最新发布
XUYH6904的博客
02-29 564
欢迎大家使用这个计时器噢。
立秋倒计时指定时间内多次调用.html
08-01
js的一个简单应用，立秋倒计时： 指定时间内多次调用 setInterval("daojishi()",1000)//函数，刷新时间(函数外部调用) 指定时间内调用一次：应用于函数内部 setTimeout("daojishi()",1000)// 函数，刷新时间 倒计时停止： 清除计时器 （==与使用的计时器一 一 对应==） clearInterVal(计时器名称) claerTimeOut( 计时器名称) 以上四个函数使用时都要说明计时器名称，否则可能出现第一次以后停止倒计时没有效果
纯js倒计时
05-01
纯js倒计时，外观简洁，实用，可以设定日期倒计时，代码量少
元旦倒计时代码 html版
12-09
元旦倒计时代码 html版
HTML实例——发布会倒计时
liuzuoping的博客
12-26 477
上篇博文我们用HTML+CSS+JS实现了一个模拟日历 HTML实例——模拟日历 今天我们用HTML+CSS+JS来实现一个发布会倒计时的实例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> &...
简单的倒计时（html + css + javaScript)
Achen2282751920的博客
08-19 3370
这个页面包含一个输入日期的输入框、一个“开始倒计时”的按钮以及一个显示倒计时的元素。当用户点击按钮时，会通过JavaScript获取输入的日期，并开始一个定时器，每秒更新倒计时并随机改变颜色。当倒计时结束时，定时器会被清除，倒计时元素将显示"倒计时已结束"，颜色会恢复为黑色。希望这个示例能帮到你！
如何用html做计时器,如何用html做倒数计时器？
weixin_32905035的博客
06-18 952
的html代码：Countdown ClockDaysHoursMinutesSecondsCSS代码：#clockdiv{font-family: sans-serif;color: #fff;display: inline-block;font-weight: 100;text-align: center;font-size: 30px;}#clockdiv > div{padding:...
有趣的HTML实例（一） 倒计时
好好读书
02-06 7506
有趣的HTML实例（一） 倒计时，适用于多种情景，可塑性
倒计时大字语音提示工具
09-21
因为工作需要想找一个倒计时的软件，找了好多都不合适，只好自己开发了一个。 本工具操作简单有语音提示，适合论文答辩、演讲、演示等限时提示。 经实际使用效果非常好。
html5输入时间设置倒计时代码
11-10
html5输入时间设置倒计时代码 html5输入时间设置倒计时代码 html5输入时间设置倒计时代码 html5输入时间设置倒计时代码
html5 LED计时器_LED倒计时器样式特效
11-10
html5 LED计时器_LED倒计时器样式特效 html5 LED计时器_LED倒计时器样式特效 html5 LED计时器_LED倒计时器样式特效
html纯静态倒计时器 支持农历显示
01-01
html纯静态倒计时器，支持农历显示，精确到秒。可以手工输入到达时间。兼容IE，不兼容FF、GG等。
到计时器---可以手动输入一个时间，开始倒计时
04-11
一个简单的倒计时，可以自己定义倒计时的启示时间，有一个附加功能，输入的时候只容许输入数字，其它不容许输入。主要用到的是一个每隔1秒会被调用一次的方法。
基于html倒计时器.zip
06-11
基于html倒计时器.zip
使用 HTML、CSS 和 JS 的简单倒数计时器
热门推荐
努力是为了站在万人之中，成为别人的光
09-10 2万+
JavaScript 倒数计时器用于各种电子商务和建设中的网站，以使用户保持最新状态。我们在不同类型的电子商务网站上看到，在任何产品或优惠到达之前的某个时间开始倒计时。 在本文中，我使用简单的 JavaScript 代码创建了一个倒数计时器和你分享。 您可以观看它的现场演示以了解它是如何工作的。如果您知道如何创建数字时钟，那么创建这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后，在 JavaScript 代码的帮助下，从那个时间减去当前时间，减法每秒减少一次。 正如您在上图中所看到的，我在这
倒计时简单实现
亦念戈涯
11-09 906
简单倒计时实现
用html5写一个倒计时器
04-26
好的，下面是一个简单的html5倒计时器的代码： ```html <!DOCTYPE html> <html> <head> <title>倒计时器</title> <script type="text/javascript"> "use strict"; window.onload = function () { //设置截止时间为2021年1月1日 var endtime = new Date("2021/1/1 00:00:00"); //获取文本框元素 var days = document.getElementById("days"); var hours = document.getElementById("hours"); var minutes = document.getElementById("minutes"); var seconds = document.getElementById("seconds"); //更新倒计时 function updateCountdown() { var now = new Date(); var timeleft = endtime - now; var days_left = Math.floor(timeleft / (1000 * 60 * 60 * 24)); var hours_left = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes_left = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60)); var seconds_left = Math.floor((timeleft % (1000 * 60)) / 1000); days.innerHTML = days_left; hours.innerHTML = ("0" + hours_left).slice(-2); minutes.innerHTML = ("0" + minutes_left).slice(-2); seconds.innerHTML = ("0" + seconds_left).slice(-2); } //每秒钟更新倒计时 setInterval(updateCountdown, 1000); }; </script> </head> <body> <h1>倒计时器</h1> <p>距离2021年1月1日还剩:</p> <span id="days">--</span>天 <span id="hours">--</span>小时 <span id="minutes">--</span>分 <span id="seconds">--</span>秒 </body> </html> ``` 这个倒计时器可以根据设定的截止时间自动计算距离截止时间的时间差，并在界面上显示出来。具体实现方式是在页面加载时设定截止时间，然后通过`setInterval`函数每隔一秒更新一次倒计时。在`updateCountdown`函数中，首先根据当前时间和设定的截止时间计算出时间差，然后分别计算还剩多少天、小时、分钟和秒，最后将这些值更新到相应的文本框中即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值