JS基础练习|点击按钮更改背景色

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./styles.css">
</head>
<body><div class="color-changer"><h1>随机背景</h1><p id="color-name"></p><button id="change-color-btn">重随</button><script src="./script.js"></script></div></body>
</html>

body {font-family: 'Roboto', sans-serif;
}.color-changer{margin:30px auto 0;width:500px;height:500px;text-align: center;border:1px solid #ffffff;padding:10px;
}
h1,p{color:#ffffff;border-radius:10px;border:2px solid #ffffff;margin:0 auto 10px;padding:10px;width:200px;
}

// 定义颜色数组
const darkColorsArr = ["#2C3E50","#34495E","#2C2C2C","#616A6B","#4A235A","#2F4F4F","#0E4B5A","#36454F","#2C3E50","#800020",
];
// 定义颜色索引
let colorIndex = 0;
// 获取body
const body = document.querySelector("body");
// 获取展示颜色名的标签
const colorName = document.querySelector("#color-name");
// 获取按钮标签
const changeColorBtn= document.querySelector("#change-color-btn");
// 页面启动时执行的操作
initializeColors();
// 展示当前的颜色名
initializeColorName();
// 初始化颜色的操作
function initializeColors() {randColorIndex();body.style.backgroundColor=darkColorsArr[colorIndex]console.log(darkColorsArr[colorIndex])
}
// 随机获取一个颜色索引
function randColorIndex() {colorIndex= Math.floor(Math.random() * darkColorsArr.length);
}
// 初始化颜色名的操作
function initializeColorName(){colorName.innerHTML="当前颜色名:"+darkColorsArr[colorIndex]
}// 给按钮绑定函数
changeColorBtn.onclick=changeColor
function changeColor(){// 重随一个颜色randColorIndex()body.style.backgroundColor=darkColorsArr[colorIndex]colorName.innerHTML="当前颜色名:"+darkColorsArr[colorIndex]
}