preface
Today use JS whole a random background color multiplication table, a look at how to achieve it ~
First, code demonstration
The code is as follows (example) :
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>The multiplication table</title>
<style>
span {
display: inline-block;
width: 100px;
height: 30px;
margin: 5px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<script>
for (let i = 1; i <= 9; i++) {
for (let j = 1; j < i + 1; j++) {
let n = j * i
document.write(`<span style="background-color:${getRandomColor()};" >${j} x ${i} = ${n}</span>`)}document.write(`<br>`)}function getNum(min, max) {
return Math.floor(Math.random() * (max - min) + 1) + min
}
function getRandomColor() {
let r = getNum(0.255),
g = getNum(0.255),
b = getNum(0.255)
return `rgb(${r}.${g}.${b}) `
}
</script>
</body>
</html>
Copy the code2. Results presentation
conclusion
Just give it a thumbs up and go