JS实现的按钮点击颜色切换功能示例

2019/6/27 20:36:43

本文主要是介绍JS实现的按钮点击颜色切换功能示例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

本文实例讲述了JS实现的按钮点击颜色切换功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.zyiz.net 点击切换按钮颜色</title>
</head>
<body>
  <button id="btn1" onclick="btn(1)">按钮1</button>
  <button id="btn2" onclick="btn(2)">按钮2</button>
  <button id="btn3" onclick="btn(3)">按钮3</button>
  <script>
    //设置背景颜色
    //如果设置参数函数会节省函数数量吧
    //设置flag+参数函数
    flag = "btn1";
    function btn1(){
      document.getElementById("btn2").style.color = "black";
      document.getElementById("btn3").style.color = "black";
      document.getElementById("btn1").style.color = "red";
    }
    function btn2(){
      document.getElementById("btn1").style.color = "black";
      document.getElementById("btn2").style.color = "red";
      document.getElementById("btn3").style.color = "black";
    }
    function btn3(){
      document.getElementById("btn1").style.color = "black";
      document.getElementById("btn2").style.color = "black";
      document.getElementById("btn3").style.color = "red";
    }
    function btn(num){
      if(num == 1){
        document.getElementById(flag).style.color = "black";
        document.getElementById(flag).style.backgroundColor = "white";
        document.getElementById("btn1").style.color = "red";
        document.getElementById("btn1").style.backgroundColor = "blue";
        flag = "btn1";
      }
      if(num == 2){
        document.getElementById(flag).style.color = "black";
        document.getElementById(flag).style.backgroundColor = "white";
        document.getElementById("btn2").style.color = "red";
        document.getElementById("btn2").style.backgroundColor = "blue";
        flag = "btn2";
      }
      if(num == 3){
        document.getElementById(flag).style.color = "black";
        document.getElementById(flag).style.backgroundColor = "white";
        document.getElementById("btn3").style.color = "red";
        document.getElementById("btn3").style.backgroundColor = "blue";
        flag = "btn3";
      }
    }
  </script>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。



这篇关于JS实现的按钮点击颜色切换功能示例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程