运用JS焦点获取id实现灯泡开关并显示时间样式操作具体代码如下:

最新推荐文章于 2023-10-11 00:19:05 发布

是小王啊

最新推荐文章于 2023-10-11 00:19:05 发布

阅读量205

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/wangsong97/article/details/102537057

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <center>
  <div>
   <img src="light.jpg" width="200" height="300" id = "image">
   <input  type="button" value="点击更换" onclick="change()" height="50"/> 
   <div id = "time"></div>
  </div>
  </center>
  <script type="text/javascript">
   //定义一个数组
   var img = ["light.jpg","2.jpg"];
   //数组下标
   var i = 0 ;
   function change(){
    document.getElementById("image").src= img[i];
     var date = new Date();
     var span = document.createElement("span");
    if(i== 0){
     i = 1;
     span.innerHTML = date.toLocaleString() + "灯关了" +"<br/>";
    }else{
     i = 0 ;
     span.innerHTML =date.toLocaleString() + "爱心小红灯亮了"+"<br/>";
    }
    document.getElementById("time").parentElement.appendChild(span);
   }
  </script>
 </body>
</html>
>



![这个是点击按钮之后变了的样子](https://img-blog.csdnimg.cn/20191013201811691.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdzb25nOTc=,size_16,color_FFFFFF,t_70)
![这个是改变之前的样子](https://img-blog.csdnimg.cn/20191013201714444.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdzb25nOTc=,size_16,color_FFFFFF,t_70)