<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>DIV+CSS+JS实现色彩渐变字体</title>

    <style type="text/css">

        body {

            font: 12px/1.5 Microsoft Yahei;

        }

        h3 {

            padding: 10px;

            margin: 0;

            background-color: #999;

            color: #fff;

            font: 16px/1.5 Microsoft Yahei;

            text-align: center;

        }

        .box {

            position: relative;

            background-color: #fff;

            width: auto;

            margin: 0 auto;

            padding: 0 30px;

            font: 700 20px/1.5 "Microsoft Yahei", Microsoft Yahei;

            border-top: 1px dashed #ccc;

            border-bottom: 1px dashed #ccc;

            height: 30px;

            margin-top: 8px;

        }

        .box a {

            position: absolute;

            font-style: normal;

            white-space: nowrap;

        }

        .f999 {

            color: #999;

        }

        a:link {

            text-decoration: none;

        }

        a:hover {

            text-decoration: underline;

        }

        a:visited {

            text-decoration: none;

        }

    </style>

</head>

<body>

    <div style="width:400px;margin:200px auto;background-color:#f2f2f2;border: 1px dashed #ccc;">

        <h3><strong>CSS多彩渐变字</strong></h3>

        <table width="100%" border="0" cellspacing="0" cellpadding="0">

            <tr>

                <td height="10" colspan="2" align="center"></td>

            </tr>

            <tr>

                <td width="19%" height="30" align="right">文字：</td>

                <td width="81%"><input name="text" type="text" id="ctext" size="30" maxlength="16"

                        style="font:12px Microsoft Yahei" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" /></td>

            </tr>

            <tr>

                <td height="30" align="right">R值：</td>

                <td><select name="Rvalue" style="font:12px Microsoft Yahei" id="rvalue"></select>

                    <span class="f999">RGB颜色中的R值（0-255）</span></td>

            </tr>

            <tr>

                <td height="30" align="right">G值：</td>

                <td><select name="Gvalue" style="font:12px Microsoft Yahei" id="gvalue"></select>

                    <span class="f999">RGB颜色中的G值（0-255）</span></td>

            </tr>

            <tr>

                <td height="30" align="right">B值：</td>

                <td><select name="Bvalue" style="font:12px Microsoft Yahei" id="bvalue"></select>

                    <span class="f999">RGB颜色中的B值（0-255）</span></td>

            </tr>

            <tr>

                <td height="30" align="right">渐变方式：</td>

                <td><select name="ctype" style="font:12px Microsoft Yahei" id="ctype">

                        <option value="0">灰度渐变</option>

                        <option value="1" selected="selected">变化R值</option>

                        <option value="2">变化G值</option>

                        <option value="3">变化B值</option>

                    </select>

                    <span class="f999">相应的数值会强制在0~255之间变化</span></td>

            </tr>

        </table>

        <div class="box" id="box"></div>

        <br />

        <button onclick="javascript:createData()">OK，上色！</button>

        <br />

    </div>

    <script type="text/javascript">

        var rs = document.getElementById("rvalue");

        var gs = document.getElementById("gvalue");

        var bs = document.getElementById("bvalue");

        function init() {

            var str;

            for (var i = 0; i <= 255; i++) {

                var opr = document.createElement("option");

                var opg = document.createElement("option");

                var opb = document.createElement("option");

                opr.innerHTML = i;

                opg.innerHTML = i;

                opb.innerHTML = i;

                switch (i) {

                    case 100:

                        opb.selected = "selected";

                        break;

                    case 200:

                        opg.selected = "selected";

                        break;

                }

                gs.appendChild(opg);

                rs.appendChild(opr);

                bs.appendChild(opb);

            }

            setDiv();

        }

        function setDiv() {

            var font = document.getElementById("ctext").value;

            var dObj = document.getElementById("box");

            dObj.innerHTML = font;

        }

        function createData() {

            var font = document.getElementById("ctext").value;

            var r = rs.options[rs.selectedIndex].text;

            var g = gs.options[gs.selectedIndex].text;

            var b = bs.options[bs.selectedIndex].text;

            var type = document.getElementById("ctype").value;

            if (font == "" || font == "undefined") {

                font = "文字不能为空，使用默认文字";

                document.getElementById("ctext").value = font;

            }

            colorful('box', font, r, g, b, type);

        }

        function colorful(obj, font, r, g, b, type) {

            var boxObj;

            if (typeof (obj) == "string" || typeof (obj) == "number") {

                boxObj = document.getElementById(obj);

            } else {

                boxObj = obj;

            }

            boxObj.innerHTML = "<a href='#'>" + font + "</a>";

            var num = boxObj.getElementsByTagName("a")[0].scrollWidth;

            boxObj.innerHTML = "";

            for (var i = 0; i <= num; i++) {

                var j = i + 1;

                var c = Math.round(255 / num * i);

                switch (Number(type)) {

                    case 0:

                        r = c;

                        g = c;

                        b = c;

                        break;

                    case 1:

                        r = c;

                        break;

                    case 2:

                        g = c;

                        break;

                    case 3:

                        b = c;

                        break;

                }

                var iObj = document.createElement("A");

                iObj.innerHTML = font;

                iObj.style.clip = "rect(auto " + j + "px auto " + i + "px)";

                iObj.style.color = "rgb(" + r + "," + g + "," + b + ")";

                //iObj.href="#"; // 生成的文字超链接

                boxObj.appendChild(iObj);

            }

        }

        init();

    </script>

</body>

</html>

DIV+CSS+JS实现色彩渐变字体的更多相关文章

  1. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  3. HTML,DIV+CSS,js,JQ,UI-WEB前端设计经验

    目前比较全的CSS重设(reset)方法总结   在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览 ...

  4. DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码

    (含上下左右滚动代码) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  5. 美工代码注意事项（html+div+css+js）

    window.location.href的target控制 在使用框架时,经常会对框架子页面进行页面引导的情况,如果只是简单的设置location. href="",会使得整个页面 ...

  6. 27款后台管理页面设计 DIV+CSS+JS

    -----------. 演示: http://www.websjy.com/club/websj ... _61040268/index.htm http://www.websjy.com/club ...

  7. 利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  9. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

随机推荐

  1. PyCharm2019.3.1专业版激活

    PyCharm2019.3.1专业版激活 Python的IDE非常多,但个人感觉PyCharm最好用.JetBrains 致力于为开发者打造最高效智能的开发工具,与2019.12.19带来新的版本20 ...

  2. 【新特性速递】树表格结构由单层 TR 改为 TR-TD-TABLE 层级嵌套！

    由于历史原因,在之前实现树表格时,我们有点偷懒,本来应该是层级嵌套的树结构,被我们硬生生的拉平了,请看: 可以看到,basic目录的子节点和basic是在同一级别的,因为此目录尚未展开,所以这些子节点 ...

  3. 安装pip-9.0.1-py2.py3-none-any.whl

    pip的安装 1.从https://pypi.python.org/pypi/pip#downloads下载所需的.whl文件 2.将下载的文件放入Python的根目录 我的根目录是F:\Python ...

  4. LeetCode 94：二叉树的中序遍历 Binary Tree Inorder Traversal

    题目: 给定一个二叉树,返回它的中序 遍历. Given a binary tree, return the inorder traversal of its nodes' values. 示例: 输 ...

  5. 【shell脚本】批量修改扩展名===modifyExtension.sh

    前提:需切换到需要批量修改扩展名的目录下,运行脚本 [root@VM_0_10_centos shellScript]# cat modifyExtension.sh #!/bin/bash # 编写 ...

  6. 扩展centos7.4虚拟机磁盘大小

    虚拟机分配磁盘40GB,实际系统分区只用了20GB,需要手工扩展到40GB,操作方法如下: 查看磁盘信息(确认主分区只有17GB):[root@test-web1 ~]# df -hFilesyste ...

  7. tensorflow学习笔记——使用TensorFlow操作MNIST数据（1）

    续集请点击我:tensorflow学习笔记——使用TensorFlow操作MNIST数据(2) 本节开始学习使用tensorflow教程,当然从最简单的MNIST开始.这怎么说呢,就好比编程入门有He ...

  8. JVM的监控工具之jmap

    参考博客:https://www.jianshu.com/p/a4ad53179df3 jmap(Memory Map for Java)命令用于生成堆转储快照(一般称为heapdump或dump文件 ...

  9. Ajax异步后台加载Html绑定不上事件

    因项目需要,需要实时从后台动态加载html,开发过程中,遇到事件绑定不上,后来百度一番,大概意思:ajax是异步加载的,页面一开始绑定事件的时候,后台数据还没有传过来,就绑定事件,这个时候找不到这个d ...

  10. rabbitmq 实现多个消费队列

    1.将消费程序复制重新生成一个. 2.channel.BasicQos(0, 1, false); 空闲的先消费