标签：var 需要 use 定义 over int har 清空 点击
前两天参加一个活动，有个倒计时的环节，当时非要投影，但是没网，手机开了一下热点，浪费了百兆流量也没找到喜欢的，于是自己匆匆忙忙做了一个，不是很满意，稍微又完善了一下，共享给有需要的朋友，话不多说，上代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>倒计时工具</title> <!--播放的歌曲名字已经定义死video1.mp3为倒计时过程中音乐，video2.mp3为倒计时结束后播放音乐，放在和该文件相同目录下即可，命名请不要修改--> </head> <style> .pt1 { background-color: #fff; background-size: 100% 1.2em; background-image: -webkit-linear-gradient(to right, transparent 21px, #abced4 21px, #abced4 23px, transparent 23px), -webkit-linear-gradient(#eee .05em, transparent .05em); background-image: linear-gradient(to right, transparent 21px, #abced4 21px, #abced4 23px, transparent 23px), linear-gradient(#eee .05em, transparent .05em); } </style> <body class="pt1"> <div> <span>请输入总秒数：</span> <input id="num" type="number" min="0" value="60"/> <button onclick="okClick()">开始</button> <button onclick="musicStop()">关闭音乐</span> </div> <div style="text-align:center;height:350px"> <span>剩余时间</span> <span id="coreMin" style="font-size:380px">0</span> <span>秒</span> </div> <br/><br/><br/><br/> <div style="text-align:center"> <button onclick="okClick()" style="font-size:50px">开始</button> <button onclick="suspendClick()" id="pusBtn" style="font-size:50px">暂停</button> <button onclick="goOn()" id="goBtn" style="font-size:50px" disabled = false >继续</button> <button onclick="stopClick()" id="stopBtn" style="font-size:50px">停止</button> </div> <audio id="video1" src="video1.mp3" loop="loop"> 该浏览器不支持播放音乐. </audio> <br/> <audio id="video2" src="video2.mp3" loop="loop"> 该浏览器不支持播放音乐. </audio> <footer style=" bottom: 0;text-align:center;" > <hr/> <div style="text-align:center;" > <span>酒务教会</span>     <span>author： LinSir</span>     <span>time：2017年10月4日00:32:40</span> </div> </footer> </body> </html> <script> var timer1;//实例化全局定时器，只允许出现一个 var coreMin = document.getElementById("coreMin");//取到倒计时区域秒数 var num = 0; var audio1 = document.getElementById("video1");//倒计时过程中音乐 var audio2 = document.getElementById("video2");//倒计时结束 function okClick(){//开始总入口 beforeStar() if(num < 0||num > 3000||num == ‘‘){//判断数值是否合法 alert("请输入合法区间0--3000"); return; } musicPlay1() timerRun() } function beforeStar(){//点击开始前动作 num = document.getElementById("num").value;//取到用户设置总秒数 //每次点击开始前先清空定时器和倒计时的秒数 coreMin.innerHTML = 0; coreMin.innerHTML = num == ‘‘ ? 0 : num;//第一次赋值 防止延迟感觉 window.clearInterval(timer1); musicStop(); } function timerRun(){//控制定时器 timer1 = window.setInterval(function(){ num = num-1; if(num>=0){//防止出现负数的情况 coreMin.innerHTML = num; } if(num == 0){//说明倒计时结束，若有音乐直接播放 overGame(); } if(num <= 0){ window.clearInterval(timer1); } },1000); //timer1->1 当前是第一个定时器 } function suspendClick(){//暂停 //暂定定时器和歌曲 window.clearInterval(timer1); var goBtn = document.getElementById("goBtn");//获取继续按钮 goBtn.disabled = false; var pusBtn = document.getElementById("pusBtn");//获取暂停按钮 pusBtn.disabled = true; musicPus1(); } function goOn(){//继续 timerRun(); musicPlay1(); var goBtn = document.getElementById("goBtn");//获取继续按钮 goBtn.disabled = true; var pusBtn = document.getElementById("pusBtn");//获取暂停按钮 pusBtn.disabled = false; } function stopClick(){//停止 window.clearInterval(timer1); num = 0;// 为了方便重置按钮 goOn(); coreMin.innerHTML = 0; musicStop(); } function musicPlay1(){ audio1.play(); } function musicStop1(){//停止 audio1.pause();//暂停 audio1.currentTime = 0;//时间归零 } function musicPus1(){ audio1.pause();//暂停 } function musicPlay2(){ audio2.play(); } function musicStop2(){//停止 audio2.pause();//暂停 audio2.currentTime = 0;//时间归零 } function musicStop(){ musicStop1(); musicStop2(); } function overGame(){//倒计时结束 musicStop1(); musicPlay2(); } </script>
标签：var 需要 use 定义 over int har 清空 点击
原文地址：http://www.cnblogs.com/lin1993/p/7625431.html
