<!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. Jupyter notebook中的.ipynb文件转换成python的.py文件

    转自:https://blog.csdn.net/wyr_rise/article/details/82656555 Jupyter notebook中.py与.ipynb文件的import问题   ...

  2. Erlang语言基础总结

    1.=操作符(模式匹配) 当看到一个表达式像X = 123时,它的意思看似“将整数123赋予变量X”,但这种解读是不 正确的.=不是一个赋值操作符,它实际上是一个模式匹配操作符.与其他函数式编程语言一 ...

  3. MySQL如果频繁的修改一个表的数据，那么这么表会被锁死。造成假死现象。

    MySQL如果频繁的修改一个表的数据,那么这么表会被锁死.造成假死现象. 比如用Navicat等连接工具操作,Navicat会直接未响应,只能强制关闭软件,但是重启后依然无效. 解决办法: 首先执行: ...

  4. html点击弹出QQ添加好友的窗口

    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1377732948&q ...

  5. 如何忽略Findbugs的bug

    如何忽略Findbugs的bug 除了用xml的形式去忽略一些文件和bug.最好用的还是注解: 下面的方法会有MT_CORRECTNESS和STYLE的bug.注解忽略方法为: @edu.umd.cs ...

  6. 关于 ReadOnlySpan<T>

    using System; using System.Linq; namespace BenchmarkAndSpanExample { public class NameParser { publi ...

  7. MySQL性能诊断与调优

    LAMP 系统性能调优,第 3 部分: MySQL 服务器调优http://www.ibm.com/developerworks/cn/linux/l-tune-lamp-3.html LoadRun ...

  8. 深入理解TCP/IP应用层

    TCP/IP四层模型分为: 应用层,传输层(只关注起点(发送者)和终点(接收者)),网络层(规划出一条或几条路线),数据链路层(关注两个相邻点之间怎么传输)   协议   应用层 DNS,URI,HT ...

  9. 这些Python库真的很“冷”，但是却很强大

    Python是一种很棒的编程语言.事实上,它还是世界上发展最快的编程语言之一.它一次又一次证明了它在数据科学职位中的实用性.整个Python及其库的生态系统使其成为全世界用户(初学者和高级)的合适选择 ...

  10. Linux磁盘系统——磁盘系统简介

    Linux磁盘系统——磁盘系统简介 摘要:本文主要学习了Linux系统中有关磁盘的一些知识. 文件系统 说明 硬盘是用来存储数据的,可以将其想象成柜子,只不过柜子是用来存储衣物的.新买来的硬盘,通常要 ...