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中eval函数的使用示例
Jul 21 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
JS面向对象编程详解
Mar 06 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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桌面中心(四) 数据显示
2007/03/11 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
在JavaScript中调用php程序
2009/03/09 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
js正则相关知识点专题
2018/05/10 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
python中__slots__用法实例
2015/06/04 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
统计员岗位职责
2013/11/14 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
人事任命书范文
2014/06/04 职场文书
运动员获奖感言
2014/08/15 职场文书
代理人委托书
2014/09/16 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书