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>
EDITED 我已经改变了“禁用”改为“已禁用”，我试图让暂停按钮来禁用和启用回来？
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"
}
}
代码更新::
我想作以下，但我的代码不执行。
点击 “Start_btn”
- 开始BTN - 禁用
- 暂停BTN - 使
- 复位BTN - 使
点击 “pause_btn”
- 开始BTN - 使
- 暂停BTN - 禁用
- 复位BTN - 使
点击 “reset_btn”
- 开始BTN - 使
- 暂停BTN - 禁用
- reset btn - 禁用
我的代码可以在这里找到>>>>> http://jsfiddle.net/fN8XD/5/
-1请在发布前测试您的代码，并了解分配和比较之间的区别。 – RobG
嗨...我怎么反应开始btn当暂停btn点击和暂停被禁用？ –
它不工作... function startStatus（） var start = document.getElementById（'start'）; if（start.disabled == true） //document.getElementById('start').disabled = true; start.disabled = false; if（pause.disabled == true）{ start.disabled =“disabled”; //pause.disabled = false; } else if（start.disabled =“false”） { pause.disabled = false; } } –