js实现随机文字大小及颜色

最新推荐文章于 2023-01-03 09:15:54 发布

原创最新推荐文章于 2023-01-03 09:15:54 发布 · 2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何使用JavaScript动态地为网页中的文字设置随机字体大小和颜色，从而增加页面的视觉效果。通过生成随机数值并应用到CSS样式中，可以实现文字每次加载时都呈现出不同的样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 用构造函数写 -->
    <input type="button" value="看看" id="btn">
    <p id="p1">Hello how are you</p >

    <script>
        // 创建一个实例化对象
        var change = new change('btn', 'p1');
        // 构造函数传入实参形参
        function change(b, p) {
            this.btn = b;
            this.p1 = p;
            // 创建字体颜色  添加一个方法
            this.creatColor = function () {
                return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
            }
            // 创建字体大小 添加一个方法
            this.creatSize = function () {
                return Math.floor(Math.random() * 40 + 12);
            }
            // call 方法继承
            Son.call(this);

            function Son() {
                var btn = document.getElementById(this.btn);
                var p1 = document.getElementById(this.p1);
                // that变量接收的是this对象
                var aaa = this;
                btn.onclick = function () {
                    p1.style.fontSize = aaa.creatSize() + 'px';
                    //    p1.style.backgroundColor=aaa.creatColor();
                    p1.style.color = aaa.creatColor();

                }
            }

        }
    </script>
</body>

</html>