<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>js实现倒计时60秒的简单代码(推荐)</title>
<script type="text/javascript"坦码物 src="js/jquery.js"></script>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
<script type="text/javascript">
var countdown=60
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled")
val.value="免费获取验证码"
countdown = 5
} else {
val.setAttribute("disabled", true)
val.value="重新发送(" + countdown + ")"
countdown--
setTimeout(function() {
settime(val)
},1000)
}
}
</script>
</body>
</html>
JavaScript简介
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 课外书
如果 JavaScript 教程学习完毕，并且需要更深入地学习这门语言，《JavaScript 高让液级教程》绝对是您最好的选择。本教程从 JavaScript 的历史开始讲起，直到当前它对 XML 和 Web 服务的支持。
将学习到如何扩展该语言，以使它适应特殊的需求。
还将学到如何使用 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
<title>untitled</title>
<script type="text/javascript">
get=function (id){
return document.getElementById(id)
}
if(document.all){
window.XMLHttpRequest=function(){
var get=['Microsoft.XMLHTTP','Msxml2.XMLHTTP']
for(var i=0i<get.lengthi++)
{
try{
return new ActiveXObject(get[i])
}
catch(e){}
}
}
}
webDate=function(fn){
var Htime=new XMLHttpRequest()
Htime.onreadystatechange=function(){
Htime.readyState==4&&(fn(new Date(Htime.getResponseHeader('Date'))))
}
Htime.open('HEAD', '/?_='+(-new Date)) Htime.send(null)
}
window.time=new Date()
targetTime=new Date()
time2String=function (t){
with(t)return [getFullYear(),'年' ,('0'+(getMonth()+1)).slice(-2),'月' ,('0'+getDate()).slice(-2),'日 ' ,('0'+getHours()).slice(-2),': ' ,('0'+getMinutes()).slice(-2),': ' ,('0'+getSeconds()).slice(-2)].join('')
} 行纳
int2time=function (m){
m-=(D=parseInt(m/86400000))*86400000 m-=(H=parseInt(m/3600000))*3600000 S=parseInt((m-=(M=parseInt(m/60000))*60000)/1000)
return D+'天'+H+'小时'+M+'分'+S+'秒'
}
setInterval(function (){
webDate(function (webTime){
掘陪 get('web').innerHTML=time2String(time=webTime)
})
get('locale').innerHTML=time2String(new Date)
get('time').innerHTML=int2time(targetTime-time)
if ((targetTime-time)<0) {
get('time').innerHTML = 'Game Over'
} },1000)
</script>
</head>
<body>
设定时间：2015年06月18日0时0分0秒<br> 服务器时间:<span id='web'>loading...</span><br>
本地时间:<span id="locale">loading...</span><br>
倒计时时间:<span id="time">loading...</span>
<script type="text/javascript" charset="utf-8"> targetTime=new Date(2015,06,18,00,00,00) </script>
</body>
</html>
注：原理用xmlhttp来获取服务器上的时间，后台用js做倒计时显示到页面上，由于获取服务器时间这个在本地运行不一定能成功，最好是在服务器上运行！
实现倒计时很容易，关键是你要求刷新页面，不能停止倒计时1、使用iframe，嵌入页面，父页上执行js *** 作，这样子页面刷新后会接着显示倒计时；
2、在后台实现，如使用java的timer类来实现倒计时，前台通过ajax获取倒计时结果，无论前端页面怎么刷新，不会停止倒计时
前端的好写，简单写下，仅供参考
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
</head>
<body onLoad="startCount()" onUnload="fromClose()">
<iframe id="myFrame" src="innerPage.html" height="500" width="500"></iframe>
</body>
</html>
<script>
var timer
var count=10
function startCount(){
timer=window.setInterval("myTimeBack()",1000)
}
function myTimeBack(){
myFrame.document.getElementById("myInput").value=count
count=count-1
if(count==0)
count=10
}
function fromClose(){
clearInterval(timer)
}
<念扒/script>
//嵌皮改入的页面innerPage.html
<html>
<仔握昌head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<input type="text" value="" id="myInput" style="width:50">
<button onClick="refeshFrame()" style="width:80">refresh</button>
</body>
</html>
<script>
function refeshFrame(){
this.location.href=this.location.toString()
}
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）