Fatal编程技术网
  • javascript/
  • javascript中按钮剪辑的设置超时

javascript中按钮剪辑的设置超时

javascript

javascript中按钮剪辑的设置超时,javascript,settimeout,Javascript,Settimeout,我试图让用户在按下开始按钮之前不能按数字按钮。我搜索了W3学校和其他网站，但找不到解决方案。任何帮助都将不胜感激，即使你能给我指一个网站。我的指导老师告诉use，我们需要在网上找到解决问题的方法。即使是对一本好的javascript书的建议也会有帮助，因为课堂上没有课本，他也不教 <body> <h3 style="margin-left: 15px">This is Your TARGET:</h3> <div id="randomNum" class

我试图让用户在按下开始按钮之前不能按数字按钮。我搜索了W3学校和其他网站，但找不到解决方案。任何帮助都将不胜感激，即使你能给我指一个网站。我的指导老师告诉use，我们需要在网上找到解决问题的方法。即使是对一本好的javascript书的建议也会有帮助，因为课堂上没有课本，他也不教

<body>
<h3 style="margin-left: 15px">This is Your TARGET:</h3>
<div id="randomNum" class="display" style="margin-top: -20px; margin-bottom: 30px">0</div>

<!-- Start button -->
<button onclick="setTimeout(myFunction, 5000);">Start</button>

<!-- Total value text -->
<div id="text_total">0</div>

<!-- Number buttons -->
<div class="number_button" onclick="change_total(1)">1</div>
<div class="number_button" onclick="change_total(2)">2</div>
<div class="number_button" onclick="change_total(3)">3</div>
<div class="number_button" onclick="change_total(4)" style="clear: left">4</div>
<div class="number_button" onclick="change_total(5)">5</div>
<div class="number_button" onclick="change_total(6)">6</div>
<div class="number_button" onclick="change_total(7)" style="clear: left; margin-bottom: 30px">7</div>
<div class="number_button" onclick="change_total(8)" style="margin-bottom: 30px">8</div>
<div class="number_button" onclick="change_total(9)" style="margin-bottom: 30px">9</div>

<h3 style="clear: left; margin-left: 58px">COUNTER!</h3>
<div id="counter" class="display" style="clear: left; margin-top: -20px">0</div>

<script>
// Variables
var total = 0;
var target;
var clicks = 0;



window.onload = randomNumber();

// Functions
function change_total(arg) { // This takes button input and changes the total value
    total = total + arg;
    clicks = clicks + 1;
    update_total();
    if (total == target) {
        alert("You win!"); // popup window with message
        total = 0; // reset for next round
        clicks = 0; // resets the click counter
        randomNumber(); //gets new number for next round
        update_total();
    }if (total > target) {
        alert("BUSTED!!");
        total = 0;
        clicks = 0;
        randomNumber();
        update_total();
        }
    update_clicks();
}

function myFunction() {
    alert("You failed to reach the target in time!");
}

function update_total() { // Updates the text on the screen to show the current total
    document.getElementById("text_total").innerHTML = total;
}

function randomNumber() { // returns a random number between 25 and 75
    target = Math.floor(Math.random() * (50) + 25);
    document.getElementById("randomNum").innerHTML = target;
}

function update_clicks() { // lets user know how many clicks
    document.getElementById("counter").innerHTML = "You clicked the mouse " + clicks + " times.";
}

</script>

</body>


这是你的目标：
0
开始
0
1.
2.
3.
4.
5.
6.
7.
8.
9
柜台
0
//变数
var合计=0；
var目标；
var=0；
window.onload=randomNumber（）；
//功能
函数change_total（arg）{//此函数接受按钮输入并更改总值
总计=总计+参数；
点击次数=点击次数+1；
更新_total（）；
如果（总==目标）{
警报（“您赢了！”；//弹出消息窗口
总计=0；//为下一轮重置
clicks=0；//重置单击计数器
randomNumber（）；//获取下一轮的新编号
更新_total（）；
}如果（总数>目标）{
警觉（“被逮到！！”；
总数=0；
点击次数=0；
随机数（）；
更新_total（）；
}
更新_单击（）；
}
函数myFunction（）{
警报（“您未能及时到达目标！”）；
}
函数update_total（）{//更新屏幕上的文本以显示当前总数
document.getElementById（“text_total”）.innerHTML=total；
}
函数randomNumber（）{//返回一个介于25和75之间的随机数
目标=Math.floor（Math.random（）*（50）+25）；
document.getElementById（“randomNum”）.innerHTML=target；
}
函数update_clicks（）{//让用户知道有多少次单击
document.getElementById（“counter”）.innerHTML=“您单击了鼠标”+单击次数+”；
}
您可以试试这个

我已经测试过了，见下文

我只是使用isStart布尔变量来检查游戏是否开始。

<body>
<h3 style="margin-left: 15px">This is Your TARGET:</h3>
<div id="randomNum" class="display" style="margin-top: -20px; margin-bottom: 30px">0</div>

<!-- Start button -->
<button onclick="startGame()">Start</button>

<!-- Total value text -->
<div id="text_total">0</div>

<!-- Number buttons -->
<div class="number_button" onclick="change_total(1)">1</div>
<div class="number_button" onclick="change_total(2)">2</div>
<div class="number_button" onclick="change_total(3)">3</div>
<div class="number_button" onclick="change_total(4)" style="clear: left">4</div>
<div class="number_button" onclick="change_total(5)">5</div>
<div class="number_button" onclick="change_total(6)">6</div>
<div class="number_button" onclick="change_total(7)" style="clear: left; margin-bottom: 30px">7</div>
<div class="number_button" onclick="change_total(8)" style="margin-bottom: 30px">8</div>
<div class="number_button" onclick="change_total(9)" style="margin-bottom: 30px">9</div>

<h3 style="clear: left; margin-left: 58px">COUNTER!</h3>
<div id="counter" class="display" style="clear: left; margin-top: -20px">0</div>

<script>
// Variables
var total = 0;
var target;
var clicks = 0;



window.onload = randomNumber();
var isStart=false;
// Functions
function change_total(arg) { // This takes button input and changes the total value
if(isStart){
    total = total + arg;
    clicks = clicks + 1;
    update_total();
    if (total == target) {
        alert("You win!"); // popup window with message
        total = 0; // reset for next round
        clicks = 0; // resets the click counter
        randomNumber(); //gets new number for next round
        update_total();
        isStart=false;
    }if (total > target) {
        alert("BUSTED!!");
        total = 0;
        clicks = 0;
        randomNumber();
        update_total();
        isStart=false;
        }
    update_clicks();
    }
    else{
    alert('please start the game');
    }
}

function myFunction() {
    alert("You failed to reach the target in time!");
}

function update_total() { // Updates the text on the screen to show the current total
    document.getElementById("text_total").innerHTML = total;
}

function randomNumber() { // returns a random number between 25 and 75
    target = Math.floor(Math.random() * (50) + 25);
    document.getElementById("randomNum").innerHTML = target;
}

function update_clicks() { // lets user know how many clicks
    document.getElementById("counter").innerHTML = "You clicked the mouse " + clicks + " times.";
}
function startGame(){
isStart=true;
}
</script>

</body>


这是你的目标：
0
开始
0
1.
2.
3.
4.
5.
6.
7.
8.
9
柜台
0
//变数
var合计=0；
var目标；
var=0；
window.onload=randomNumber（）；
var-isStart=false；
//功能
函数change_total（arg）{//此函数接受按钮输入并更改总值
如果（isStart）{
总计=总计+参数；
点击次数=点击次数+1；
更新_total（）；
如果（总==目标）{
警报（“您赢了！”；//弹出消息窗口
总计=0；//为下一轮重置
clicks=0；//重置单击计数器
randomNumber（）；//获取下一轮的新编号
更新_total（）；
isStart=false；
}如果（总数>目标）{
警觉（“被逮到！！”；
总数=0；
点击次数=0；
随机数（）；
更新_total（）；
isStart=false；
}
更新_单击（）；
}
否则{
警报（“请开始游戏”）；
}
}
函数myFunction（）{
警报（“您未能及时到达目标！”）；
}
函数update_total（）{//更新屏幕上的文本以显示当前总数
document.getElementById（“text_total”）.innerHTML=total；
}
函数randomNumber（）{//返回一个介于25和75之间的随机数
目标=Math.floor（Math.random（）*（50）+25）；
document.getElementById（“randomNum”）.innerHTML=target；
}
函数update_clicks（）{//让用户知道有多少次单击
document.getElementById（“counter”）.innerHTML=“您单击了鼠标”+单击次数+”；
}
函数startName（）{
isStart=true；
}
这与您的问题无关，但请注意，
randomNumber（）
函数返回的整数范围为25到74（不包括75）。这是因为
Math.random（）
返回的值小于或等于0且小于1。您在这里使用
Math.floor（）
是正确的，如果需要，请考虑这一点。如果在开始按钮之前按了一个键，而不是使用超时时间间隔，您会显示一条错误消息吗？谢谢，这似乎对我很有效。现在我需要处理计时器部分。