Javascript 计时器未在固定位置倒计时_Javascript_Jquery_Html_Css

Javascript 计时器未在固定位置倒计时

javascript jquery html css

Javascript 计时器未在固定位置倒计时,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在为android设备开发一款HTML5游戏应用程序。在那个游戏中，我使用简单的倒计时方法和setInterval方法，并在timer div中显示计数器。当我使div元素的位置固定时，每当我触摸屏幕时，倒计时不运行，只有倒计时开始和停止。但这在绝对位置上运行良好，我不想让那个div成为绝对位置。我已经尝试了所有的可能性，没有运气请任何人帮我解决这个问题这是我的密码 HTML: JS: 请检查我参考的这一个用jquery试试这一个 <!DOCTYPE html> <ht

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

这是我的密码

HTML:

JS:

请检查我参考的这一个

用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>


#时间{
右：150px；
顶部：11px；
z指数：999；
位置：固定；
字体大小：30px；
颜色：rgb（0,0,0）；
字体大小：粗体；
字体大小：30px；
颜色：红色；
}  
变量c=1，定时器为on=0，tt；
$（文档）.ready（函数（）{
多蒂默（）；
函数doTimer（）{
如果（！计时器打开）{
定时器_为_开=1；
timedCount（）；
}
}
函数timedCount（）{
var sec=119-c；
$（“#txt2”）.html（第二节）；
//警报（c）；
c=c+1；
tt=设置超时（函数（）{
timedCount（）
}, 10000);
}
函数stopCount（）{
//警报（“计时器停止”）；
清除超时（tt）；
定时器_为_开=0；
//c=0；
}
});

检查此项

请创建一个提琴：jsfiddle.net它看起来好像从未设置过

。尝试添加

c=0

作为函数之前的全局变量。我认为这不是定位问题。@Paul code是正确的。。我还有一些其他代码，所以我复制并粘贴了。。触摸屏幕后，仅计数器运行，其他计数器将仅空闲。@IamDesai我正在移动设备中运行它仅使用名称代码我正在使用sir，但问题是倒计时未在屏幕空闲时运行，如果我触摸屏幕，则倒计时运行并停止，如果我继续触摸屏幕，则它将运行或不运行

#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;
}

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;
}

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