简单的颜色过度条

叁歲伎倆 2022-02-24 14:04 266阅读 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 条评论，266人围观）

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

相关阅读

相关过度流程化的危害

过度流程化可能会带来以下危害： 1. 创造力不足：过度流程化可能会限制员工的自由度和创造力，导致创新能力不足。 2. 不适应变化：当环境变化时，过度流程化可能导致组织难以

矫情吗；*/ 2024年03月16日 14:52/ 0 赞/ 85 阅读

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

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

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

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

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

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

相关 css 过度动画

方式一： > HTML代码: > > <div class="box1"> > <div class="box2"> >

系统管理员/ 2022年11月13日 10:27/ 0 赞/ 195 阅读

相关简单通用的导航条

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

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

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

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

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

相关 seekbar设置进度条颜色

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

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

相关简单的颜色过度条

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

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

相关 Vue 过度效果

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CS

ゝ一世哀愁。/ 2022年01月05日 17:39/ 0 赞/ 256 阅读

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

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

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