在 Javascript 中重置计时器

Question

所以我的游戏几乎完成了它的 alpha 开发，然后我将启动它。

只是有问题。我使用 div 元素创建了按钮。这个按钮(div)应该只被点击一次然后被禁用。

是否可以禁用我制作的这个按钮（div）元素？

这是我的代码

function speedOne(){
 if (incomeDisplay >= boosterCostOne){
  
  document.getElementById("incomeDisplay").innerHTML = "Arrings : &alefsym; " + (incomeDisplay = incomeDisplay - boosterCostOne);
    
  document.getElementById("speedOne").setAttribute("disabled", "disabled");
  
 booster = 2;
  
 }
}

.speed-boosters {
 background-color: royalblue;
 width:170px;
 margin-top: 2%;
 margin-left: 2%;
 margin-bottom: 2%;
 padding:15px;
 font-weight: bold;
 cursor: pointer;
 box-shadow: 
  1px 2px 5px black,
  -1px 2px 5px black;
 border-radius: 5px;
}

.speed-boosters:hover{
 background-color: deepskyblue;
  box-shadow: 
  1px 2px 10px black,
  -1px 2px 10px black;
}

.speed-boosters:active{
 box-shadow: inset 0px 0px 15px 2px black;
 border-radius: 5px;
}

<div class = "speed-boosters" id="speedOne" onclick="speedOne()">Speed Booster - 1</div>
     <p>Buy Speed Booster - 1 : Boost Income speeds by 10%</p>

所以你可以看到我的按钮很漂亮但是可以点击很多次

如何让一个play只能点击一次？

Answer 1

您无法禁用 div。您必须将其切换为 button（就是这样）。

那么你可以使用：

document.getElementById("speedOne").setAttribute("disabled", "disabled");

您还可以根据 disabled 属性设置按钮样式：

.speed-boosters:disabled {
    background-color: red;
}

function speedOne(){
  console.log('foo');
  document.getElementById("speedOne").setAttribute("disabled", "disabled");
}

.speed-boosters {
 background-color: royalblue;
 width:170px;
 margin-top: 2%;
 margin-left: 2%;
 margin-bottom: 2%;
 padding:15px;
 font-weight: bold;
 cursor: pointer;
 box-shadow: 
  1px 2px 5px black,
  -1px 2px 5px black;
 border-radius: 5px;
}

.speed-boosters:hover{
 background-color: deepskyblue;
  box-shadow: 
  1px 2px 10px black,
  -1px 2px 10px black;
}

.speed-boosters:active{
 box-shadow: inset 0px 0px 15px 2px black;
 border-radius: 5px;
}

.speed-boosters:disabled {
 background-color: red;
}

<button class = "speed-boosters" id="speedOne" onclick="speedOne()">Speed Booster - 1</button>
<p>Buy Speed Booster - 1 : Boost Income speeds by 10%</p>

在 Javascript 中重置计时器

Resetting Timer in Javascript

html

javascript

css

button

disabled-control