<!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. Wwise音频解决方案概述

    Wwise(Wave Works Interactive Sound Engine,Wwise基础知识,wiki)是Audiokinetic公司提供的跨平台游戏音频解决方案,有着高效完整工作流和工具链 ...

  2. 小玩意儿之Gitlab 代码提交日志同步到禅道项目管理系统

    以前都是使用禅道官方推荐的服务器本地扫描的方式,但其实不太方便,需要跟着项目的变化,不断的在配置文件维护项目相应仓库的配置. 然后现在Web Hooks越来越普遍的情况下,想尝试一种新的方式.看了禅道 ...

  3. Azure DevOps Server（TFS) 客户端分析

    Azure DevOps Server(TFS) 是微软公司的软件协作开发管理平台产品,为软件研发.测试.实施提供全流程的服务.作为一款应用服务器产品,他的客户端是什么,在哪里下载客户端?我们在项目实 ...

  4. linux jconsole的远程配置--实测可用

    工作上,经常要对tomcat的java内存配置.tomcat线程池等进行调(luan)优(gao). jconsole 是一个最基础用到的jdk自带的JVM性能查看工具. 最近进行linux测试. 所 ...

  5. vue中使用better-scroll的2种方式简述

    前言 better-scroll官方demo展示:https://ustbhuangyi.github.io/better-scroll/#/examples/en better-scroll官方文档 ...

  6. JWT简要说明

    什么是JWT? JSON Web Token (JWT) 是一种开放标准 (RFC 7519) 定义了一种用于安全传输的紧凑.自包含(注:或自说明) 的Json结构, 被传输的信息可以通过JWT内容中 ...

  7. 来迟了，用Python助你叠猫猫，抢618大红包！

    目录: 0 引言 1 环境 2 需求分析 3 前置准备 4 逛店铺流程回顾 5 代码全景展示 6 总结 0 引言 最近叠猫猫的活动可真是十分的火爆,每天小伙伴们为了合猫猫忙的可谓是如火如荼.为啥要叠猫 ...

  8. checked,unchecked

    static void Main(string[] args) { byte b1 = 100; byte b2 = 250; //Checked try { byte sum = checked ( ...

  9. c# System.Net.Sockets =》TcpListener用法

     private TcpListener _listener;#region 初始化 listener public override void Init() { try { DevInfo.Read ...

  10. 配置IIS网站可以下载.apk/.ipa文件

    添加 扩展名是:.apk MIMI类型是:application/vnd.android.package-archive 扩展名是:.ipa MIMI类型是:application/iphone