<!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 } }