简单的颜色过度条

叁歲伎倆 2022-02-24 14:04 180阅读 0赞

**简单的颜色过度条**

开发工具与关键技术：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>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70]: /images/20220224/68789fb7933c427f8bdfbc2669762bc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70 1]: /images/20220224/97ee6cb52e6741968252a5c0e385319a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关过度自卑的危害

最根本的就是理解问题要从多个角度看，理解问题的能力决定自己的心态，你可以把旁人的无意说出冒犯的话，理解为一时失言，一笑而过可以，你可以把亲人和你的争吵，理解为一时情绪上头...

冷不防/ 2024年04月22日 15:09/ 0 赞/ 39 阅读

相关过度管理的危害

过度管理可能会导致以下危害： 1. 压抑员工创造力：过度管理可能会限制员工的自主性和创造力，员工可能会觉得自己没有被信任和尊重，从而导致他们感到不满和失望。 2. 增加压

- 日理万妓/ 2024年03月16日 14:12/ 0 赞/ 23 阅读

相关 idea改变右侧滚条的颜色

表述不少的程序员都钟爱与idea这块代码编辑器，其原因之一就是界面风格比较好看。也一定有很多朋友和我一样喜欢黑色背景的主题风格吧，可是黑色主题的话有一个问题比较蛋疼就是

约定不等于承诺〃/ 2023年08月17日 17:08/ 0 赞/ 85 阅读

相关 DevExpress Winform ProgressBarControl 修改进度条颜色

> 涛神联合Dxper.Net开发者论坛管理在腾讯课堂开启DevExpress基础和高级培训课程详情可以加群QQ群：294560883 DevExpress 的Prog

Dear 丶/ 2022年12月31日 04:21/ 0 赞/ 373 阅读

相关简单整理HTML 颜色 RGB颜色值

简单整理HTML 颜色 RGB颜色值常用颜色 216 种 Web 安全色常用颜色 <table> <tbody> <tr>

太过爱你忘了你带给我的痛/ 2022年12月27日 11:17/ 0 赞/ 223 阅读

相关简单通用的导航条

1、下划线效果 ![20160707175136947][] <!doctype html> <html> <head> <

谁践踏了优雅/ 2022年09月23日 08:27/ 0 赞/ 121 阅读

相关 Android进度条ProgressBar颜色的渐变设置

Android进度条ProgressBar颜色的渐变设置前言: Android系统并没有为我们提供设置进度条颜色渐变的属性、方法，使用系统的属性方法只能把进度条设置为一

绝地灬酷狼/ 2022年06月09日 09:14/ 0 赞/ 784 阅读

相关 seekbar设置进度条颜色

seekbar设置进度条颜色效果图 ![seekbar][] 资源下载： seekbar设置进度条的颜色-CSDN下载 [http://download.

Myth丶恋晨/ 2022年05月31日 04:06/ 0 赞/ 436 阅读

相关简单的颜色过度条

简单的颜色过度条开发工具与关键技术：JavaScript 作者：陈希雄撰写时间：2019/4/4 用JavaScript做一个简单的颜色

叁歲伎倆/ 2022年02月24日 14:04/ 0 赞/ 181 阅读

相关 js 环形渐变颜色进度条

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

偏执的太偏执、/ 2021年11月18日 00:01/ 0 赞/ 604 阅读