Question

我开始学习JS，见下面给出的例子（在链接中），想到通过修改现有的示例代码来打开/关闭自动灯泡开关的编码。

思考过程是：用户第一次点击灯泡图像后，灯泡将自动打开/关闭。开关之间的间隔：3秒。对于一次击打，整个过程持续2分钟或更短时间。

代码示例： http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

现有代码：

 <!DOCTYPE html> 
 <html>
 <body>

 <h1>JavaScript Can Change Images</h1>

 <img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100"      height="180">

<p>Click the light bulb to turn on/off the light.</p>

 <script>
 function changeImage() {
   var image = document.getElementById('myImage');
  if (image.src.match("bulbon")) {
     image.src = "pic_bulboff.gif";
   } else {
     image.src = "pic_bulbon.gif";
   }
  }
   </script>

    </body>
   </html>

代码修改我做了：

<script>
function changeImage() {

var t ;
var image = document.getElementById('myImage');

while t < 90
{    
 t++ ;
setTimeout() : var delay= 3000 ;
if (image.src.match("bulbon")) 
   image.src = "pic_bulboff.gif";
else 
    image.src = "pic_bulbon.gif";
 }
                       }
 </script>

以上修改过的代码什么也没做。工作代码更改将有助于我了解有关JS的更多信息。谢谢

Answer 1

var image = document.getElementById('myImage');
setInterval(function(){
if (image.src.match("bulbon")) {
   image.src = "pic_bulboff.gif";
}else {
    image.src = "pic_bulbon.gif";
 };
},100);

此代码将使bubl更改为0.1s

Answer 2

if（image.src.match（＆＃34; bulbon＆＃34;））{ setTimeout（function（）{image.src =＆＃34; http://www.w3schools.com/js/pic_bulboff.gif＆＃34;}，3000）;

            } else {
        setTimeout(function(){image.src = "http://www.w3schools.com/js/pic_bulbon.gif"}, 3000);

            }

codepen url- http://codepen.io/nagasai/pen/pbgGBg

保留一个定时器（用JS编码），它会在3秒后自动改变图像的颜色

2 个答案: