在JavaScript中控制功能的按鈕
[英]Buttons controlling functions in javascripts
問題描述
我一直在制作簡單的Javascript程序，可以在不同的網站上為我的朋友運行，並且我一直在嘗試使用按鈕制作統治風格（使命召喚游戲模式）程序。 我看了一個網站，並嘗試使用它的設置間隔，但是我不知道如何使按鈕訪問腳本。
這是我的代碼：
<!DOCTYPE html>
<html>
<body>
<p id = "blue"></p>
<p id = "red"></p>
<button onclick="StartA()">Start for Red</button>
<button onclick="StopA()">Stop for red</button>
<button onclick="StartB()">Start for Blue</button>
<button onclick="StopB()">Stop for Blue</button>
<script>
var startRed;
var startBlue;
var r=1;
var b=1;
var startA = function(){
var startRed = setInterval(function(){redscore++};,3000)
};
var startB = function(){
var startBlue = setInterval(function(){bluescore++};,3000)
};
var StopA = function(){
clearInterval(startRed);
};
var StopB = function() {
clearInterval(startBlue);
};
document.getElementById("blue").innerHTML=bluescore;
document.getElementById("red").innerHTML=redscore;
</script>
</body>
</html>
2 個解決方案
解決方案1
6 已采納 2013-08-08 14:36:48
- JavaScript區分大小寫。 您與大小寫不一致。 傳統上，JavaScript函數和變量以小寫字母開頭，並且使用駝峰式大小寫。
- 您正在初始化已在全局范圍中初始化的函數中的變量。
- 您並沒有在每次評分更改時都更新ui，只是在開始時。
下面是應按預期運行的更新代碼。 將您的分數保持者變成一類可能是值得的，因為它們是多余的。
更新的HTML
<p id="blue"></p>
<p id="red"></p>
<button onclick="startA()">Start for Red</button>
<button onclick="stopA()">Stop for red</button>
<button onclick="startB()">Start for Blue</button>
<button onclick="stopB()">Stop for Blue</button>
更新了javaScript
var startRed;
var startBlue;
var bluescore = 1;
var redscore = 1;
function startA() {
stopA();
startRed = setInterval(function () {
redscore++;
updateUI();
}, 3000)
};
function startB() {
stopB();
startBlue = setInterval(function () {
bluescore++;
updateUI();
}, 3000)
};
function stopA() {
clearInterval(startRed);
};
function stopB() {
clearInterval(startBlue);
};
function updateUI() {
document.getElementById("blue").innerHTML = bluescore;
document.getElementById("red").innerHTML = redscore;
}
updateUI();
jsFiddle
解決方案2
0 2013-08-08 14:39:19
以下代碼是您想要的。 更改為：
- 函數名稱現在匹配（
startA() => StartA(), startB() => StartB()等） -
<p>元素在時間間隔內更新（否則，它們從不更新） - 從函數內刪除本地變量
您可以在此處查看jsfiddle： http : //jsfiddle.net/5tcNb/
<body>
<script>
var startRed, startBlue;
var redscore = 0, bluescore = 0;
var r = 1, b = 1;
function StartA() {
startRed = setInterval(function() {
redscore++;
document.getElementById("red").innerHTML = redscore;
}, 3000);
};
function StartB() {
startBlue = setInterval(function() {
bluescore++;
document.getElementById("blue").innerHTML = bluescore;
}, 3000);
};
function StopA() {
clearInterval(startRed);
};
function StopB() {
clearInterval(startBlue);
};
</script>
<p id="blue">0</p>
<p id="red">0</p>
<button onclick="StartA()">Start for Red</button>
<button onclick="StopA()">Stop for red</button>
<button onclick="StartB()">Start for Blue</button>
<button onclick="StopB()">Stop for Blue</button>
</body>
解釋javascripts Date（）函數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.