js实现倒计时及时间对象


Posted in Javascript onNovember 15, 2016

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>h
<style>
#box {
 width: 100%;
 height: 400px;
 background: black;
 color: #fff;
 font-size:40px;
 line-height:400px;
 text-align:center;
}
</style>
<script>
window.onload = function(){
 var oBox = document.getElementById('box');
 var oDate = new Date();//获取当前时间;
 oDate.setFullYear(2016,11,31);//自动进位;
 oDate.setHours(0,0,0,0);

 function countDown(){
  //未来时间戳减去现在时间的时间戳;
  var ms = oDate.getTime() - new Date().getTime();

  //毫秒转换成秒
  var oSec = parseInt(ms/1000);

  //秒转换成天
  var oDay = parseInt(oSec/86400);

  //不到一天剩下的秒数;
  oSec%=86400;

  //转换成小时
  var oHour = parseInt(oSec/3600);

  //不到一小时剩下的秒数;
  oSec%=3600;

  //转换成分钟
  var oMin = parseInt(oSec/60);

  //不到一分钟剩下的秒数;
  oSec%=60;

  oBox.innerHTML = '距离2016年12月31日还有:'+oDay+'天'+oHour+'时'+oMin+'分'+oSec+'秒';
 } 
 countDown();
 setInterval(countDown,1000);
}
</script>
</head>

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

实现效果入下:

js实现倒计时及时间对象

时间戳: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(时,分,秒,毫秒);
  时间会自动进位;

大概整理的就这些,还有很多不足的地方,希望大家多提宝贵意见!互相学习!互相取经!

Javascript 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
浅谈js中对象的使用
Aug 11 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 #Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 #Javascript
js调用屏幕宽度的简单方法
Nov 14 #Javascript
jquery心形点赞关注效果的简单实现
Nov 14 #Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 #Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 #Javascript
Node.js中路径处理模块path详解
Nov 14 #Javascript
You might like
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
python实现计算倒数的方法
2015/07/11 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
python3 配置logging日志类的操作
2020/04/08 Python
python实现简单文件读写函数
2021/02/25 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
承办会议欢迎词
2014/01/17 职场文书
蓝颜请假条
2014/04/11 职场文书
中学教师师德承诺书
2014/05/23 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript