<!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. uniapp云打包之后华为手机推送角标不显示（有推送没角标）

    小米手机上有角标,华为和OPPO没有角标 解决方法: 华为手机添加权限(可通过反编译或者离线打包添加) < uses - permission android:name="com.hu ...

  2. sping练习，在Eclipse搭建的Spring开发环境中，使用工厂方式创建Bean对象，将创建的Bean对象输出到控制台。

    相关 知识 >>> 相关 练习 >>> 实现要求: 在Eclipse搭建的Spring开发环境中,使用工厂方式创建Bean对象,将创建的Bean对象输出到控制台.要 ...

  3. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  4. .net Core WebApi使用AutoFac

    1.在要添加的项目中选中 依赖项->右键->管理NuGet程序包(N) 2.在NuGet包管理器中输入Autofac,安装选中文件 3.在项目中找到Program.cs文件,添加如下代码 ...

  5. Ditto剪贴板增强工具

    1.简介 Ditto是一款强大的Windows剪贴板增强工具,它支持64位操作系统,而且完全免费,绿色开源,支持中文,而且还有免安装的绿色版本. 开启Ditto后,不会有任何程序界面出现,它只是默默地 ...

  6. 关于一类容斥原理设计 dp 状态的探讨

    写在前面 为什么要写?因为自己学不明白希望日后能掌握. 大体思路大概是 设计一个容斥的方案,并使其贡献可以便于计算. 得出 dp 状态,然后优化以得出答案. 下列所有类似 \([l,r]\) 这样的都 ...

  7. Swoole 中使用 Atomic 实现进程间无锁计数器

    使用示例: $atomic = new Swoole\Atomic(); $serv = new Swoole\Server('127.0.0.1', '9501'); $serv->set([ ...

  8. unittest+ddt_实现数据驱动测试（7）

    我们设计测试用例时,会出现测试步骤一样,只是其中的测试数据有变化的情况,比如测试登录时的账号密码.这个时候,如果我们依然使用一条case一个方法的话,会出现大量的代码冗余,而且效率也会大大降低.此时, ...

  9. 苹果系统 的 qq浏览器 和 qq内置浏览器 无法使用 websocket 的 妥协方案

    没错,就是用不了,js脚本不执行,更别说服务器运行 onopen函数了!!! 怎么办...搞了一天,仍然找不到连接的方法!!! 幸运的是仅仅苹果系统 的无法使用 ,安卓的却可以,奇了怪了 哈皮 ,那我 ...

  10. Java反射详解：入门+使用+原理+应用场景

    反射非常强大和有用,现在市面上绝大部分框架(spring.mybatis.rocketmq等等)中都有反射的影子,反射机制在框架设计中占有举足轻重的作用. 所以,在你Java进阶的道路上,你需要掌握好 ...