原生js生成随机色卡

前端开发简历项目描述
前端开发 简历模版
web前端你开发简历

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <title>Examples</title>
        <meta name=”keywords” content=”” />
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            a {
                text-decoration: none;
                color: #000;
            }
            li {
                list-style: none;
            }
            #box span {
                float: left;
                width: 80px;
                height: 40px;
                font-size: 12px;
                font-weight: bold;
                line-height: 40px;
                text-align: center;
                color: white;
            }
        </style>
    </head>
    <body>
        <div id=”box”></div>
        <script>
            var box = document.getElementById(‘box’)
            var arr = [
                ‘0’,
                ‘1’,
                ‘2’,
                ‘3’,
                ‘4’,
                ‘5’,
                ‘6’,
                ‘7’,
                ‘8’,
                ‘9’,
                ‘a’,
                ‘b’,
                ‘c’,
                ‘d’,
                ‘e’,
                ‘f’,
            ]
            var timer = setInterval(function() {
                var goudan = randomcolor()
                box.innerHTML +=
                    “<span style=’background:” +
                    goudan +
                    “‘>” +
                    goudan +
                    ‘</span>’
            }, 200)
            function randomcolor() {
                var str = ‘#’
                for (i = 0; i < 6; i++) {
                    str += arr[Math.floor(Math.random() * 16)]
                }
                return str
            }
        </script>
    </body>
</html>
前端开发简单网页
网页设计前端开发和后端开发
网页前端 后端开发
» 本文来自:前端开发者 » 《原生js生成随机色卡》
» 本文链接地址:https://www.rokub.com/8225.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
分享到: 更多 (0)

评论 抢沙发