4

我一直在制作简单的 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>
4

2 回答 2

6
  1. JavaScript 区分大小写。您与案例不一致。传统上，JavaScript 函数和变量以小写字母开头并且是驼峰式。
  2. 您正在重新初始化已在全局范围内初始化的函数中的变量。
  3. 您并没有在每次分数更改时更新 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

于 2013-08-08T14:36:48.670 回答
0

以下代码是您正在寻找的。这些变化是：

  • 函数名称现在匹配 (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>
于 2013-08-08T14:39:19.317 回答