简单的颜色过度条

最新推荐文章于 2022-08-30 16:56:55 发布

构建

最新推荐文章于 2022-08-30 16:56:55 发布

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_44560342/article/details/89020251

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

简单的颜色过度条

开发工具与关键技术：JavaScript
作者：陈希雄
撰写时间：2019/4/4

 用JavaScript做一个简单的颜色渐变的过度条，直接看代码
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ysk</title>
</head>
<body>
    <h1>简单的颜色过度条</h1>
    <div id="div1">
    </div>
    <script>
        for (var i = 10; i < 10000; i++) {
            var s = document.createElement("div");//创建div标签
            if (i<10) 
            {
                s.style = "background-color:#00" + i + ";width:50px;height:50px;display:inline-block";
            } else if (i >= 10 && i < 100) {
                s.style = "background-color:#0" + i + ";width:50px;height:50px;display:inline-block";
            } else {
                s.style = "background-color:#" + i + ";width:50px;height:50px;display:inline-block";
            }
            if (i % 10 == 0) //获取十的倍数，再换行
            {
                var s1 = document.createElement("br");
                document.getElementById("div1").appendChild(s1);
            } else {
                document.getElementById("div1").appendChild(s);
            }
            
        }
        
    </script>
</body>
</html>

效果图
在这里插入图片描述