JS实现按钮颜色切换效果


Posted in Javascript onSeptember 05, 2020

本文实例为大家分享了使用参数函数实现按钮颜色切换的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</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 相关文章推荐
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
详解CocosCreator项目结构机制
Apr 14 Javascript
JS实现元素上下左右移动效果
Oct 18 #Javascript
JS去掉字符串中所有的逗号
Oct 18 #Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 #Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 #Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 #Javascript
VUE长按事件需求详解
Oct 18 #Javascript
vue router仿天猫底部导航栏功能
Oct 18 #Javascript
You might like
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
php array_search() 函数使用
2010/04/13 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
tornado 多进程模式解析
2018/01/15 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
中学生评语大全
2014/04/18 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
小学安全汇报材料
2014/08/14 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
我的生日感言
2015/08/03 职场文书
法律服务所工作总结
2015/08/10 职场文书