前言：本人是新生小白，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里的条件
<script>var sum = document.querySelector('button')var p1 = document.querySelector('p')var flag = true;sum.onclick = function() {if (flag){sum.style.backgroundColor = 'red';sum.innerText = '我现在是红色的'} </script>
5.这里的意思是如果var flag = true;不成立就执行else里的条件
<script>var sum = document.querySelector('button')var p1 = document.querySelector('p')var flag = true;sum.onclick = function() {if (flag){sum.style.backgroundColor = 'red';sum.innerText = '我现在是红色的'} else {sum.style.backgroundColor = 'blue';sum.innerText = '我又变成蓝色的了'}}</script>
这里是一个重点，这个时候需要加上flag=!flag这个代码，让var flag 的值不断在true和false中变化，从而达到我们点击一下按钮，按钮颜色改变的效果，所以这里是实现变化效果的核心，并且我们需要在if判断语句执行完后在编写代码，但不可以写出onclick语句外，不然会因为浏览器执行js代码从上而下的特殊性，最下端的代码与上方相同，会把上方代码效果覆盖，颜色会一直为蓝色
6.其实到这里我们已经实现了点击按钮切换颜色的效果，然后我们继续写记录颜色变化的代码
<script>var sum = document.querySelector('button')var p1 = document.querySelector('p')var flag = true;var sex = 0;sum.onclick = function() {if (flag){sum.style.backgroundColor = 'red';sum.innerText = '我现在是红色的'} else {sum.style.backgroundColor = 'blue';sum.innerText = '我又变成蓝色的了'sex++}flag=!flag}</script>
在这里我们定义一个var sex = 0; 并且在else部分添加一个sex++，因为我们实现的需求是记录颜色变化的次数，如果想记录蓝色就放在else，反之if中。
7.现在继续往下写文字部分
<script>var sum = document.querySelector('button')var p1 = document.querySelector('p')var flag = true;var sex = 0;sum.onclick = function() {if (flag){sum.style.backgroundColor = 'red';sum.innerText = '我现在是红色的'} else {sum.style.backgroundColor = 'blue';sum.innerText = '我又变成蓝色的了'sex++}var sum1 = "蓝色变化了" + sex + '次';flag=!flag}</script>
这里定义一个var sum1，用来记录，至于作用请往下看
<script>var sum = document.querySelector('button')var p1 = document.querySelector('p')var flag = true;var sex = 0;sum.onclick = function() {if (flag){sum.style.backgroundColor = 'red';sum.innerText = '我现在是红色的'} else {sum.style.backgroundColor = 'blue';sum.innerText = '我又变成蓝色的了'sex++}var sum1 = "蓝色变化了" + sex + '次';flag=!flagp1.innerText = sum1}</script>
这里通过innerText属性将sum1的文本内容赋值给p1
8.这样就实现了所有的效果
4.最终代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>button {background-color: blue;color: aliceblue;}</style></head><body><button>我现在是蓝色的</button><p>我是用来记录次数的</p></body><script>var sum = document.querySelector('button')var p1 = document.querySelector('p')var flag = true;var sex = 0;sum.onclick = function() {if (flag){sum.style.backgroundColor = 'red';sum.innerText = '我现在是红色的'} else {sum.style.backgroundColor = 'blue';sum.innerText = '我又变成蓝色的了'sex++}var sum1 = "蓝色变化了" + sex + '次';flag=!flagp1.innerText = sum1}</script></html>
小提示：这里如果大家想要一开始按钮就是蓝色，可以在style样式里添加上方代码，效果会更加美观。
本人学的很菜，如果有错误欢迎大家指出，但不要来杠
