通过使用简单的JavaScript的效果实现点击按钮区域变色，并记录变化次数

已于 2022-07-02 00:11:09 修改
阅读量4.8k 收藏 41
点赞数 21
文章标签： javascript 前端 java css3 html
于 2022-07-02 00:08:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tea_tea_/article/details/125567341
版权
这篇博客介绍了一种使用JavaScript实现按钮点击后在蓝色和红色之间切换颜色的效果，并记录颜色变化次数的方法。作者详细讲解了从HTML布局、CSS样式到JavaScript代码的实现过程，包括接收DOM元素、添加点击事件、利用if-else判断改变颜色以及更新计数器的逻辑。适合前端初学者参考学习。
摘要由CSDN通过智能技术生成

前言：本人是新生小白，JavaScript学的很菜，如有错误之处欢迎指出。

目录

1.首先我们先创建一个html文件

2.然后我们在页面中添加一个按钮和变化显示区域

3.然后我们开始写script部分代码

        1.首先我们先接收一下button和p标签

       2. 给按钮添加一个点击事件，并用函数包裹

        3.这样的话点击一下按钮，按钮会变红色，因为我们想要的效果是点击按钮，让颜色在蓝色和红色之间变化，所以我们要继续设置，所以这里我们需要用到if函数

        4.这里的意思是如果var flag = true;成立就执行if里的条件

        5.这里的意思是如果var flag = true;不成立就执行else里的条件

        6.其实到这里我们已经实现了点击按钮切换颜色的效果，然后我们继续写记录颜色变化的代码

        7.现在继续往下写文字部分

         8.这样就实现了所有的效果

   4.最终代码

        小提示：这里如果大家想要一开始按钮就是蓝色，可以在style样式里添加上方代码，效果会更加美观。

1.首先我们先创建一个html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

2.然后我们在页面中添加一个按钮和变化显示区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>我现在是蓝色的</button>
		<p>我是用来记录次数的</p>
	</body>
</html>

3.然后我们开始写script部分代码

        1.首先我们先接收一下button和p标签

<script>
		var sum = document.querySelector('button')
		var p1 = document.querySelector('p')
		
		
	</script>

       2. 给按钮添加一个点击事件，并用函数包裹

<script>
		var sum = document.querySelector('button')
		var p1 = document.querySelector('p')
		sum.onclick = function() {
				sum.style.backgroundColor = 'red';
				sum.innerText = '我现在是红色的'
		}
		
	</script>

        3.这样的话点击一下按钮，按钮会变红色，因为我们想要的效果是点击按钮，让颜色在蓝色和红色之间变化，所以我们要继续设置，所以这里我们需要用到if函数

        

//    这里我们需要用到这个属性var flag = true;

        4.这里的意思是如果var flag = true;成立就执行if里的条件


                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Tea-pd
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
Android实现点击时按钮颜色改变 (附完整源码)

				
			

			

				

					希望我的博客，能帮上你解决学习中工作中所遇到的问题
				

				

					10-29
					
					152
					
				

			

		

		

			
				
Android实现点击时按钮颜色改变  (附完整源码)

			
		

	



                

            
              



	

		

			

				
					
用js实现点击div发生颜色变化并记录点击的次数

				
			

			

				

					weixin_42859796的博客
				

				

					07-08
					
					589
					
				

			

		

		

			
				
CSS样式
	<style>
        	*{
        		margin: 0;
        		padding: 0;
        	}
        	.C{
        	width: 100px;
        	height: 100px;
        	/* background:#f3f6ef;	 */
    		}
	 </st...

			
		

	



              


  
              

                


	

		

			

				
					
使用js实现单击按钮，让他改变颜色

				
			

			

				

					weixin_70079360的博客
				

				

					04-14
					
					4202
					
				

			

		

		

			
				
按钮1按钮2按钮3按钮4按钮5按钮

			
		

	





	

		

			

				
					
js特效点击会变色哦！

				
			

			

				

					10-05
				

			

		

		

			
				
js特效点击会变色哦！js特效点击会变色哦！js特效点击会变色哦！js特效点击会变色哦！js特效点击会变色哦！

			
		

	



		

			
		



	

		

			

				
					
js点击按钮变色

				
			

			

				

					weixin_30268921的博客
				

				

					11-21
					
					1261
					
				

			

		

		

			
				
function changeColor(e){
循环所有的按钮，把他们变回原色
for(var i=1;i<=3;i++){
var menu=document.getElementById("button"+i);id属性
menu.style.backgroundColor="#F0F0F0";
menu.style.color="#000000";
}
...

			
		

	





	

		

			

				
					
按钮点击变色（js小案例）

				
			

			

				

					weixin_45773503的博客
				

				

					04-18
					
					4280
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document&...

			
		

	





	

		

			

				
					
JS——点击事件1（按钮变色）

				
			

			

				

					Andy
				

				

					07-07
					
					1714
					
				

			

		

		

			
				
点击前

点击后：

实现代码：
<body>
    <button id="bnt">按钮</button>
    <script>
        document.getElementById('bnt').onclick = function(){
            document.getElementById('bnt').style.background = 'green';
        }
    </script>


			
		

	





	

		

			

				
					
javascript小案例-----点击按钮变色

				
			

			

				

					weixin_45904557的博客
				

				

					05-20
					
					2309
					
				

			

		

		

			
				
效果如下:





代码如下:

在这个案例中主要用到的是排他思想



html部分

输入我们所需要的按钮个数


	<button>按钮1</button>
	<button>按钮2</button>
	<button>按钮3</button>
	<button>按钮4</button>
	<button>按钮5</button>



css部分


	<style ty.

			
		

	





	

		

			

				
					
js按钮点击变色

				
			

			

				

					qq_45229597的博客
				

				

					08-29
					
					1067
					
				

			

		

		

			
				
【代码】js按钮点击变色。

			
		

	





	

		

			

				
					
JavaScript笔记

				
			

			

				

					shine_my的博客
				

				

					03-13
					
					3446
					
				

			

		

		

			
				
JavaScript笔记

			
		

	





	

		

			

				
					
【JavaScript】点击那个按钮，那个按钮变色，其他方案

				
			

			

				

					咔咔博客
				

				

					01-10
					
					3822
					
				

			

		

		

			
				
author：咔咔

wechat：fangkangfk





方案：

1.先将第一次显示的给给默认样式，也就是添加checked的class

2.如果点击了之后传递一个参数给后台，后台assign到前端，使用参数判断，根据参数就可以判断谁需要加checked

注意：这只适合数据固定的情况下，如果数据不固定还是使用JavaScript来做

...

			
		

	





	

		

			

				
					
JavaScript实用范例词典04-14

				
			

			

				

					03-31
				

			

		

		

			
				
10.25 使用百叶窗效果来切换网页... 337  10.26 加载网页进度条... 339  10.27 满天的星星背景... 340  第11章 图片/滤镜篇.... 342  11.1 禁止图片下载... 342  11.2 定时更换图片... 343  11.3 随机显示图片... ...

			
		

	





	

		

			

				
					
JavaScript单击按钮，改变按钮颜色效果

				
			

			

				

					yi_ZhangMengXin的博客
				

				

					04-14
					
					2767
					
				

			

		

		

			
				
按钮1按钮2按钮3按钮4按钮5

			
		

	





	

		

			

				
					
js点击改变颜色

				
			

			

				

					Lyonahah的博客
				

				

					11-09
					
					1411
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.cd{
				width: 200px;
				height: 20px;
				border: solid 1px black;
				text-align: center;
				float: left;.

			
		

	





	

		

			

				
					
一个javascript 点击后变色

				
			

			

				

					学习asp.net......
				

				

					12-08
					
					1197
					
				

			

		

		

			
				
变色

			
		

	





	

		

			

				
					
JavaScript 按钮排他思想

				
			

			

				

					火星基地
				

				

					10-24
					
					561
					
				

			

		

		

			
				
要求：
有一系列按钮，要求每单击其中一个，该按钮改变样式（以背景颜色为例），其他按钮恢复保持默认样式。
实现思路：

获取所有按钮元素
首先先把其他按钮的背景颜色去掉
再单独设置自己的样式

代码实现：
仅展示<body></body>标签内的内容
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button

			
		

	





	

		

			

				
					
javascript改变按钮颜色

					
最新发布

				
			

			

				

					weixin_41277470的博客
				

				

					08-05
					
					469
					
				

			

		

		

			
				
用JavaScript改变按钮颜色的详细教程
一、流程概述
首先我们需要清楚的是，改变按钮颜色的整个过程可以分为几个简单的步骤。以下是一个表格，展示了实现这个功能的整体步骤：



步骤
描述




1
创建HTML按钮


2
使用CSS定义按钮的样式


3
编写JavaScript代码来监听按钮的点击事件


4
...

			
		

	





	

		

			

				
					
全宇宙最深入的CSS3 姬成 渡一学习记录

				
			

			

				

					m0_46424423的博客
				

				

					07-21
					
					1290
					
				

			

		

		

			
				
全宇宙最深入的CSS3
一、introduction

兼容性前缀





prefix（前缀）
browser




-webkit
chrome/safari


-moz
firefox


-ms
IE


-o
opera


1.历史
更新迭代，兼容性 ---- 加不加前缀
div{
    border-radius: ;
    -webkit-border-radius:;
    -o-border-radius:;
    -moz-border-radius:;
}

兼容性手册

			
		

	





	

		

			

				
					
纯Javascript实现鼠标点击特效（烟花特效）

				
			

			

				

					qq_43562785的博客
				

				

					11-05
					
					9346
					
				

			

		

		

			
				
纯Javascript实现鼠标点击特效（烟花特效）
实现效果
   让我们先来看一看实现效果图吧。如下：
     ![](https://img-blog.csdnimg.cn/2020110514235930.gif#pic_center)

实现步骤

在项目文件夹中新建js文件，例如×××.js
复制代码到×××.js文件中
在html文件head标签中引用js文件<head>
...
<script src="文件名.js"></script>
...
<

			
		

	





	

		

			

				
					
利用js  实现点击后改变颜色

					
热门推荐

				
			

			

				

					weixin_45609811的博客
				

				

					09-23
					
					1万+
					
				

			

		

		

			
				
"show"是我们定义的一个div块
<body>
<div id="show" style="width:400px; height:120px;
		 background-color:red;">
</div>
	<a href="#" onclick="change();" >改变颜色</a>
 
	<script type...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 30

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值