为了账号安全,请及时绑定邮箱和手机立即绑定

弹出窗口和停止计数器需要 JavaScript 帮助

弹出窗口和停止计数器需要 JavaScript 帮助

qq_花开花谢_0 2023-11-13 14:57:53
我希望为这个项目提供一些帮助。我正在使用 Javascript 创建一个小项目,我对 HTML、CSS 和 JavaScript 仍然很陌生。我想用我的程序做的是,计数器将在 1 分钟过去后停止,并出现一个弹出窗口,不再接受任何点击。以下是我的代码,任何帮助将不胜感激!var count = 0;var countblack = 0;var countred = 0;var countButton = document.getElementById("black");var countButtonC = document.getElementById("red");var displayCount = document.getElementById("displayCount");black.onclick = function() {  count++;  countblack++;  displayCount.innerHTML = count;  displayCountblack.innerHTML = countblack;}red.onclick = function() {  count++;  countred++;  displayCount.innerHTML = count;  displayCountred.innerHTML = countred;}http://jsfiddle.net/wr1ua0db/544/
查看完整描述

1 回答

?
动漫人物

TA贡献1815条经验 获得超10个赞

您可以使用setTimeout60 秒计数,然后禁用按钮。下面是解决方案


var allowClick = true;

var count = 0;

var countblack = 0;

var countred = 0;

var black = document.getElementById("black");

var red = document.getElementById("red");

var displayCount = document.getElementById("displayCount");

var displayBlackCount = document.getElementById("displayBlackCount");

var displayRedCount = document.getElementById("displayRedCount");


black.onclick = function() {

  if (!allowClick) return;


  count++;

  countblack++;

  displayCount.innerHTML = count;

  displayBlackCount.innerHTML = countblack;

}


red.onclick = function() {

  if (!allowClick) return;


  count++;

  countred++;

  displayCount.innerHTML = count;

  displayRedCount.innerHTML = countred;

}


startTime(60); // time in seconds


function startTime(time) {

  var timer = setTimeout(function() {

    black.setAttribute('disabled', 'disabled');

    red.setAttribute('disabled', 'disabled');

    allowClick = false;

    clearTimeout(timer)

  }, 1000 * time)

}

<button id="black">Count Black</button>

<button id="red">Count Red</button>


<div>Display Count: <span id="displayCount">0</span></div>

<div>Black Count: <span id="displayBlackCount">0</span></div>

<div>Red Count: <span id="displayRedCount">0</span></div>


查看完整回答
反对 回复 2023-11-13
  • 1 回答
  • 0 关注
  • 62 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信