前言：本人是新生小白，JavaScript学的很菜，如有错误之处欢迎指出。
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=!flag
p1.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=!flag
p1.innerText = sum1
}
</script>
</html>
小提示：这里如果大家想要一开始按钮就是蓝色，可以在style样式里添加上方代码，效果会更加美观。
*** ****** ***本人学的很菜，如果有错误欢迎大家指出，但不要来杠
本文转载自: https://blog.csdn.net/tea_tea_/article/details/125567341
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。