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 相关文章推荐
js实现的二级横向菜单条实例
Aug 22 Javascript
javascript html5实现表单验证
Mar 01 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
js给table赋值的实例代码
Oct 13 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
JS数组方法join()用法实例分析
Jan 18 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
图书管理程序(一)
2006/10/09 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
PHP goto语句用法实例
2019/08/06 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
vue实现循环切换动画
2018/10/17 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
对python:print打印时加u的含义详解
2018/12/15 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
什么是.net
2015/08/03 面试题
2019年分享net面试的经历和题目
2016/08/07 面试题
结婚邀请函范文
2014/01/14 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
立案决定书范文
2015/06/24 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
Python实现自动玩连连看的脚本分享
2022/04/04 Python