使用js修改测试计数器

Modify quiz counter using js

本文关键字:计数器 测试 修改 js 使用      更新时间:2023-09-26

我目前正在开发一款智力竞赛应用程序。简单的多选项测验,运行良好,出现问题,开始倒计时。。最后显示分数。现在我想为玩家添加一些"助推器"来增强游戏效果,所以我从"时间助推器"开始,它必须允许为玩家添加额外的时间,这是计数器类:

<script type="application/javascript">
var myCountdownTest = new Countdown({
  time: 60, 
  width:200, 
  height:80, 
  rangeHi:"minute"
 });
 </script>

所以我添加了一个名为"添加时间!"的按钮

<button id='<?php echo $i;?>' class='time btn btn-success' type='button' >Add time!</button>

比方说,我希望一旦点击按钮,计时器就会获得+20秒,所以我写道:

$(document).on('click','.time',function() {
  myCountdownTest.time=myCountdownTest.time+20;  
});

但那没用,我在这里缺少什么?附言:我希望这个按钮可以点击一次,这样玩家就可以使用这个助推器一次,然后按钮被锁定。

也许我错了,但我喜欢这里:

$(document).on('click','.time',function(){
myCountdownTest.time=myCountdownTest.time+20;  
});

您正在将clik事件附加到整个文档中。试着做同样的事情,但在按钮上:

$("#<?php echo $i; ?>").on('click','.time',function(){
myCountdownTest.time=myCountdownTest.time+20;  
$(this).unbind( "click" );
});

取消绑定行将取消连接按钮上的clic事件,它将不再可单击。

来自new Countdown的返回没有暴露time属性,而是具有bx.time属性。也许你可以试试。。。

$(document).on('click','.time',function(){
  myCountdownTest.bx.time=myCountdownTest.bx.time+20;  
});

我不确定这是否是正确的方法,因为我不知道库的api,但这应该解释为什么它没有按照你的期望进行。


更新:如果初始化后没有API更新时间。。。

有点残酷,但你可以尝试用更新的时间参数重新初始化对象。。。

$(document).on('click','.time',function(){
  myCountdownTest = new Countdown({
                            time: myCountdownTest.bx.time+20, 
                            width:200, 
                            height:80, 
                            rangeHi:"minute"
                            });
});