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 DOM学习第六章 表单实例
Feb 19 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
微信小程序实现原生步骤条
Jul 25 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php下通过POST还是GET来传值
2008/06/05 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
canvas的神奇用法
2017/02/03 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
python利用微信公众号实现报警功能
2018/06/10 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
毕业自我评价范文
2013/11/17 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
党日活动总结
2014/05/07 职场文书
研究生导师推荐信
2014/09/06 职场文书
离婚案件答辩状
2015/05/22 职场文书
暂住证明怎么写
2015/06/19 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
win10安装配置nginx的过程
2021/03/31 Servers