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源码]超长文章自动分页(客户端版)
Jan 09 Javascript
html数组字符串拼接的最快方法
Sep 16 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
javascript 快速排序函数代码
May 30 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
js弹出对话框方式小结
Nov 17 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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中http与https跨域共享session的解决方法
2014/12/20 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
webpack打包js的方法
2018/03/12 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
深入浅析Python的类
2018/06/22 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
党性观念心得体会
2014/09/03 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
初中家长评语大全
2014/12/26 职场文书
仰望星空观后感
2015/06/10 职场文书
律师催款函范文
2015/06/24 职场文书
大学生党课心得体会
2016/01/07 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
Python3的进程和线程你了解吗
2022/03/16 Python