原生js实现倒计时--2018


Posted in Javascript onFebruary 21, 2017

思路:

(1)获取日期对象、现在距离1970年的毫秒数、2018年距离1970年的毫秒数、2018年距离现在的总秒数;

(2)总秒数/86400,整数部分代表天;

(3)余数部分/3600,整数部分代表小时;

(4)余数部分/60,整数部分代表分钟;

效果如下:

原生js实现倒计时--2018

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin: 0;
   padding:0;
  }
  p {
   font-size: 95px;
   text-align: center;
  }
  p span {
   color: red;
  }
  p span.time {
   color: black
  }
 </style>
</head>
<body>
<p>距离2018年还有</p>
<p><span></span></p>
<script>
 var oSpan = document.getElementsByTagName('span')[0];
 function tow(n) {
  return n >= 0 && n < 10 ? '0' + n : '' + n;
 }
 function getDate() {
  var oDate = new Date();//获取现在日期对象
  var oldTime = oDate.getTime();//现在距离1970年的毫秒数
  var newDate = new Date('2018/1/1 00:00:00');//获取指定日期对象
  var newTime = newDate.getTime();//2018年距离1970年的毫秒数
  var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
  var day = Math.floor(second / 86400);//整数部分代表的是天;一天有24*60*60=86400秒 ;
  second = second % 86400;//余数代表剩下的秒数;
  var hour = Math.floor(second / 3600);//整数部分代表小时;
  second %= 3600; //余数代表 剩下的秒数;
  var minute = Math.floor(second / 60);
  second %= 60;
  var str = tow(day) + '<span class="time">天</span>'
    + tow(hour) + '<span class="time">小时</span>'
    + tow(minute) + '<span class="time">分钟</span>'
    + tow(second) + '<span class="time">秒</span>';
  oSpan.innerHTML = str;
 }
 getDate();
 setInterval(getDate, 1000);
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
原生JS轮播图插件
Feb 09 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
vue-router:嵌套路由的使用方法
Feb 21 #Javascript
JavaScript中创建对象的7种模式详解
Feb 21 #Javascript
vue-router路由简单案例介绍
Feb 21 #Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 #Javascript
微信小程序 UI与容器组件总结
Feb 21 #Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 #Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 #Javascript
You might like
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
web方式ftp
2006/10/09 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python 循环数据赋值实例
2019/12/02 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
新领导上任欢迎词
2014/01/13 职场文书
生产部管理制度
2014/01/31 职场文书
八一慰问活动方案
2014/02/07 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
Go timer如何调度
2021/06/09 Golang