jQuery和JavaScript分别实现开关灯

最新推荐文章于 2022-07-05 20:11:59 发布

听说你很会玩

最新推荐文章于 2022-07-05 20:11:59 发布

阅读量473

点赞数

分类专栏： jQuery JavaScript ｈｔｍｌ文章标签： javascript js jquery html css

听说你很会玩

本文链接：https://blog.csdn.net/qq_44224698/article/details/104807341

版权

JavaScript 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

ｈｔｍｌ

3 篇文章 0 订阅

订阅专栏

jQuery

0 篇文章 0 订阅

订阅专栏

JavaScript代码实现：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript代码实现开关灯</title>
 <script src="jquery-1.10.2.min.js"></script>
    <script>
       // js实现开灯关灯
        window.onload=function () {
       //窗口加载事件：等网页中所有元素/内容(包括图片，外部引入的文件等)都加载完后才会触发
        var btn1=document.getElementById("btn1");//获取id并赋值给变量btn1
        btn1.onclick=function(){//绑定点击事件
            if (btn1.value=="开灯"){//判断是否为开灯状态
            this.style.backgroundColor='white';//背景颜色
            this.style.color='black';//文字颜色
            this.innerHTML="关灯";//可见文字内容改为“关灯”
            btn1.value="关灯";//按钮赋值“开灯”
            }else{
                this.innerHTML="开灯";//可见文字内容改为“开灯”
                this.style.backgroundColor="black";//背景颜色
                this.style.color='white';//文字颜色
                btn1.value="开灯";//按钮赋值“开灯”
            }
        }}
        </script>

</head>
<body>
<p>js:</p>
<button value="开灯" id="btn1" style="height: 100px;width: 100px">开灯</button>
</body>
</html>

jQuery代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery代码实现开关灯</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
     // jQuery实现开灯关灯
$(document).ready(function(){//网页document加载事件：等网页中的标签元素加载完后会触发
  $('#btn2').click(function () {//绑定点击事件
      if ($('#btn2').val()=='开灯'){//判断是否为开灯状态
          $('#btn2').css({//改变按钮的CSS样式
              'background-Color':'white',//背景颜色
              'color':'black'//文字颜色
          });
        $('#btn2').html('关灯');//视图的文字改为“关灯”
          $('#btn2').val('关灯');//给按钮赋值“关灯”
      }else{
      $('#btn2').css({//改变按钮的CSS样式
          'background-Color':'black',//背景颜色
          'color':'white'//文字颜色
      });
      $('#btn2').html('开灯');//试图的文字改为“开灯”
      $('#btn2').val('开灯');//给按钮赋值“开灯”

      }
  })}
    );

    </script>

</head>
<body>
<p>jQuery：</p>
<button value="开灯" id="btn2" style="height: 100px;width: 100px">开灯</button>
</body>
</html>

开关灯就实现了，欢迎点赞留言关注！！！😋😋😋😋

听说你很会玩

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery和JavaScript分别实现开关灯

JavaScript代码实现： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript代码实现开关灯</title> <script src="jquery-1.10.2.min.js">&...
复制链接

扫一扫