按钮只能使用一次

的网站页面上下面的代码创建用户通过点击该按钮随时接收随机数的按钮：按钮只能使用一次

<!DOCTYPE HTML> 

<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>rand100.html</title> 
<style type = "text/css"> 
fieldset { 
    width: 600px; 
    margin-right: auto; 
    margin-left: auto; 
} 
label { 
    float: left; 
    width: 250px; 
    text-align: right; 
    margin-right: 1em; 
    clear: left; 
} 
span { 
    float: left; 
} 
button { 
    display: block; 
    clear: both; 
    margin: auto; 
} 
</style> 
<script type = "text/javascript"> 
function roll(){ 
    //create variables for form elements 
    var spnRaw = document.getElementById("spnRaw"); 
    var spn100 = document.getElementById("spn100"); 
    var spnFinal = document.getElementById("spnFinal"); 
    //get random number 
    var raw = Math.random(); 
    spnRaw.innerHTML = raw; 
    //multiply by 100 
    var times100 = raw * 100; 
    spn100.innerHTML = times100; 
    //get the ceiling 
    var final = Math.ceil(times100); 
    spnFinal.innerHTML = final; 
} // end roll 
</script> 
</head> 
<body> 
<h1>Make random numbers 1 - 100</h1> 
<form> 
    <fieldset> 
    <label>raw</label> 
    <span id = "spnRaw">0</span> 
    <label>times 100</label> 
    <span id = "spn100">0</span> 
    <label>final</label> 
    <span id = "spnFinal">0</span> 
    <button type = "button" 
    onclick = "roll()"> 
    roll the dice 
    </button> 
    </fieldset> 
</form> 
</body> 
</html>

现在我想让每个用户收到一张随机数，也就是说，如果用户点击按钮并接收到一个随机数，并再次点击该按钮，这次不会显示新的随机数。也就是说，每个用户，如果不止一次点击按钮，只会收到一个随机数，不会再有。现在我该怎么做？即更改代码，以便即使用户打开网站并点击按钮，然后接收随机数，再次单击该按钮，将不会收到新的随机数。

来源

2017-09-14 Sajjad

如同一个随机数** ever **，或每个页面载入一个随机数？ – adeneo

为什么不在第一次点击后禁用按钮？ – Winter

我想设置按钮，以便只有一个用户可以点击一次，如果它不再点击，它不会做任何事情！ – Sajjad

您可以将功能之前定义的值：

var random = Math.random(); 

function roll() { 
    ... 
}

或将其设置只有当它是未定义在函数内部：

var random; 

function roll() { 
    if (typeof random === 'undefined') { 
    random = Math.random(); 
    } 

    ... 
}

或者创建一些标志：

var rolled = false; 

function roll() { 
    if (rolled) { 
    return; 
    } 

    ... 

    rolled = true; 
}

或者从按钮中移除事件监听器：

function roll() { 
    ... 

    button.onclick = null; 
}

到按钮对象的链接，您可以从事件对象得到：

function roll(event) { 
    ... 

    event.target.onclick = null; 
}

来源

2017-09-14 12:26:33

请检查下面的代码。只需使用一个布尔例如doRoll变量并将其设置为true。第一次拨打roll()时，在获得随机数后，将布尔变量设置为false。

<!DOCTYPE HTML> 

<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>rand100.html</title> 
<style type = "text/css"> 
fieldset { 
    width: 600px; 
    margin-right: auto; 
    margin-left: auto; 
} 
label { 
    float: left; 
    width: 250px; 
    text-align: right; 
    margin-right: 1em; 
    clear: left; 
} 
span { 
    float: left; 
} 
button { 
    display: block; 
    clear: both; 
    margin: auto; 
} 
</style> 
<script type = "text/javascript"> 
var doRoll = true; 

function roll(){ 
    if(doRoll) 
    { 
    //create variables for form elements 
    var spnRaw = document.getElementById("spnRaw"); 
    var spn100 = document.getElementById("spn100"); 
    var spnFinal = document.getElementById("spnFinal"); 
    //get random number 
    var raw = Math.random(); 
    spnRaw.innerHTML = raw; 
    //multiply by 100 
    var times100 = raw * 100; 
    spn100.innerHTML = times100; 
    //get the ceiling 
    var final = Math.ceil(times100); 
    spnFinal.innerHTML = final; 
    doRoll = false; 
} 
} // end roll 
</script> 
</head> 
<body> 
<h1>Make random numbers 1 - 100</h1> 
<form> 
    <fieldset> 
    <label>raw</label> 
    <span id = "spnRaw">0</span> 
    <label>times 100</label> 
    <span id = "spn100">0</span> 
    <label>final</label> 
    <span id = "spnFinal">0</span> 
    <button type = "button" 
    onclick = "roll()"> 
    roll the dice 
    </button> 
    </fieldset> 
</form> 
</body> 
</html>

来源

2017-09-14 12:27:36

按钮只能使用一次

回答

相关问题