js实现倒计时及时间对象

JS实现倒计时效果代码如下：

 1 <!doctype html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8">

 5 <title>无标题文档</title>h

 6 <style>

 7 #box {

 8     width: 100%;

 9     height: 400px;

10     background: black;

11     color: #fff;

12     font-size:40px;

13     line-height:400px;

14     text-align:center;

15 }

16 </style>

17 <script>

18 window.onload = function(){

19     var oBox = document.getElementById('box');

20     var oDate = new Date();//获取当前时间;

21     oDate.setFullYear(2016,11,31);//自动进位；

22     oDate.setHours(0,0,0,0);

23

24     function countDown(){

25         //未来时间戳减去现在时间的时间戳;

26         var ms = oDate.getTime() - new Date().getTime();

27

28         //毫秒转换成秒

29         var oSec = parseInt(ms/1000);

30

31         //秒转换成天

32         var oDay = parseInt(oSec/86400);

33

34         //不到一天剩下的秒数;

35         oSec%=86400;

36

37         //转换成小时

38         var oHour = parseInt(oSec/3600);

39

40         //不到一小时剩下的秒数;

41         oSec%=3600;

42

43         //转换成分钟

44         var oMin = parseInt(oSec/60);

45

46         //不到一分钟剩下的秒数;

47         oSec%=60;

48

49         oBox.innerHTML = '距离2016年12月31日还有:'+oDay+'天'+oHour+'时'+oMin+'分'+oSec+'秒';

50     }

51     countDown();

52     setInterval(countDown,1000);

53 }

54 </script>

55 </head>

56

57 <body>

58 <div id="box">距离2016年12月31日还有:xx天xx时xx分xx秒</div>

59 </body>

60 </html>

实现效果入下：

时间戳：1970年1月日至今的毫秒数:oDate.getTime(); //不要问我为什么是1970年1月至今哦！自个儿百度啦！ 
时间对象:
   获取时间:       var oDate = new Date();       oYear = oDate.getFullYear();       oMon = oDate.getMonth();       oDay = oDate.getDate();       oHou = oDate.getHours();       oMin = oDate.getMinutes();       oSec = oDate.getSeconds();       oWeek = oDate.getDay();        设置时间:       oDate.setFullYear(年,月,日);       oDate.setMonth(月);       oDate.setDate(日);       oDate.setHours(时,分,秒,毫秒);       时间会自动进位;
这是一个小效果，如果有不对的是地方，互相交流；

js-------》(小效果)实现倒计时及时间对象的更多相关文章

  1. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  2. 【JS小技巧】JavaScript 函数用作对象的隐藏问题

    用户反馈 @消失的键盘 在论坛反馈了一个问题,在 AppBoxMvc 中的 Title 模型中,如果将 Name 属性改名为小写的 name 属性,就会报错: 因为这是一个 ASP.NET MVC 的 ...

  3. 【JS小技巧】JavaScript 函数用作对象的隐藏问题（F.ui.name）

    用户反馈 @消失的键盘 在论坛反馈了一个问题,在 AppBoxMvc 中的 Title 模型中,如果将 Name 属性改名为小写的 name 属性,就会报错: 因为这是一个 ASP.NET MVC 的 ...

  4. js小效果-轮播图

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  5. js小效果：返回顶部 scrollTop 。 滚屏：animate

    返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...

  6. JS小知识--获取当前日期的时间和上周五时间

    获取当前日期的时间和上周五时间 var today=new Date();//获取当前时间var weekday=today.getDay();//获取星期几    var monday=new Da ...

  7. js小效果-全选

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  8. js小效果-简易计算器

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. js小效果-双色球

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

随机推荐

  1. Java JDBC 驱动 MySQL

    MySQL: 1>下载地址:http://www.mysql.com/products/connector/ 2> //jdbc:[数据库类型]://[ip地址]:[端口号]/[数据库名] ...

  2. 网络统计学与web前端开发基础技术

    网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...

  3. C/C++ 调用qsort/sort 对字符数组排序的cmp函数写法

    这个问题屡次碰到解决之后再次遇到又忘记怎么弄了,这次打算彻底搞清楚. ·C 首先对所谓字符数组的排序应该是对(char)*a[]数组而非(char)a[][]进行的排序,后者是无法直接调用qsort实 ...

  4. Acdream Chinese Girls' Amusement

    A - Chinese Girls' Amusement Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Jav ...

  5. php 修改、增加xml结点属性的实现代码

    php修改xml结点属性,增加xml结点属性的代码,有需要的朋友可以参考下 php 修改 增加xml结点属性的代码,供大家学习参考.php修改xml结点属性,增加xml结点属性的代码,有需要的朋友,参 ...

  6. Ios中时间无法响应

    今天,开发过程中发现有个button,出现一个很奇怪的现象,只能部分响应事件.多方询问,搜索之后,使用各种方案进行解决,都不好使. 通过将父级视图给增加底色,发现那个按钮部分已经在父级视图之外了.将按 ...

  7. SD卡驱动分析(二)

    三．下面分析一下高通的android2.3的代码中SD卡驱动的流程. 在kernel中,SD卡是作为平台设备加入到内核中去的,在/kernel/arch/arm/mach-msm/devices-ms ...

  8. C#中关键字ref修饰类对象或结构体[转]

    using System; using System.Collections.Generic; using System.Text; namespace CSharpTest { struct Dog ...

  9. STREAM Benchmark

    STREAM Benchmark及其操作性能分析 文/raywill STREAM 是业界广为流行的综合性内存带宽实际性能 测量 工具之一.随着处理器处理核心数量的增多,内存带宽对于提升整个系统性能越 ...

  10. 【转载】.NET面试题系列[0] - 写在前面

    原文:.NET面试题系列[0] - 写在前面 索引: .NET框架基础知识[1] - .NET框架基础知识(1) http://www.cnblogs.com/haoyifei/p/5643689.h ...