原生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 相关文章推荐
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
vue cli升级webapck4总结
Apr 04 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
js实现幻灯片轮播图
Aug 14 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
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
python小技巧之批量抓取美女图片
2014/06/06 Python
python快速查找算法应用实例
2014/09/26 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Django中处理出错页面的方法
2015/07/15 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
使用python制作一个解压缩软件
2019/11/13 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Python绘制动态水球图过程详解
2020/06/03 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
华为慧通面试题
2012/09/11 面试题
2015年党风廉政建设工作总结
2015/04/09 职场文书
预备党员半年考察意见
2015/06/01 职场文书
退货证明模板
2015/06/23 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
什么是SOLID
2022/03/24 Javascript