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


Posted in Javascript onOctober 19, 2017

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

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 点击切换按钮颜色</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 css styleFloat和cssFloat
Mar 15 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
canvas知识总结
Jan 25 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
javascript实现滚轮轮播图片
Dec 13 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
Vue如何从1.0迁移到2.0
Oct 19 #Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 #Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 #Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 #Javascript
微信小程序组件之srcoll-view的详解
Oct 19 #Javascript
JS实现点击循环切换显示内容的方法
Oct 19 #Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 #Javascript
You might like
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
php blowfish加密解密算法
2016/07/02 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
js实现动态时钟
2020/03/12 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
python文件操作相关知识点总结整理
2016/02/22 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
python使用建议技巧分享(三)
2020/08/18 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
python元组拆包实现方法
2021/02/28 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
共筑中国梦演讲稿
2014/04/23 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
领导干部失职检讨书
2015/05/05 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python