Question

我正在为Android设备开发一个HTML5游戏应用程序。在那个游戏中我使用简单的倒计时方法和setInterval方法，我在计时器div中显示该计数器。当我使div元素位置固定时，每当我触摸屏幕时倒计时都没有运行，然后只倒计数开始和停止。但是这在绝对位置上运行良好，我不想让那个div成为绝对的。我已经尝试了所有的可能性，没有运气请任何人帮我解决这个问题

这是我的代码

HTML：

<div id="time">
    <p id="txt2"></p>
</div>

CSS：

#time {
    right: 150px;
    top: 11px;
    z-index: 999;
    position: fixed;
    font-size: 30px;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 30px;
    color: #FFFFFF;
}

JS：

function timedCount(){
    sec = 119 - c;
    document.getElementById("txt2").innerHTML = sec;
    c=c+1;
    tt=setTimeout(function(){
        timedCount()
    },10000);

}
function doTimer(){
    //alert("TImer starts");
    if (!timer_is_on){
        timer_is_on=1;
        timedCount();
    }
}
function stopCount(){
    //alert("Timer stops");
    clearTimeout(tt);
    timer_is_on=0;
//c = 0;
}

请查看我提到的http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_stop

Answer 1

使用jquery

尝试这个

<!DOCTYPE html>
<html>
<head>
<style>
#time {
right: 150px;
top: 11px;
z-index: 999;
position: fixed;
font-size: 30px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 30px;
color: red;
   }  
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var c=1, timer_is_on = 0, tt;
$(document).ready(function(){
  doTimer();


function doTimer() {
    if (!timer_is_on){
        timer_is_on=1;
        timedCount();
    }

}


function timedCount() {

    var sec = 119 - c;
    $("#txt2").html(sec);
   //alert(c);
    c = c + 1;
    tt = setTimeout(function () {
        timedCount()
    }, 10000);

}

function stopCount() {
    //alert("Timer stops");
    clearTimeout(tt);
    timer_is_on = 0;
    //c = 0;
}
});

</script>
</head>
<body>
<div id="time">
   <p id="txt2"></p>
</div>
</body>
</html>

检查此 link

定时器在固定位置不倒计时

1 个答案: