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-------》(小效果)实现倒计时及时间对象的更多相关文章
- js实现倒计时及时间对象
JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...
- 【JS小技巧】JavaScript 函数用作对象的隐藏问题
用户反馈 @消失的键盘 在论坛反馈了一个问题,在 AppBoxMvc 中的 Title 模型中,如果将 Name 属性改名为小写的 name 属性,就会报错: 因为这是一个 ASP.NET MVC 的 ...
- 【JS小技巧】JavaScript 函数用作对象的隐藏问题(F.ui.name)
用户反馈 @消失的键盘 在论坛反馈了一个问题,在 AppBoxMvc 中的 Title 模型中,如果将 Name 属性改名为小写的 name 属性,就会报错: 因为这是一个 ASP.NET MVC 的 ...
- js小效果-轮播图
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- js小效果:返回顶部 scrollTop 。 滚屏:animate
返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...
- JS小知识--获取当前日期的时间和上周五时间
获取当前日期的时间和上周五时间 var today=new Date();//获取当前时间var weekday=today.getDay();//获取星期几 var monday=new Da ...
- js小效果-全选
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- js小效果-简易计算器
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- js小效果-双色球
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
随机推荐
- 获取手机IMEI 号和 IP
没什么可说的,直接上代码: public class PhoneStateCodeUtils { /** * 获取手机imei串号 */ public static String getImei(Co ...
- getElementByClassName()不兼容的解决办法
在获取元素时候采用getElementByClassName()方法是比较方便的,但是对于IE6不兼容,可以采用以下代码来自定义这个方法: window.onload=function(){ if(! ...
- JavaScript DOM 编程艺术(第2版)读书笔记(3)
DOM DOM:文档对象模型: 节点 元素节点:DOM的原子是元素节点.<body>.<p>.<ul>之类的元素.元素可以包含其他的元素.没有被包含在其他元素里的唯 ...
- POJ 2406:Power Strings
Power Strings Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 41252 Accepted: 17152 D ...
- javaScript判断鼠标滚轮的上下滚动
分享一个js实现判断鼠标滚轮的上下滚动: <script type="text/javascript"> var scrollFunc = function (e) { ...
- Java爬虫工程师技能列表
以下仅仅是自己一些粗浅认识.欢迎补充指正.欢迎进群交流! 掌握一半便能够熟练的开发爬虫玩了.自己正在努力中... 一.技能列表 1.掌握java.尤其编程网络部分:李刚的java基础至少看了三遍以上: ...
- mfc控件学习
0.所有控件 软件启动自动被选中:属性中的tabstop改为true或者false 1.Button 动态设置button的字:btn.SetWindowTextW(_T("我不是一个按钮 ...
- Duilib 鼠标在某控件例如按钮上悬停后,对目标控件操作
其实对WM_MOUSEHOVER消息的处理,因为WindowImplBase基类中对此消息未处理,所以在自己的窗口类中实现: .h文件中加入 LRESULT OnMouseHover( UINT uM ...
- Objective C 基础
1,字符串加@: 不加@的是C语言字符串. 加@的代表的是OC的NSString http://www.jikexueyuan.com/course/71_2.html 2,setValuesForK ...
- SQL数据库约束行为---防止数据完全重复
防止同一条数据完全重复: 一.主关键字约束:主键约束.1.能够唯一的区分每一行数据.——不许重2.表中的数据按照主键字排序的.——有序3.主键字不能为空——不为空4.一个表只能有一个主键,但可以设置组 ...