web 让你的屏幕闪烁-无限闪屏-随机颜色

最新推荐文章于 2024-04-08 10:38:21 发布

原创最新推荐文章于 2024-04-08 10:38:21 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #浏览器 #随机色

js 同时被 2 个专栏收录

5 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文介绍了如何创建一个网页，使其能随机更换背景颜色并持续闪烁。通过简单的HTML和JavaScript代码实现，用户只需将代码保存为.html文件并在浏览器中打开，即可体验到这种无限闪屏效果。

一个网页，随机换颜色，一直闪

效果图:

在这里插入图片描述

实现代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>闪屏</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            overflow: hidden;
        }

        #waprer {
            height: 3000px;
            /*background: red;*/
            background: #7a0000;
            /*-- 颜色过渡时长 --*/
            transition: background 750ms;
        }

        #text {
            padding-top: 250px;
            color: #000000;
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div id="waprer">
    <div id="text">#7a0000</div>
</div>
</body>
<script>
    var // 每多少毫秒换次颜色
        setS = 750,
        tranS = 750,
        waprer = document.getElementById('warper');

    // 永动函数，每750ms 执行一次
    setInterval(function () {
        // 创建存储颜色的容器
        var box = '';
        // 随机出六位的 16进制色值
        for (i = 0; i < 6; i++) {
            /*
            * Math.floor 为取整
            * Math.random() 生成从 0-1的随机数
            * */
            var cool = '0123456abcdef'[Math.floor(Math.random() * 13)];
            box += cool;
        }
        // 拼接色值
        var color = '#' + box;
        // 设置背景颜色
        document.getElementById('waprer').style.background = color;
        // 写入色值文本
        document.getElementById('text').innerText = color;
        // 控制台输出
        console.log(color);
    }, setS)

</script>
</html>