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 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
jquery 插件开发备注
Aug 27 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
javascript 代码是如何被压缩的示例代码
May 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP时间和日期函数详解
2015/05/08 PHP
php实现递归的三种基本方式
2020/07/04 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
tensorflow 模型权重导出实例
2020/01/24 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
教师师德教育的自我评价
2013/10/31 职场文书
大学生如何写自荐信
2014/01/08 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
体育比赛口号
2014/06/09 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
大学生自荐信范文
2015/03/05 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
《刷子李》教学反思
2016/02/20 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python