定时器
在js中定时器有两种关闭计时器小时钟秒表倒计时在js中定时器有两种
1、setInterval()
格式：var 变量名 = setInterval(“执行的语句”,每隔多久执行一次);
【注意】可以写执行的代码，也可以直接传入函数。
返回值：启动定时器时，系统分配的编号
2、setTimeout（）
只在指定时间后执行一次。
关闭：clearTimeout();
【注意】 clearTimeout函数需要一个参数：定时器的编号。
关闭计时器
关闭定时器的方式：
1.关闭页面。
2.clearInterval();
【注意】 clearInterval函数需要一个参数：定时器的编号。
小时钟
function showTime(d) {// 获取年var year = d.getFullYear();// 获取月var month = d.getMonth()+1;// 获取日var date = d.getDate();// 小时数var hours = d.getHours();// 获取分钟数var m = d.getMinutes();// 获取秒数var seconds = d.getSeconds();// 获取星期几var day = d.getDay();var str = year + "年" + doubleNum(month) +"月"+doubleNum(date)+"日 星期"+num2Chinese(day)+" "+hours+":"+m+":"+seconds;return str;}// 数字转中文function num2Chinese(num) {var arr = ["日","一","二","三","四","五","六"];return arr[num];}// 给小于10的前面补0function doubleNum(n) {if(n<10){return "0"+n;}else{return n}}
秒表
html代码
<div class="box"><div id="showTime"><span>00</span><span>:</span><span>00</span><span>:</span><span>00</span></div><div class="bnt"><button id="resetBtn">复位</button><button id="startBtn">开始</button></div></div>
css代码
* {margin: 0;padding: 0;}.box {margin: 10px auto;width: 400px;}span {font-size: 60px;}button {width: 100px;height: 100px;border-radius: 50px;font-size: 24px;margin: 0 48px;border: 0;outline: none;cursor: pointer;}#showTime {text-align: center;margin-bottom: 20px;}
JavaScript代码
window.onload = function() {var min = 0;var s = 0;var ms = 0;var time1;var spans = document.getElementsByTagName('span');// 复位$('button')[0].onclick = function() {min = 0;s = 0;ms = 0;spans[0].innerHTML = '00';spans[2].innerHTML = '00';spans[4].innerHTML = '00';$('button')[1].innerHTML = '开始';clearInterval(time1);}//开始$('button')[1].onclick = function() {if ($('button')[1].innerHTML == '开始') {$('button')[1].innerHTML = '停止';clearInterval(time1);time1 = setInterval(show, 10);} else {$('button')[1].innerHTML = '开始';clearInterval(time1);}}function show() {ms++;if (ms == 100) {ms = 0;s++;}if (s == 60) {s = 0;min++;}var msStr = ms;if (ms < 10) {msStr = "0" + ms}var sStr = s;if (s < 10) {sStr = "0" + s;}var minStr = min;if (min < 10) {minStr = "0" + min;}spans[0].innerHTML = minStr;spans[2].innerHTML = sStr;spans[4].innerHTML = msStr;}function $(str) {return document.getElementsByTagName(str);}}
倒计时
html代码
<div class="box"><p class="round">12:00 场</p><img src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIyQzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFFOEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pEcHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHfS48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuYjRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQNJbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzILijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7KnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1LbN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNcxDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7VkBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgUKc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2EcnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII=" alt="小米闪购"><p class="desc">距离结束还有</p><p class="countdown clearfix"><span>00</span><i>:</i><span>00</span><i>:</i><span>00</span></p></div>
css代码
.box {width: 234px;height: 340px;box-sizing: border-box;margin: 0 auto;border-top: 1px solid #e53935;background-color: #f1eded;text-align: center;}.round {font-size: 21px;color: #ef3a3b;padding-top: 15px;}img {margin: 25px 0;border: none;}.desc {color: rgba(0, 0, 0, .54);font-size: 15px;}.countdown {width: 168px;margin: 28px auto 0;}.clearfix::after {content: "";clear: both;display: block;}.countdown span {width: 46px;height: 46px;background: #605751;color: #fff;font-size: 24px;line-height: 46px;float: left;}.countdown i {width: 15px;float: left;height: 46px;line-height: 46px;color: #605751;font-size: 28px;font-style: normal;}
JavaScript代码
方法1
window.onload = function() {var spans = document.getElementsByTagName('span');var desc = document.getElementsByClassName('desc')[0];var time;time = setInterval(countdown, 1000);function countdown() {var dates = (new Date(, 0, 8, 9, 48, 0) - new Date()) / 1000;var h = parseInt(dates / 3600);var m = parseInt(dates % 3600 / 60);var s = parseInt(dates % 60);if (dates < 0) {clearInterval(time);h = 0;m = 0;s = 0;desc.innerHTML = '本场已经结束';}spans[0].innerHTML = h < 10 ? '0' + h : h;spans[1].innerHTML = (m < 10) ? "0" + m : m;spans[2].innerHTML = (s < 10) ? "0" + s : s;}}
方法2
window.onload = function() {var date = new Date("-01-08 9:36:10");// var date = new Date(,0,8,12,00,00);var nowDate = new Date();// 差值：总的秒数var dateDiff = parseInt((date.getTime()-nowDate.getTime())/1000);// 小时数var hours = parseInt(dateDiff/3600);// 分钟数var min = parseInt(dateDiff/60)%60;//秒数var sec = dateDiff%60;var timer,spans,desc = null;window.onload = function() {spans = document.getElementsByTagName("span");desc = document.getElementsByClassName("desc")[0];timer = setInterval(showTime,1000);}function showTime() {sec--;if (sec < 0) {sec = 59;min--;}if (min<0) {min=59;hours--;}// 计时结束if (hours<0) {hours = 0;min=0;sec = 0;clearInterval(timer);desc.innerHTML = "该场次已结束";}spans[0].innerHTML = hours<10?"0"+hours:hours;spans[1].innerHTML = min<10?"0"+min:min;spans[2].innerHTML = sec<10?"0"+sec:sec;}}
