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 相关文章推荐
javascript复制对象使用说明
Jun 28 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
Vue列表渲染的示例代码
Nov 01 Javascript
js实现下拉框二级联动
Dec 04 Javascript
微信小程序保存图片到相册权限设置
Apr 09 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
多重?l件?合查?(二)
2006/10/09 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
js 窗口抖动示例
2013/09/04 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
python图像处理之反色实现方法
2015/05/30 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python csv模块使用方法代码实例
2019/08/29 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
用友笔试题目
2016/10/25 面试题
Java程序员综合测试题
2014/04/25 面试题
人事专员岗位职责范本
2014/03/04 职场文书
中学校庆方案
2014/03/17 职场文书
Redis 限流器
2022/05/15 Redis