使用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. js 微信分享

    一. //js接口 var shareme; var urls = window.location.href; if(isWeiXin()){   var weifileref=document.cr ...

  2. esayui-datagrid的使用

    第一步:在页面上引入easyui的jQuery链接 <script src="../../Scripts/easyUI/jquery-1.7.2.min.js" type=& ...

  3. 如何修改WAMP数据库上传文件的大小及上传时间限制

    一个文件如果几十兆的话,上传时可能出错,因为执行时间不够, 比如我遇到的ECshop的数据库文件就是 40多M 第一次执行失败. 所以索性一次性把所有东西都设置好.在php.ini(apache中的P ...

  4. python的 map，filter， reduce， enumerate

    一, map     #基本的map运用都可以用解析去替代,复杂的仍然需要定义函数,利用map去做 map(函数, 序列) 将序列的各项经过函数处理, 然后返回到一个新列表中. #itertools. ...

  5. Python TF-IDF计算100份文档关键词权重

    上一篇博文中,我们使用结巴分词对文档进行分词处理,但分词所得结果并不是每个词语都是有意义的(即该词对文档的内容贡献少),那么如何来判断词语对文档的重要度呢,这里介绍一种方法:TF-IDF. 一,TF- ...

  6. iOS学习笔记---c语言第九天

    高级指针 指向结构体变量的指针,称为结构体指针 可以使用->指向内容. %p打印地址 void pLenth(cPoint *p1,cPoint *p2) //求两点间的距离  用的开方函数sq ...

  7. MVC&WebForm对照学习：文件上传(以图片为例)

    原文  http://www.tuicool.com/articles/myM7fe 主题 HTMLMVC模式Asp.net 博客园::首页::  ::  ::  ::管理 5 Posts :: 0 ...

  8. 137. Single Number II

    Given an array of integers, every element appears three times except for one. Find that single one. ...

  9. 203. Remove Linked List Elements

    Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...

  10. jq中 offset()方法， scrollTop()方法以及scrollLeft()方法

    offset()方法是用来获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效. scrollTop()方法是用来获取元素的滚动条距离顶端的距离. scro ...