用JS生成区间[a,b]随机数和随机颜色

小粗腿Cc

已于 2022-03-29 09:27:16 修改

阅读量456

点赞数 1

文章标签： vscode javascript 前端 html5

于 2022-03-27 15:26:34 首次发布

本文链接：https://blog.csdn.net/weixin_45249263/article/details/123774391

版权

本文有四个例子：

①返回一个a-b的随机数；

②返回一个rgb格式的随机颜色；

③利用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>05-09 @函数封装</title>
    <style>
        button {
            font-weight: 800;
            border: 1px solid black;
        }

        em {
            font-style: normal;
        }
    </style>
</head>

<body>
    <h2>@函数封装</h2>

    <!-- ----------------------------------------05-------------------------------------------------------- -->
    <h3>05、获取并返回[a, b] 之间的随机数， 要求使用箭头函数</h3>
    <script>
        // 非ES6箭头函数版本-----------------------------------------------05
        // function getRandom(a, b) {
        //     var randomValue = a + Math.round(Math.random() * (b - a))
        //     return randomValue
        // }
        // var value = getRandom(1,100)
        // document.write("随机数:",value)

        // ES6箭头函数版本
        var getRandom = (a, b) => {
            var randomValue = a + Math.round(Math.random() * (b - a))
            document.write("随机数:", randomValue)
        }
        getRandom(1, 100)
    </script>
    <!-- --------------------------------------06---------------------------------------------------------- -->
    <br>
    <h3>06、获取并返回随机颜色， 如rgb(123, 45, 67)</h3>
    <button id="btn">切换颜色</button>
    <em id="em2"></em>
    <script>
        // 定义0-255的随机数
        var btn = document.querySelector("#btn")
        var em2 = document.querySelector("#em2")
        btn.onclick = function () {
            function getRandomColor() {
                var red = parseInt(Math.random() * 256)
                var green = parseInt(Math.random() * 256)
                var blue = parseInt(Math.random() * 256)
                var randomColor = `rgb(${red},${green},${blue})`
                return randomColor
            }
            btn.style.background = getRandomColor()
            em2.innerText = getRandomColor()
        }
    </script>

    <!-- ------------------------------------07------------------------------------------------------------ -->
    <br>
    <h3>07、判断一个数是否为素数（ 除了1和自身外， 不能被任何数整除）</h3>
    <input type="text" id="inpPrime">
    <button id="btn2">判断</button>
    <em id="judge">请输入一个整数</em>
    <script>
        var input = document.querySelector("#inpPrime")
        var em = document.querySelector("#judge")
        var btn2 = document.querySelector("#btn2")
        // 封装一个判断所输入的数字是否素数的函数
        function getPrimeNumber(n) {
            for (var i = 2; i <= n - 1; i++) {
                if (n === 1) {
                    return false
                } else if (n % i === 0) {
                    return false
                }
            }
            return true
        }
        btn2.onclick = function () {
            if (getPrimeNumber(input.value)) {
                em.innerText = "该数是一个素数"
            } else {
                em.innerText = "该数不是一个素数"
            }
        }
    </script>

    <!-- ----------------------------------09-------------------------------------------------------------- -->
    <br>
    <h3>09、输出九九乘法表</h3>
    <script>
        // 09、输出九九乘法表
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                document.write(j, "X", i, "=", i + j, "&nbsp;&nbsp;")
            }
            document.write("<br>")
        }
    </script>
</body>

</html>