JS 5秒倒计时的代码怎么写?时间要实时显示在屏幕上的。

JavaScript08

JS 5秒倒计时的代码怎么写?时间要实时显示在屏幕上的。,第1张

<!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) {

// ....

}

})

}