<!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. CS5216PIN TO PIN替换PS8402A方案|PS8402A电路设计原理图|CS5216芯片

    PS8402A是HDMI 电平移位器/中继器专为2型双模Display Port(DP++)电缆适配器应用而设计.它设计用于Display Port到DVI或Display Port到HDMI的2型适 ...

  2. Spring企业级程序设计 • 【第4章 Spring持久化层和事务管理】

    全部章节   >>>> 本章目录 4.1 配置数据源资源 4.1.1 JdbcTemplate介绍 4.1.2通过ComboPooledDataSource创建数据源 4.1. ...

  3. 《手把手教你》系列技巧篇（五十四）-java+ selenium自动化测试-上传文件-中篇（详细教程）

    1.简介 在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等.所以宏哥打算按上传文件的分类对其进行一下讲解和分享. 2.为什么selenium没有提供 ...

  4. html基础 表单标签 input系列 以及优化方法

    场景:在网页中显示手机用户信息的表单效果. 如:登录页.注册页标签名:input 用法是通过改变type属性值,来展示不同效果 1.1 html 代码 <!--placeholder 提示符又叫 ...

  5. Nginx-正反向代理及负载均衡

    目录 正/反向代理 代理的方式 Nginx代理服务支持的协议 代理实战 部署web01 部署Lb01 Nginx代理常用参数 添加发往后端服务器的请求头信息 代理到后端的TCP连接.响应.返回等超时时 ...

  6. CentOS 7 如何清空文件内容

    https://www.cnblogs.com/zqifa/p/linux-vim-4.html 方法1.在非编辑状态下使用快捷键gg跳至首行头部,再使用dG即可清空,或 输入"%d&quo ...

  7. KMP算法解题模板（更新）

    /* kmp算法的主要作用在于对next数组的运用,所以这里只给出next数组的模板 性质1:对于每一个长度len的子串,该子串的最小循环节为len-next[len] 性质2:kmp的next不断向 ...

  8. 【Java】重载与重写

    重载与重写 一.重载 定义 在同一个类中,允许存在一个以上的同名方法,只要它们的参数个数或者参数类型不同即可.同一个类.相同方法名,参数列表不同:参数个数不同,参数类型不同. Java的重载是可以包括 ...

  9. 嵌入式学习第四步—C语言学习用软件安装

    学习一门计算机语言,不能光靠看书,最主要的是要动手联系.不记得从哪里看到过,要成为一名网络大牛,要有10万行以上的程序才是基础. 首先需要一个能够编辑程序的地方(IDE),经过大约10天的网上看各种视 ...

  10. day1 三位数各个位上的数字和

    int main(){ int x = 0; scanf("%d", &x); if (x > 999 || x < 0) { printf("输入错 ...