<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

    .time-item {

      width: 430px;

      height: 45px;

      margin: 0 auto;

    }

    .time-item strong {

        background: orange;

        color: #fff;

        line-height: 49px;

        font-size: 36px;

        font-family: Arial;

        padding: 0 10px;

        margin-right: 10px;

        border-radius: 5px;

        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

    }

    .time-item > span {

        float: left;

        line-height: 49px;

        color: orange;

        font-size: 32px;

        margin: 0 10px;

        font-family: Arial, Helvetica, sans-serif;

    }

    .title {

      width: 260px;

      height: 50px;

      margin:200px auto 50px auto;

    }

  </style>

</head>

<body>

  <h1 class="title">距离光棍节，还有</h1>

  <div class="time-item">

    <span><span id="day">00</span>天</span>

    <strong><span id="hour">00</span>时</strong>

    <strong><span id="minute">00</span>分</strong>

    <strong><span id="second">00</span>秒</strong>

  </div>

  <script src="common.js"></script>

  <script>

    // 目标时间

    var endDate = new Date('2017-11-11 0:0:0');

    // 获取span

    var spanDay = my$('day');

    var spanHour = my$('hour');

    var spanMinute = my$('minute');

    var spanSecond = my$('second');

    setInterval(countdown, 1000);

    countdown();

    // 倒计时

    function countdown() {

      // 计算时间差

      // 当前时间

      var startDate = new Date();

      // 计算两个日期差

      var interval = getInterval(startDate, endDate);

      setInnerText(spanDay, interval.day);

      setInnerText(spanHour, interval.hour);

      setInnerText(spanMinute, interval.minute);

      setInnerText(spanSecond, interval.second);

    }

  </script>

</body>

</html>

common中的代码

function my$(id) {

  return document.getElementById(id);

}

// 处理浏览器兼容性

// 获取第一个子元素

function getFirstElementChild(element) {

    var node, nodes = element.childNodes, i = 0;

    while (node = nodes[i++]) {

        if (node.nodeType === 1) {

            return node;

        }

    }

    return null;

}

// 处理浏览器兼容性

// 获取下一个兄弟元素

 function getNextElementSibling(element) {

    var el = element;

    while (el = el.nextSibling) {

      if (el.nodeType === 1) {

          return el;

      }

    }

    return null;

  }

// 处理innerText和textContent的兼容性问题

// 设置标签之间的内容

function setInnerText(element, content) {

  // 判断当前浏览器是否支持 innerText

  if (typeof element.innerText === 'string') {

    element.innerText = content;

  } else {

    element.textContent = content;

  }

}

// 处理注册事件的兼容性问题

// eventName, 不带on，  click  mouseover  mouseout

function addEventListener(element, eventName, fn) {

  // 判断当前浏览器是否支持addEventListener 方法

  if (element.addEventListener) {

    element.addEventListener(eventName, fn);  // 第三个参数 默认是false

  } else if (element.attachEvent) {

    element.attachEvent('on' + eventName, fn);

  } else {

    // 相当于 element.onclick = fn;

    element['on' + eventName] = fn;

  }

}

// 处理移除事件的兼容性处理

function removeEventListener(element, eventName, fn) {

  if (element.removeEventListener) {

    element.removeEventListener(eventName, fn);

  } else if (element.detachEvent) {

    element.detachEvent('on' + eventName, fn);

  } else {

    element['on' + eventName] = null;

  }

}

// 获取页面滚动距离的浏览器兼容性问题

// 获取页面滚动出去的距离

function getScroll() {

  var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

  return {

    scrollLeft: scrollLeft,

    scrollTop: scrollTop

  }

}

// 获取鼠标在页面的位置，处理浏览器兼容性

function getPage(e) {

  var pageX = e.pageX || e.clientX + getScroll().scrollLeft;

  var pageY = e.pageY || e.clientY + getScroll().scrollTop;

  return {

    pageX: pageX,

    pageY: pageY

  }

}

//格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式

function formatDate(date) {

  // 判断参数date是否是日期对象

  // instanceof  instance 实例(对象)   of 的

  // console.log(date instanceof Date);

  if (!(date instanceof Date)) {

    console.error('date不是日期对象')

    return;

  }

  var year = date.getFullYear(),

      month = date.getMonth() + 1,

      day = date.getDate(),

      hour = date.getHours(),

      minute = date.getMinutes(),

      second = date.getSeconds();

  month = month < 10 ? '0' + month : month;

  day = day < 10 ? '0' + day : day;

  hour = hour < 10 ? '0' + hour : hour;

  minute = minute < 10 ? '0' + minute : minute;

  second = second < 10 ? '0' + second : second;

  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;

}

// 获取两个日期的时间差

function getInterval(start, end) {

  // 两个日期对象，相差的毫秒数

  var interval = end - start;

  // 求 相差的天数/小时数/分钟数/秒数

  var day, hour, minute, second;

  // 两个日期对象，相差的秒数

  // interval = interval / 1000;

  interval /= 1000;

  day = Math.round(interval / 60 / 60 / 24);

  hour = Math.round(interval / 60 / 60 % 24);

  minute = Math.round(interval / 60 % 60);

  second = Math.round(interval % 60);

  return {

    day: day,

    hour: hour,

    minute: minute,

    second: second

  }

}

bom-倒计时的更多相关文章

  1. Bom 基本使用以及定时器 倒计时案例

    BOM 是浏览器对象模型 它提供了独立内容而与浏览器窗口进行交互的对象,其核心对象是window 窗口加载事件 注意:window.onload 就可以吧JS代码写在页面元素的上方,因为onload是 ...

  2. BOM 点击触发 倒计时发送验证码案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. javascript中BOM部分基础知识总结

    一.什么是BOM      BOM(Browser Object Document)即浏览器对象模型.      BOM提供了独立于内容 而与浏览器窗口进行交互的对象:      由于BOM主要用于管 ...

  4. js中的Bom对象模型

    Bom可以对浏览器的窗口进行访问和操作.使用Bom,开发者可以移动窗口,改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. window对象: 1.窗口操作 其中moveTo,moveBy是窗 ...

  5. 浏览器对象模型BOM

    第二章 浏览器对象模型BOM 1.作用:操作窗口:提供导航对象:提供定位对象:浏览器上方的地址栏:提供跟屏幕相关对象:提供对Cookie的支持 2.根元素:window:代表整个窗口:window,o ...

  6. 从零开始学 Web 之 BOM（二）定时器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. JS BOM对象 History对象 Location对象

    一.BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作 window对象 所有浏览器都支持 window 对象. 概念上讲.一个html文档对应一个window对象. 功能上讲: 控 ...

  8. 有关BOM(Browser Object Model)的内容

    包括: BOM概述 BOM模型 Window对象(常用属性和方法,窗口的打开,窗口的关闭,模态对话框,定时器) Navigator对象(遍历navigator对象的所有属性,Navigator 对象集 ...

  9. JavaScript学习笔记之BOM对象

    目录 1.Window 2.Window Screen 3.Window Location 4.Window History 5.Window Navigator 浏览器对象模型(Browser Ob ...

  10. javascript系列-class8.BOM

    1.浏览器对象模型( browser object model )   什么是BOM?    提起BOM就不得不提起JavaScript的构成.ECMAScript为JavaScript的核心,但是要 ...

随机推荐

  1. C++异常处理（try catch throw）完全攻略

    程序运行时常会碰到一些异常情况,例如: 做除法的时候除数为 0: 用户输入年龄时输入了一个负数: 用 new 运算符动态分配空间时,空间不够导致无法分配: 访问数组元素时,下标越界:打开文件读取时,文 ...

  2. emqx的一个配置参数

    这个参数尝试改为internal后,所有用户都可以匿名登录

  3. 【java多线程】synchronized和volatile

    文章目录 一.synchronized 1.synchronized使用的方法 2.注意 3.不要以字符串作为锁的对象 4.`synchronized`锁的是什么? 二.volatile 1.引出问题 ...

  4. Spring @Valid 和 @Validated 的区别和使用

    两者区别 @Valid @Validated 标准 标准JSR-303规范 增强JSR-303规范 包 javax.validation org.springframework.validation ...

  5. centos6.5 搭建zabbix3.0

    一.搭建LAMP平台 注意zabbix3.0需要php5.4以上的版本 (1)安装依赖包 httpd和mysql安装过程省略 rpm -e httpd --nodeps yum -y install ...

  6. Spring cloud 框架 --- Eureka 心得

    spring boot      1.5.9.RELEASE spring cloud    Dalston.SR1 1.前言 (1)接触了spring cloud 框架 ,首先要知道Eureka是什 ...

  7. SQL高级优化（六）之MySQL索引

    一.索引概述 1. 索引的优点 ​ 为什么要创建索引?这是因为,创建索引可以大大提高系统的查询性能.如果不使用索引,查询时从第一行开始查询.如果使用了索引,所以就可以更加快速的找到希望的数据. 第一. ...

  8. Servlet初级学习加入数据库操作（一）

    需要的源代码地址: https://url56.ctfile.com/f/34653256-527822631-2e255a(访问密码:7567) 将页面中的数据逐步替换为数据库管理 准备一个连接数据 ...

  9. py3nvml实现GPU相关信息读取

    技术背景 随着模型运算量的增长和硬件技术的发展,使用GPU来完成各种任务的计算已经渐渐成为算法实现的主流手段.而对于运行期间的一些GPU的占用,比如每一步的显存使用率等诸如此类的信息,就需要一些比较细 ...

  10. Sentry 开发者贡献指南 - 配置 PyCharm

    概述 如果您使用 PyCharm 进行开发,则需要配置一些内容才能运行和调试. 本文档描述了一些对 sentry 开发有用的配置 配置 Python 解释器:(确保它是 venv 解释器)例如 ~/v ...