<!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. golang实战--家庭收支记账软件（面向过程）

    1.开发流程 2.目标 模拟实现一个基于文本界面的(家庭记账软件) : 初步掌握编程技巧和调试技巧: 主要包含以下知识点:局部变量和基本数据类型.循环语句.分支语句.简单屏幕格式输出.面向对象编程: ...

  2. multer 文件后缀名

    我的代码是这样写的. var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uplo ...

  3. 怎么做web接口测试

        这就需要开发提供的接口文档了,接口文档和功能测试的需求说明书的功能是一样的.包括:接口说明.调用的url,请求方式(get or post),请求参数.参数类型.请求参数说明,返回结果说明.有 ...

  4. 一个简单的 WPF 程序，用于显示实时时间

    直接贴代码了: TimeShowerWindow.xaml <Window x:Class="HelloWorld.TimeShowerWindow" xmlns=" ...

  5. JWT攻击手册

    JSON Web Token(JWT)对于渗透测试人员而言可能是一种非常吸引人的攻击途径,因为它们不仅是让你获得无限访问权限的关键,而且还被视为隐藏了通往以下特权的途径:特权升级,信息泄露,SQLi, ...

  6. SpringBoot多数据源动态切换数据源

    1.配置多数据源 spring: datasource: master: password: erp_test@abc url: jdbc:mysql://127.0.0.1:3306/M201911 ...

  7. Java匹马行天下之学编程的起点——走进编程的殿堂

    学编程的起点——走进编程的殿堂 前言: 知其然,知其所以然,努力固然重要,但是思维的提升会让你事半功倍,我会用我花费时间换来的“思维”带更多的朋友入门,让你们明明白白学编程,学编程,不迷茫. 转变思维 ...

  8. c# Equal函数 and 运算符'==' （原发布 csdn 2017年10月15日 20:39:26）

    1.==.!=.<.>.<= 和>= 运算符为比较运算符(comparison operator).C#语言规范5.0中文版中比较运算符的描述如下: 2.通用类型系统 3.值类 ...

  9. ASP.NET Core appsettings.json 文件

    ASP.NET Core appsettings.json 文件 在本节中,我们将讨论 ASP.NET Core 项目中appsettings.json文件的重要性. 在以前的 ASP.NET 版本中 ...

  10. Jsp和Servlet有什么区别？

    Servlet接口中有哪些方法? Servlet接口定义了5个方法,其中前三个方法与Servlet生命周期相关: void init(ServletConfig config) throws Serv ...