<!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 创建无缝的客户机 - 服务器通信。
// html<div>当前时间为:<span id="timeNow"></span></div><br>
<button id="timeBegin">计时开始</button>
<button id="timeEnd">计时结束</button>
<button id="timeClear">计时清除</button>
// Javascript
<script type="text/javascript">
//定义初始值 计时器
var count = 0
var timer = ""
//开始计时
function BeginTime(){
var beginBtn = document.getElementById("timeBegin")
beginBtn.onclick = function(){
timer = setInterval(function(){
count ++
document.getElementById("timeNow").innerHTML = count / 100
},10)
}
}
//结束计时
function EndTime(){
var endBtn = document.getElementById("timeEnd")
endBtn.onclick = function(){
clearInterval(timer)
}
}
//计时清除
function ClearTime(){
var clearBtn = document.getElementById("timeClear")
clearBtn.onclick = function(){
document.getElementById("timeNow").innerHTML = ""
count = 0
}
}
BeginTime()
EndTime()
ClearTime()
</script>
思路: 很简单
一个盒子来显示时间, 三个按钮控制时间 开始 、 结束、 归零
定义一个初始值和计时器,点开始计时器初始值不断增加,点结束停止计时器,点清除把时间盒子清空,初始值归零即可
记录生活的瞬间,分享学习的心得,感悟生活,留住感动,( www.jensonhui.com )
利用new Date()可以轻松的实现钟表功能,甚至日历功能.如果要实现计时器功能也可以用这个对象.
var c = 1000 // 一千微秒,就是一秒
function funBeginDisTime() {
c = c + 1000 // 节奏为一秒
var now = new Date(0,0,0,0,0,0,c)
var day = now.getDate()
var hour = now.getHours()
var minutes = now.getMinutes()
var sec = now.getSeconds()
$("#myClock").html(day + "天"+ hour + "时" + minutes + "分" + sec + "秒")
myTime = setTimeout("funBeginDisTime()", 1000)// 每一秒执行一次
}
function funStopDisTime() {
clearTimeout(myTime)
}
body>
<input id="Button2" type="button" value="开始" onclick="funBeginDisTime()"/>
<span id="myClock"></span>
<input id="Button1" type="button" value="暂停" onclick="funStopDisTime()" />
</body>
setInterval() 是循环重复执行某个动作,
setTimeout()是只执行一次.
比如每五秒就通过AJAX向服务器发送一次请求.那么就可以用setInterval():
[javascript] view plain copy
setInterval("reloadAction()", 5000)
[javascript] view plain copy
function reloadAction() {
$.ajax({
"type":"POST",
"url":"live.php",
"data":"getData=live",
"success":function(data) {
// ....
}
})
}