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

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

效果图:

web 让你的屏幕闪烁-无限闪屏-随机颜色_第1张图片

实现代码:


<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">#7a0000div>
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>

用法很简单。
>复制代码
>新建txt文件
>粘贴进去
>修改文件后缀为.html
>拖到浏览器打开
>开始享受

你可能感兴趣的:(js,html)