前言：本人是新生小白，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文件

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

	
		
		
	
	
		我现在是蓝色的
		
我是用来记录次数的
	

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

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

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

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

        

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

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

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

                这里是一个重点，这个时候需要加上flag=!flag这个代码，让var flag  的值不断在true和false中变化，从而达到我们点击一下按钮，按钮颜色改变的效果，所以这里是实现变化效果的核心，并且我们需要在if判断语句执行完后在编写代码，但不可以写出onclick语句外，不然会因为浏览器执行js代码从上而下的特殊性，最下端的代码与上方相同，会把上方代码效果覆盖，颜色会一直为蓝色

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

        在这里我们定义一个var sex = 0; 并且在else部分添加一个sex++，因为我们实现的需求是记录颜色变化的次数，如果想记录蓝色就放在else，反之if中。

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

                这里定义一个var sum1，用来记录，至于作用请往下看

        这里通过innerText属性将sum1的文本内容赋值给p1

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

   4.最终代码

	
		
		
		
	
	
		我现在是蓝色的
		
我是用来记录次数的
	


	

        

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

                                                                    本人学的很菜，如果有错误欢迎大家指出，但不要来杠