0

我想制作按钮，如果单击按钮 A，A 将禁用。当 B 被单击时，B 将被禁用并会响应按钮 A。

如何更改我的代码？为达到这个？我想让这个功能以后可以与更多按钮一起使用。如果 A 被点击，则 A 被禁用，B、C、D 将被激活。

<!DOCTYPE HTML>
<html>
<head>
<title>Animation Test</title>


</head>

<body>
<div>
<canvas id="myCanvas" width="250" height="250" style="border:solid 1px #000000;">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
    <button id="start" type="button" start.disable = "true" onClick="loadingComplete(); SetButtonStatus()" />Start</button>
    <button id="pause" type="button" pause.disable="false" onClick=";SetButtonStatus();" />Pause</button>    
    <button id="reset" type="button" pause.disable="false" onClick=";SetButtonStatus();" />Reset</button>

    </div>
<script>
var surface = document.getElementById("myCanvas");
var surfaceContext = surface.getContext('2d');
var happy;
var x = 50;
var y = 0;
var x1 = 150;
var y1 = 120;
var dirX = 3;
var dirY = 1;
var dirX1 = 2;
var dirY1 = 2;

var bgImage = new Image();
bgImage.src = "Pictures/PondEnvironment/pond.png";

bgImage.onload = function () {
    surfaceContext.drawImage(bgImage, 0, 0, 250, 250);
};



        function SetButtonStatus()
        {

            if (document.getElementById('start').disabled == false)
            {
                document.getElementById('start').disabled=true;
                document.getElementById('pause').disabled=false;
                document.getElementById('reset').disabled=false;    
                return 0;}

            if (document.getElementById('pause').disabled == false )
            {
                document.getElementById('pause').disabled =true;
                document.getElementById('start').disabled =false;
                return 0;
            }

            if (document.getElementById('reset').disabled == false )
            {
                document.getElementById('pause').disabled =false;
                document.getElementById('reset').disabled =false;
                document.getElementById('start').disabled =true;
                return 0;
            }

        } 




    /*function disable(buttonid){
        var button1_name;
        var button2_name;

        if(button1_name==1){
            document.getElementById('button1').disabled = true;
            document.getElementById('button2').disabled = false;
            document.getElementById('button1').name=0;
        }
        if(button2_name==3){
            document.getElementById('button2').disabled = true;
            document.getElementById('button1').disabled = false;
            document.getElementById('button2').name=0;
        }
    }
*/

function drawCanvas() {
    // Get our Canvas element
    //surface = document.getElementById("myCanvas");

    if (surface.getContext) {
        // If Canvas is supported, load the image
        happy = new Image();
        //happy.onload = loadingComplete;
        happy.src ="image/pic1.jpg";
        happy2 = new Image();
        happy2.src ="image/anchovies.png";
        var bgImage = new Image();
        bgImage.src = "Pictures/PondEnvironment/pond.png";
    }
}

function loadingComplete(e) {
    // When the image has loaded begin the loop
    setInterval(loop, 25);
    start.disable=true;
}

function loop() {
    // Each loop we move the image by altering its x/y position

    // Grab the context
    //var surfaceContext = surface.getContext('2d');

    // Clear the canvas to White
    //surfaceContext.fillStyle = "rgb(255,255,255)";
    surfaceContext.drawImage(bgImage,0,0,250,250);
    //surfaceContext.fillRect(0, 0, surface.width, surface.height);

    // Draw the image
    surfaceContext.drawImage(happy, x, y, 50, 30);
    surfaceContext.drawImage(happy2, x1, y1, 50, 30);

    x += dirX;
    y += dirY;
    x1 += dirX1;
    y1 += dirY1;

    if (x <= 0 || x > 220 - 23) {
        dirX = -dirX;
    }
    if (y <= 0 || y > 250 - 30) {
        dirY = -dirY;
    }
    if (x1 <= 0 || x1 > 220 - 23) {
        dirX1 = -dirX1;
    }
    if (y1 <= 55 || y1 > 250 - 30) {
        dirY1 = -dirY1;
    }
}
</script>  
<script>drawCanvas(); </script> 
</body>
</html>

已编辑 我已将“禁用”更改为“禁用”，并且我正在尝试使暂停按钮禁用并重新启用？

   function startStatus()
    {

        if (start.disabled)
            start.disabled = "enabled";

       /* else if (pause.disabled = "true")
        {
            start.disabled ="disabled";
        }*/

        else if (start.disabled ="true")
        {
        //pause.disabled = "enabled"
        }


        if (pause.disabled)
        pause.disabled = "false";

        /* else if (pause.disabled = "true")
         {
         start.disabled ="disabled";
         }*/

        else if (start.disabled ="false")
        {
            //pause.disabled = "enabled"
        }

    }

代码更新::

我想做以下，但我的代码没有执行。

  1. 点击“Start_btn”

    • 启动 btn -- 禁用
    • 暂停 btn -- 启用
    • 重置 btn -- 启用

  2. 点击“pause_btn”

    • 启动 btn -- 启用
    • 暂停 btn - 禁用
    • 重置 btn -- 启用

  3. 点击“reset_btn”

    • 启动 btn -- 启用
    • 暂停 btn - 禁用
    • 重置 btn -- 禁用

我的代码可以在这里找到 >>>> >http://jsfiddle.net/fN8XD/5/

4

2 回答 2

0

在您的代码中（我的包装）：

> <button id="start" type="button" start.disable = "false" 
>  onClick="loadingComplete(); SetButtonStatus()" />Start</button>

您的代码依赖于 id “start” 被设为引用具有 id “start” 元素的全局变量，这是 IE 引入的非标准功能（并被其他浏览器复制以实现兼容性），这被广泛认为是一个非常糟糕的主意, 不要使用它。

“start.disable”的按钮元素没有标准属性，因此许多浏览器不会通过相同的命名元素属性提供访问。带有句点的属性名称不能使用 javascript 点表示法访问，必须使用方括号表示法访问。一些浏览element['start.disable']器会将其作为getAttribute('start.disable').

但是，我认为您实际上是在禁用属性之后。

最后，开始标记的结束部分有一个放错位置的“/”，在 XML 中用于表示一个空元素。这显然不是 XML，如果是，它将导致元素标记的其余部分出现语法错误。我想你想要的是：

<button id="start" type="button" disabled 
 onClick="loadingComplete(); SetButtonStatus()">Start</button>

另请注意， disabled 属性会导致 realted DOM 元素的 disabled 属性设置为true（即布尔值 true，而不是字符串“true”）。因此，您的代码可以是：

var start = document.getElementById('start');

if (start.disabled) {

  // toggle status
  start.disabled = false;

 } ...

等等。

请注意，您可以编写：

if (start.disabled == true)

但上面的输入和等价的较少。

于 2012-05-28T06:14:44.690 回答
-2

工作你的代码

js小提琴演示

<html>
<head>
<title>Animation Test</title>
<script>
    function SetButtonStatus()
    {


       if (document.getElementById('start').disabled == false)
        {document.getElementById('start').disabled=true;
         document.getElementById('pause').disabled=false;        
        return 0;}

        if (document.getElementById('pause').disabled == false )
        {//i added this line**
        //pause.disabled ="enabled"
        document.getElementById('pause').disabled =true
        document.getElementById('start').disabled =false
            return 0;
        }//i added this line**

    /*else if(document.getElementById('pause').disabled == true )
    {document.getElementById('pause').disabled = false}*/

    }
    </script>
</head>

<body>
<div>
<canvas id="myCanvas" width="250" height="250" style="border:solid 1px #000000;">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
        <button id="start" type="button"  onClick="SetButtonStatus()" />Start</button>

        <button id="pause" type="button" onClick="SetButtonStatus()"/>Pause</button>

    </div>


</body>
</html>

js小提琴演示

于 2012-05-28T05:21:52.310 回答