javascript记时小案例
日期：2014-05-16 浏览次数：20318 次
javascript倒计时小案例
今天加强了javascript的学习，重新写了一个倒计时的简单案例。希望对初学者的有所帮助！
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时</title>
</head>
<body>
<form action="js.html" id="myForm" name="myForm" method="post">
</form>
<div id="timenum">
<input type="text" name="num" id="numDao" onblur="setText1()" size="5:px"/>
</div>
<input type="button" name="but" id="but1" value="开始" onclick="beginTime()"/>
<input type="button" name="but" id="but2" value="结束" onclick="endTime()"/>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
document.getElementById("but1").disabled="false";
document.getElementById("but2").disabled="false";
}
var timeConstr = null;
var sec = null;
function setText1(){
var timenum = document.getElementById("numDao").value;
document.getElementById("but1").removeAttribute("disabled");
sec=timenum*60;
}
function beginTime(){
var day = Math.floor(sec/3600/24);
var hour = Math.floor((sec/3600)-24*day);
var minu = Math.floor((sec-hour*3600-24*day*3600)/60);
var second = sec-minu*60-hour*3600-24*day*3600;
if(minu>0 && minu<10){
minu = "0"+minu;
}
if(second>0 && second<10){
second = "0"+second;
}
document.getElementById("timenum").innerHTML="剩余:"+day+"天"+hour+"小时"+minu+"分钟"+second+"秒";
if(sec==0){
alert("表单提交了");
window.clearTimeout(timeConstr);
document.forms.item(0).submit();
}
document.getElementById("but1").disabled="false";
document.getElementById("but2").removeAttribute("disabled");
timeConstr = window.setTimeout('beginTime()',1000);
sec=sec-1;
}
function endTime(){
window.clearTimeout(timeConstr);
document.getElementById("but1").removeAttribute("disabled");
}
</script>如有问题，请留言！
今天加强了javascript的学习，重新写了一个倒计时的简单案例。希望对初学者的有所帮助！
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时</title>
</head>
<body>
<form action="js.html" id="myForm" name="myForm" method="post">
</form>
<div id="timenum">
<input type="text" name="num" id="numDao" onblur="setText1()" size="5:px"/>
</div>
<input type="button" name="but" id="but1" value="开始" onclick="beginTime()"/>
<input type="button" name="but" id="but2" value="结束" onclick="endTime()"/>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
document.getElementById("but1").disabled="false";
document.getElementById("but2").disabled="false";
}
var timeConstr = null;
var sec = null;
function setText1(){
var timenum = document.getElementById("numDao").value;
document.getElementById("but1").removeAttribute("disabled");
sec=timenum*60;
}
function beginTime(){
var day = Math.floor(sec/3600/24);
var hour = Math.floor((sec/3600)-24*day);
var minu = Math.floor((sec-hour*3600-24*day*3600)/60);
var second = sec-minu*60-hour*3600-24*day*3600;
if(minu>0 && minu<10){
minu = "0"+minu;
}
if(second>0 && second<10){
second = "0"+second;
}
document.getElementById("timenum").innerHTML="剩余:"+day+"天"+hour+"小时"+minu+"分钟"+second+"秒";
if(sec==0){
alert("表单提交了");
window.clearTimeout(timeConstr);
document.forms.item(0).submit();
}
document.getElementById("but1").disabled="false";
document.getElementById("but2").removeAttribute("disabled");
timeConstr = window.setTimeout('beginTime()',1000);
sec=sec-1;
}
function endTime(){
window.clearTimeout(timeConstr);
document.getElementById("but1").removeAttribute("disabled");
}
</script>如有问题，请留言！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
