<!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. 微信小程序-自定义菜单导航（实现楼梯效果）

    设计初衷 在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant U ...

  2. IT6563替代芯片|DP转HDMI 2.0音视频讯号转换芯片|CS5263Capstpne

    IT6563替代芯片|CS 5263|4LAN DP转HDMI 2.0音视频讯号转换芯片IT6563是一款4LAN EDP转HDMI2.0 HDMI2.0转换器芯片.IT6563FN结合Display ...

  3. <数据结构>XDOJ326.网络延时

    问题与解答 问题描述 有N个网络节点,标记为1到N. 给定一个二维数组times[M][3],表示信号经过有向边的传递时间.times[i][3] = {u, v, w}, 其中u是源节点,v是目标节 ...

  4. 懂得三境界-使用dubbo时请求超过问题

    引子 刚才下班回家路上,无意中听到大街上放的歌,歌词有这么一句:"毡房外又有驼铃声声响起,我知道那一定不是你".这一句我似乎听懂了歌者的魂牵梦绕和绝望,如果在十年前我大概只能感受出 ...

  5. 编写Java程序，创建Dota游戏中的兵营类，兵营类有一个类成员变量count、一个实例变量name和另一个实例变量selfCount。

    返回本章节 返回作业目录 需求说明: 创建Dota游戏中的兵营类 兵营类有一个类成员变量count.一个实例变量name和另一个实例变量selfCount. count表示的是兵营已经创建士兵的总数: ...

  6. playwright--自动化（一）：快速上手

    Playwright为现代 Web 应用程序提供可靠的端到端测试. 在JavaScript 和 TypeScript.Python..NET和Java 中都可以使用 Playwright 本人选择py ...

  7. Ranger开源流水线docker化实践案例

    1.背景 开发部门决定在Apache Ranger开源社区贡献代码,目标是个人国内排名Top1,世界排名Top2,并且在已经成为Ranger项目的Committer情况下,争取成为Ranger项目的P ...

  8. ActiveMQ基础教程（三）：C#连接使用ActiveMQ消息队列

    接上一篇:ActiveMQ基础教程(二):安装与配置(单机与集群) 安装部署好集群环境:192.168.209.133:61616,192.168.209.134:61616,192.168.209. ...

  9. Jedis 基本使用

    引入 jedis 依赖: <!-- https://mvnrepository.com/artifact/redis.clients/jedis --> <!-- Dec 15, 2 ...

  10. Flask_响应（四）

    响应即视图函数的返回值,前面的例子的返回值都很简单,直接返回值.但是Flask Http协议的返回值中通常还会有以下几种不同的方式. 一.return元组 通过return一个元组构造响应信息. 语法 ...