Javascript实现日期时间的倒计时

最新推荐文章于 2021-06-05 03:05:13 发布
最新推荐文章于 2021-06-05 03:05:13 发布
阅读量954 收藏
点赞数
分类专栏： Javascript 文章标签： javascript date border 2010 function div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huotu/article/details/5265633
版权

<html>
<body>

<SCRIPT type="text/javascript">
<!--
var target=[]
var time_id=[]
function ShowDateTime(){
    setTimeout("ShowDateTime()", 1000);

for (var i=0,j=target.length;i<j;i++)
{
    var today=new Date();
    timeold=target[i]-today.getTime();   //共多少毫秒
    msPerDay=24*60*60*1000;              //一天有多少毫秒
    e_daysold=timeold/msPerDay;
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=Math.floor(e_hrsold);
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=Math.floor((e_hrsold-hrsold)*60);
    seconds=Math.floor((e_minsold-minsold)*60);
    if (daysold<0)
    {
        document.getElementById(time_id[i]).innerHTML="逾期,倒计时已经失效";
    } 
    else
    {
        if (daysold<10) {daysold="0"+daysold}
        if (hrsold<10) {hrsold="0"+hrsold}
        if (minsold<10) {minsold="0"+minsold}
        if (seconds<10) {seconds="0"+seconds}

        if (daysold<3) {
            document.getElementById(time_id[i]).innerHTML="<font color=red>"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</font>";
        } 
        else {
            document.getElementById(time_id[i]).innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
        }
     }
  }
}
setTimeout("ShowDateTime()", 1000);
//-->
</SCRIPT>

第一期 (2010.02.01-2010.02.7)：
<div id="TimeCounter_3" style="border:1px solid black;margin:5px;padding:2px;width:160px"></div>
<SCRIPT>
   target[target.length]=new Date(2010,1,7,0,0,0).getTime();   //月年是从0开始的,也就是说一月份是0,二月份是1,如此类推,十二月份是11
   time_id[time_id.length]="TimeCounter_3";
</SCRIPT>

</body>
</html>

huotu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js计算距离生日天数
走向CTO的路上...
07-05 659
实现一个效果，在页面上显示当前日期年月日(格式: 2023年07月04日),和 距离你过生日还有多长时间，精确到天、时、分、秒（注：生日倒计时要实时变化）
javaScript实现倒计时功能
热门推荐
qq_65715980的博客
07-08 1万+
目录一、主要思路二、css样式三、html代码四、js内容五、完整代码展示六、效果展示1.通过内置时间函数实例化日期对象获取当前时间 new Date。2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式。3.最后把所获得的内容赋值给定义的变量。主要为了内容在页面展示美观，稍微美化一下。 三、html代码 定义一个默认格式为JavaScript引入定义变量。 四、js内容 1.首先获取html里面的spans里的全部标签
如何用js实现日期天数、时分秒的倒计时
西门吹雪
11-24 1万+
js实现天数倒计时 在用js实现倒计时的时候，可以先算出截止日期和今天之间相差的毫秒数，然后进行相应的比例进行day、 month 、hour、minute、second的计算，便可以准确的计算出相差的时间。 倒计时格式为：纯天数倒计时 function CountDown(year, month, day, hours) { let now = new Date(); let endDate = new Date(year, month - 1, day, hours);
javascript 计算年龄跟生日倒计时（精确）
11-20
根据您的生日来计算年龄跟生日倒计时。此代码可以改成其他的倒计时。希望大家会喜欢
js实现 日期倒计时.
Coinker的博客
02-06 2375
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" &gt; &lt;title&gt;JS实现倒计时(天数,时,分,秒)&lt;/title&gt; &lt;script language="javascript" type="text/ja
javascript 实现网页 倒计时 代码
01-08
在JavaScript中实现网页倒计时是一项常见的任务，尤其在创建活动页面、竞赛倒计时或者定时发布内容等场景中非常实用。本篇文章将详细介绍如何利用JavaScript编写一个网页倒计时功能，并结合提供的`index.html`和`js`...
Javascript实现时间倒计时效果
01-19
本文实例为大家分享了js实现时间倒计时展示的具体代码，供大家参考，具体内容如下 这里使用的是Date日期类 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>日期类倒...
JavaScript实现倒计时
12-14
总结，JavaScript实现倒计时主要涉及以下几个步骤：获取起始和结束时间，计算时间差，定期更新界面，以及结合HTML和CSS进行样式设计。这个过程不仅加深了对JavaScript时间处理的理解，也展示了JavaScript在动态网页...
Javascript实现时间倒计时功能
01-19
本文实例为大家分享了js实现时间倒计时的具体代码，供大家参考，具体内容如下 这里使用的是Date日期类 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>日期类倒计时&...
js设置日期倒计时代码
06-24
本文将详细讲解如何使用JavaScript来实现一个自定义日期时间的倒计时代码。 首先，我们需要理解JavaScript中的Date对象。Date对象是JavaScript内置的，用于处理日期和时间。我们可以创建一个新的Date对象，传入一个...
JavaScript利用Date实现简单的倒计时实例
11-30
介绍 Date对象，是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。Date在js中和Array类似，都是拥有自己的特殊方法的特殊对象。 创建 Date 对象的语法： var myDate=new Date() //Date 对象会自动把当前日期和时间保存为其初始值。 获取倒计时之前，我们不妨先来看怎样获取当前时间吧！！！ function time(){ var oDate = new Date(); var year = oDate.getFullYear(); var month = oDate.getMonth() + 1 ; var dDat
javascript实现倒计时（精确到秒）
10-24
本文给大家分享的是个人项目中使用的javascript实现的精确到秒级的倒计时代码，十分的实用，有需要的小伙伴可以参考下。
生日倒计时炫酷源码html,JS响应式生日倒计时
weixin_42118161的博客
06-05 1210
HtmlCssJs距离亲爱的生日到来还有：天时分秒/*Base Reset CSS*/* {margin:0;padding:0;}html,body {height:100%;}body {font-family:"Microsoft Yahei";background:url(https://timgsa.baidu.com/timg?image&quality=80&size...
javascript实现简单的时间倒计时
骑驴看戏的博客
12-27 721
Document 5 var c=5 var t function timedCount() { c=c-1 if(c != 0){ t=setTimeout("timedCount()",1000) } document.getElementById('time').innerHTML=c } /** * C的初始值为5 * 当onclick="timedCo
javascript时钟倒计时，代码可用
tony19890820的专栏
06-13 556
我现在在公司，用到的倒计时都是基于现在这个代码的原理来写的       function delayURL(url1) {  var delay=document.getElementById("time").innerHTML;  if(delay>0){  delay--;  document.getElementById("time").innerHTML
Javascript实现倒计时和根据某时间开始计算时间
Marhal的博客
03-07 2166
1、根据某时间计算经过了多长时间 JavaScript 代码 <script type="text/javascript"> var time_start = new Date('2018','7','15');//开始时间，注意！！！如果从8月15开始，月份就是7月15 var clock_start = time_start.getTime(...
JS实现当前时间到指定日期倒计时
qq_44075557的博客
11-16 3061
<script type="text/javascript"> function showTime(){ //设置2020年春节时间 var newyear=new Date('1 25 2020'); //获取当前时间 var date1=new Date(); //两个日期对象直接相减就能获取两个日期相差的时间戳(以毫秒计，也就是能得出相差多少毫秒...
使用JavaScript实现倒计时功能。
最新发布
06-06
以下是使用 JavaScript 实现倒计时功能的示例代码： ```html <!DOCTYPE html> 倒计时示例 <h1 id="countdown"></h1> // 目标日期 var targetDate = new Date("2022-01-01T00:00:00Z"); // 更新倒计时...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值