<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>倒计时</title>
<script type="text/javascript">
<!--
/*****************************************************/
/********************* 配置项 ************************/
/*****************************************************/
/*
1.倒计时长（单位：秒）
*/
var iMaxTime = 30;
/*
2.警告时长（单位：秒）：剩下xx秒后，响起警告音乐，直到倒计时结束
*/
var iAlertTime = 10;
/*
3.倒计时结束后，提示的字符串（限：0至4个字符）
*/
var sStartString = "时间到";
/******************** 配置结束 ***********************/
/*************** 以下是程序代码，请勿修改 *****************/
var timer;
var SrcMaxTime = iMaxTime;
var isPause = 0; //是否暂停
var isStart = 0; //是否开始
iMaxTime--;
function CountDown()
{
if(iMaxTime>0)
{
//var minutes = Math.floor(iMaxTime/60);
//var seconds = Math.floor(iMaxTime%60);
var seconds = iMaxTime;
var msg = seconds;// + " 秒";
document.all["timer"].innerHTML = msg;
if (iMaxTime <= iAlertTime) {
//响起警告音乐
MusicAlert();
}
--iMaxTime;
}
else
{
clearInterval(timer);
Stops();
document.all["timer"].innerHTML = sStartString;//"时间到";
//响起结束音乐
MusicStop();
}
}
//开始
function Starts() {
if (isStart == 0) {//未开始
if(isPause == 0 && isStart==0){
document.all["timer"].innerHTML = iMaxTime + 1;//"开始计时";
}
isPause = 0;
isStart = 1;
timer = setInterval("CountDown()", 1000);
}
else
{
//alert('不要重复开始');
}
}
//暂停
function Pauses() {
if(isPause == 0 && isStart == 1){
isPause = 1;
isStart = 0;
clearInterval(timer);
document.all["timer"].innerHTML = document.all["timer"].innerHTML;// + "-(暂停)";
playmustop();
}else{
//alert('不要重复暂停');
}
}
//结束
function Stops() {
isPause = 0;
isStart = 0;
clearInterval(timer);
iMaxTime = SrcMaxTime - 1;
document.all["timer"].innerHTML = "结束";
playmustop();
}
//重新计时
function Restarts() {
Stops();
Starts();
//document.all["timer"].innerHTML = "重新计时开始";
}
/******************** 音乐播放 ********************/
//开始播放
function playmu(src) {
music.innerHTML = "<EMBED src=\"" + src + "\" type=audio/mpeg AUTOSTART=\"1\" loop=\"0\"></EMBED>";
}
//停止播放
function playmustop() {
music.innerHTML = ""
}
//播放警告音乐
function MusicAlert(){
//playmustop();
playmu("music/alert.mp3");
}
//播放结束音乐
function MusicStop(){
//playmustop();
playmu("music/stop.mp3");
}
//-->
</script>
<style type="text/css">
#timer
{
font-size: 300px;
text-align: center;
font-family: "微软雅黑", "宋体";
height:560px;
line-height:560px;
overflow:hidden;
clear:both;
}
/******* button ************/
#buttons{
padding-right:10px;
float:right;
}
.btn {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% "宋体";
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.btn:hover {
text-decoration: none;
}
.btn:active {
position: relative;
top: 1px;
}
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2066F4', endColorstr='#3B9AC9');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2066F4', endColorstr='#3B9AC9');
}
</style>
</head>
<body>
<div id="buttons">
<a class="btn orange" href="javascript:Starts();">开 始</a>
<a class="btn orange" href="javascript:Pauses();">暂 停</a>
<a class="btn orange" href="javascript:Stops();">结 束</a>
<a class="btn orange" href="javascript:Restarts();">重新计时</a>
</div>
<div id="timer"></div>
<div id="music" style="display:none"></div>
</body>
</html>
