使用JavaScript在网页中实现一个计算当年还剩多少时间的倒数计时程序，网页上能够实时动态显示“XX年还剩XX天XX时XX分XX秒”：

程序代码如下：

<meta charset="utf-8"/>

<html>

<body onload="counter()">

<div id="nowtime"></div>

<div id="yeartime"></div>

<div id="monthtime"></div>

<div id="daytime"></div>

<script type="text/javascript">

function  counter(){

//    求年剩余时间

   var date = new Date();

    document.getElementById("nowtime").innerHTML="当前时间是："+date;

   var year = date.getFullYear();//getFullYear()：从 Date 对象以四位数字返回年份。

    //创建Date对象的方法：

    //var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); //按照这个顺序哦！注意月份是0~11 ！！

   var date1 = new Date(year,12,31,23,59,59);

    //转换成秒

   var time1 = (date1 - date)/1000;

    //floor(x)     对 x 进行下舍入。

   var day = Math.floor(time1/(24*60*60));

   var hour = Math.floor(time1%(24*60*60)/(60*60));

    var minute = Math.floor(time1%(24*60*60)%(60*60)/60);

    var second = Math.floor(time1%(24*60*60)%(60*60)%60);

    document.getElementById("yeartime").innerHTML= year + "年还剩" +day +"天"+hour+"小时"+minute+"分"+second+"秒";

    t=setTimeout(function(){counter();},1000);

//求月剩余时间

    var month = date.getMonth()+1;//getMonth():从 Date 对象返回月份 (0 ~ 11)。所以当前月要加上1 !

    var date2 = new Date(year,month,30,23,59,59);

    //转换成秒

    var time2 = (date2 - date)/1000;

    //floor(x)     对 x 进行下舍入。

    var day2 = Math.floor(time2/(24*60*60)/2);  //此处天数的计算有所偏差......

    var hour2 = Math.floor(time2%(24*60*60)/(60*60));

    var minute2 = Math.floor(time2%(24*60*60)%(60*60)/60);

    var second2 = Math.floor(time2%(24*60*60)%(60*60)%60);

    document.getElementById("monthtime").innerHTML= year+"年"+month + "月还剩" +day2 +"天"+hour2+"小时"+minute2+"分"+second2+"秒";

//求当天剩余时间

    var todaydate=date.getDate();  //获取今天是几号

    var todayweek=date.getDay();  //获取今天是星期几，返回值是 0（周日） 到 6（周六） 之间的一个整数。

    document.getElementById("daytime").innerHTML="【今天】：(" +year+"年"+month + "月"+todaydate+"日 星期"+todayweek +"）   还剩"+hour2+"小时"+minute2+"分"+second2+"秒";

}

 //window.setInterval("counter()",1000);

</script>

</body>

</html>

结果截图如下：

完整代码参见github :

Github 地址：

https://github.com/shenxiaolinZERO/Resources/tree/master/Resources/TimeCounter

使用JavaScript实现一个倒数计时程序的更多相关文章

  1. 使用JavaScript定义一个微信小程序插件样例

    var wxTimer = new wxTimer({ beginTime: "00:00:20", complete: function () { wx.redirectTo({ ...

  2. js对Date对象的操作的问题(生成一个倒数7天的数组)

    今天在论坛上看到这样一个问题如下: 问题描述: 使用JavaScript生成一个倒数7天的数组.比如今天是10月1号,生成的数组是["9月25号","9月26号" ...

  3. 如何用原生js开发一个Chrome扩展程序

    原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...

  4. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  5. 【转载】ASP.NET MVC Web API 学习笔记---第一个Web API程序

    1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...

  6. ASP.NET MVC3入门教程之第一个WEB应用程序

    本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=91&extra=page%3D1 上一节,我们已经搭建好了AS ...

  7. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  8. 创建ArcGIS API for JavaScript的第一个示例程序

    原文:创建ArcGIS API for JavaScript的第一个示例程序 在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话 ...

  9. 4年前端、2年CTO：一个非科班程序员的真实奋斗史

    1.引言   我,Scott,一家创业公司的 CTO. 从业6年却很少写文章,近一年来接触了几十个刚毕业的前端新人,也面试了100多个前端工程师和Nodejs工程师,对于前端发展的这个职业算是有些感触 ...

随机推荐

  1. linux命令：cd

    1.介绍: cd可以说是linux下最基本的命令,全称是change directory. 2.命令格式: cd [DIRECTORY] 3.命令功能: 切换到指定目录 4.常用范例: 例一:切换到根 ...

  2. css 设置样式

    前台div <div id="DIV1" runat="server" > </div> 后台: this.DIV1.Style.Val ...

  3. magento additional & details 分解开来

    <?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html):?& ...

  4. 搬家后Magento前台只有产品的缩略图不显示

    第一种可能:缓存不足 http://blog.csdn.net/ddjohn/article/details/6648199 最近发现一个怪异的现象,Magento前台只有产品的缩略图不显示.我检查了 ...

  5. C语言----变量及作用域 、 指针 、 指针和数组 、 进程空间 、 字符串

    1 使用程序来模拟放球.取球的问题 1.1 问题 栈是一种特殊的线性表,它的逻辑结构和线性表相同,只是其运算规则较线性表有更多的限制,故又称为运算受限的线性表. 栈的定义是限制仅在表的一端进行插入和删 ...

  6. C++学习笔记2：关于开发

    一.简单的开发流程 (1)定义要被解决的问题: 明确定义待被解决问题,比如具体实现什么功能等. (2)设计解决问题的方法: 好方法的有哪些特点: 1.方法明确: 2.规范化:(已被验证过) 3.模块化 ...

  7. 添加mongodb支持

    最近花了些时间,将引擎的存储换成了mongodb. 私下,我觉得现有的存储机制极为落后.现在写数据的操作交由单独的进程完成,该进程兼当数据缓冲与持续化数据的责任.此次引擎的更换,只是简单的利用mong ...

  8. 织梦dedecms 用交叉栏目时arclist标签调用不出内容文章的问题(纯转载)

    本文转自:http://www.cnblogs.com/cnteam/articles/4056702.html 最近用了交叉栏目发现当为手动指定交叉栏目ID时用arclist标签不能调出相关文章最后 ...

  9. （实用篇）多个PHP中文字符串截取函数

    字符串截取是一个非常常见的编程任务,而往往带中文的字符串截取会经常用到.虽然不难,但是自己写函数实现又耗费时间,这里介绍一个比较好用的字符串截取函数,能够胜任基本的需求了 <?php funct ...

  10. xmind的第三天笔记