原生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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
js实现小星星游戏
Mar 23 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 用sock技术发送邮件的函数
2007/07/21 PHP
php之readdir函数用法实例
2014/11/13 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
JavaScript 参考教程
2006/12/29 Javascript
json简单介绍
2008/06/10 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
Django Highcharts制作图表
2016/08/27 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
应聘医药代表职位求职信
2013/10/21 职场文书
捐款倡议书范文
2014/02/02 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书