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

标签 javascript jquery html css

我正在为 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

最佳答案

用 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

关于javascript - 计时器在固定位置不倒计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21012938/

相关文章:

html - 具有最大 z-index 的固定位置 div 仍然显示在 contentplaceholder 内容后面

javascript - 列表错误显示在控制台中,但只有一个错误显示在 div 中

javascript - 这个匿名函数是如何/何时被调用的?

javascript - 删除除白名单之外的所有节点

javascript - 禁用表单和所有包含的元素,直到 ajax 查询完成(或其他解决方案以防止多个远程请求)

javascript - 连续的 x 轴背景图像幻灯片

javascript - 如何使用 angularjs 将一个 Controller 功能注入(inject)另一个 Controller ?

javascript - 当用户单击弹出窗口表面之外的页面上的任意位置时,如何关闭动态添加的弹出窗口?

javascript - 使用javascript获取初始表单值

php - BLOB:在MySQL数据库中使用PHP存储图像