JS如何实现倒计时功能,如何防止刷新。

JavaScript023

JS如何实现倒计时功能,如何防止刷新。,第1张

倒计时可以用js的setTimeout来控制

http://www.tocus.com.cn/?send=article_show&id=34&class=2

可以循环计时,而对于页面刷新,我们可以屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键来达到效果

<script>

//屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键

function document.oncontextmenu(){event.returnValue=false}//屏蔽鼠标右键

function window.onhelp(){return false} //屏蔽F1帮助

function document.onkeydown(){

if((window.event.altKey)&&((window.event.keyCode==37)||(window.event.keyCode==39))){

//屏蔽Alt+方向键←

//屏蔽Alt+方向键→

event.returnValue=false

}

if((event.keyCode==8)||(event.keyCode==116)||(event.ctrlKey &&event.keyCode==82)){

//屏蔽退格删除键

//屏蔽F5刷新键

//Ctrl+R

event.keyCode=0

event.returnValue=false

}

if(event.keyCode==122){event.keyCode=0event.returnValue=false}//屏蔽F11

if(event.ctrlKey &&event.keyCode==78)event.returnValue=false //屏蔽Ctrl+n

if(event.shiftKey &&event.keyCode==121)event.returnValue=false //屏蔽shift+F10

if(window.event.srcElement.tagName=="A" &&window.event.shiftKey)

window.event.returnValue=false //屏蔽shift加鼠标左键新开一网页

if((window.event.altKey)&&(window.event.keyCode==115)){ //屏蔽Alt+F4

window.showModelessDialog("about:blank","","dialogWidth:1pxdialogheight:1px")

return false

}

}

</script>

<script language='javascript'>

var _t

var _h = 0

var _m = 1

var _s = 0

var _v = formatTime(_h + ':' + _m + ':' + _s)

function doTime()

{

_s --

if (_s == -1)

{

_m --

_s = 59

}

if (_m == -1)

{

_h --

_m = 59

}

var _b = ((_h == 0) &&(_m == 0) &&(_s == 0))

if (_b)

{

_v = 'Welcome To RTBBS.NET'

clearTimeout(_t)

}

else

{

_v = formatTime(_h + ':' + _m + ':' + _s)

_t = setTimeout('doTime()', 1000)

}

document.all.oTime.innerHTML = _v

}

function formatTime(_time)

{

return _time.replace(/\b(\w)\b/g, '0$1')

}

function start_time()

{

document.all.oTime.innerHTML = _v

_t = setTimeout('doTime()', 1000)

}

</script>

<span id='oTime'></span>

<input type="button" name="button2" value="计时开始" onclick='start_time()' >

</body>

</html>

</html>

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<input placeholder="请输入时间" id="inp">

<button  onclick="go()">start</button><button onclick="stop()">stop</button><button id="jixu" onclick="jixu()" style="display: none">continue</button>

<div id="result"></div>

<script>

    var time,

            div=document.getElementById('result'),

            stopState = false

    function go(){

        time = document.getElementById('inp').value

        timeout()

    }

    function timeout(){

        if(time ==''){

            alert('请输入时间')

            return

        }

        setTimeout(function(){

            time--

            div.innerText = time

            if(time!==0 && !stopState){

                timeout()

            }

        },1000)

    }

    function jixu(){

        time = Number(document.getElementById('result').innerText)

        document.getElementById('jixu').style.display = 'none'

        stopState =false

        timeout()

    }

    function stop(){

        document.getElementById('jixu').style.display = ''

        stopState = true

    }

</script>

</body>

</html>