原生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 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jquery 模板的应用示例
Nov 12 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
webpack的pitching loader详解
Sep 23 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
PHP 远程关机实现代码
2009/11/10 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python内存读写操作示例
2018/07/18 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python3实现绘制二维点图
2019/12/04 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
全球精选男装和家居用品:Article
2020/04/13 全球购物
上班离岗检讨书
2014/01/27 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技