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 相关文章推荐
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
JS画线(实例代码)
Nov 20 Javascript
jquery退出each循环的写法
Feb 26 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
JSONP原理及简单实现
Jun 08 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
基于JavaScript实现简单的轮播图
Mar 03 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php创建session的方法实例详解
2015/01/27 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
python word转pdf代码实例
2019/08/16 Python
详细分析Python垃圾回收机制
2020/07/01 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
python温度转换华氏温度实现代码
2020/12/06 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
什么是组件架构
2016/05/15 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
我的理想演讲稿
2014/04/30 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
捐助感谢信
2015/01/22 职场文书
佛光寺导游词
2015/02/10 职场文书
地球一小时活动总结
2015/02/27 职场文书
关于运动会的广播稿
2015/08/19 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
Python学习之迭代器详解
2022/04/01 Python