用js实现一个随机背景色的九九乘法表

732 阅读1分钟

前言

今天用js整一个随机背景色的九九乘法表,一起来看看怎么实现的吧~


一、代码演示

代码如下(示例):

<!DOCTYPE html>
<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>九九乘法表</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>

二、结果展示

在这里插入图片描述


总结

点个赞再走嘛~