1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title>DIV+CSS+JS实现色彩渐变字体</title>
  7.     <style type="text/css">
  8.         body {
  9.             font: 12px/1.5 Microsoft Yahei;
  10.         }
  11.  
  12.         h3 {
  13.             padding: 10px;
  14.             margin: 0;
  15.             background-color: #999;
  16.             color: #fff;
  17.             font: 16px/1.5 Microsoft Yahei;
  18.             text-align: center;
  19.         }
  20.  
  21.         .box {
  22.             position: relative;
  23.             background-color: #fff;
  24.             width: auto;
  25.             margin: 0 auto;
  26.             padding: 0 30px;
  27.             font: 700 20px/1.5 "Microsoft Yahei", Microsoft Yahei;
  28.             border-top: 1px dashed #ccc;
  29.             border-bottom: 1px dashed #ccc;
  30.             height: 30px;
  31.             margin-top: 8px;
  32.         }
  33.  
  34.         .box a {
  35.             position: absolute;
  36.             font-style: normal;
  37.             white-space: nowrap;
  38.         }
  39.  
  40.         .f999 {
  41.             color: #999;
  42.         }
  43.  
  44.         a:link {
  45.             text-decoration: none;
  46.         }
  47.  
  48.         a:hover {
  49.             text-decoration: underline;
  50.         }
  51.  
  52.         a:visited {
  53.             text-decoration: none;
  54.         }
  55.     </style>
  56. </head>
  57.  
  58. <body>
  59.     <div style="width:400px;margin:200px auto;background-color:#f2f2f2;border: 1px dashed #ccc;">
  60.         <h3><strong>CSS多彩渐变字</strong></h3>
  61.         <table width="100%" border="0" cellspacing="0" cellpadding="0">
  62.             <tr>
  63.                 <td height="10" colspan="2" align="center"></td>
  64.             </tr>
  65.             <tr>
  66.                 <td width="19%" height="30" align="right">文字：</td>
  67.                 <td width="81%"><input name="text" type="text" id="ctext" size="30" maxlength="16"
  68.                         style="font:12px Microsoft Yahei" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" /></td>
  69.             </tr>
  70.             <tr>
  71.                 <td height="30" align="right">R值：</td>
  72.                 <td><select name="Rvalue" style="font:12px Microsoft Yahei" id="rvalue"></select>
  73.                     <span class="f999">RGB颜色中的R值（0-255）</span></td>
  74.             </tr>
  75.             <tr>
  76.                 <td height="30" align="right">G值：</td>
  77.                 <td><select name="Gvalue" style="font:12px Microsoft Yahei" id="gvalue"></select>
  78.                     <span class="f999">RGB颜色中的G值（0-255）</span></td>
  79.             </tr>
  80.             <tr>
  81.                 <td height="30" align="right">B值：</td>
  82.                 <td><select name="Bvalue" style="font:12px Microsoft Yahei" id="bvalue"></select>
  83.                     <span class="f999">RGB颜色中的B值（0-255）</span></td>
  84.             </tr>
  85.             <tr>
  86.                 <td height="30" align="right">渐变方式：</td>
  87.                 <td><select name="ctype" style="font:12px Microsoft Yahei" id="ctype">
  88.                         <option value="0">灰度渐变</option>
  89.                         <option value="1" selected="selected">变化R值</option>
  90.                         <option value="2">变化G值</option>
  91.                         <option value="3">变化B值</option>
  92.                     </select>
  93.                     <span class="f999">相应的数值会强制在0~255之间变化</span></td>
  94.             </tr>
  95.         </table>
  96.         <div class="box" id="box"></div>
  97.         <br />
  98.         <button onclick="javascript:createData()">OK，上色！</button>
  99.         <br />
  100.  
  101.     </div>
  102.     <script type="text/javascript">
  103.         var rs = document.getElementById("rvalue");
  104.         var gs = document.getElementById("gvalue");
  105.         var bs = document.getElementById("bvalue");
  106.  
  107.         function init() {
  108.             var str;
  109.             for (var i = 0; i <= 255; i++) {
  110.                 var opr = document.createElement("option");
  111.                 var opg = document.createElement("option");
  112.                 var opb = document.createElement("option");
  113.                 opr.innerHTML = i;
  114.                 opg.innerHTML = i;
  115.                 opb.innerHTML = i;
  116.                 switch (i) {
  117.                     case 100:
  118.                         opb.selected = "selected";
  119.                         break;
  120.                     case 200:
  121.                         opg.selected = "selected";
  122.                         break;
  123.                 }
  124.                 gs.appendChild(opg);
  125.                 rs.appendChild(opr);
  126.                 bs.appendChild(opb);
  127.             }
  128.             setDiv();
  129.         }
  130.  
  131.         function setDiv() {
  132.             var font = document.getElementById("ctext").value;
  133.             var dObj = document.getElementById("box");
  134.             dObj.innerHTML = font;
  135.         }
  136.  
  137.         function createData() {
  138.             var font = document.getElementById("ctext").value;
  139.             var r = rs.options[rs.selectedIndex].text;
  140.             var g = gs.options[gs.selectedIndex].text;
  141.             var b = bs.options[bs.selectedIndex].text;
  142.             var type = document.getElementById("ctype").value;
  143.             if (font == "" || font == "undefined") {
  144.                 font = "文字不能为空，使用默认文字";
  145.                 document.getElementById("ctext").value = font;
  146.             }
  147.             colorful('box', font, r, g, b, type);
  148.         }
  149.  
  150.         function colorful(obj, font, r, g, b, type) {
  151.             var boxObj;
  152.             if (typeof (obj) == "string" || typeof (obj) == "number") {
  153.                 boxObj = document.getElementById(obj);
  154.             } else {
  155.                 boxObj = obj;
  156.             }
  157.             boxObj.innerHTML = "<a href='#'>" + font + "</a>";
  158.             var num = boxObj.getElementsByTagName("a")[0].scrollWidth;
  159.             boxObj.innerHTML = "";
  160.             for (var i = 0; i <= num; i++) {
  161.                 var j = i + 1;
  162.                 var c = Math.round(255 / num * i);
  163.                 switch (Number(type)) {
  164.                     case 0:
  165.                         r = c;
  166.                         g = c;
  167.                         b = c;
  168.                         break;
  169.                     case 1:
  170.                         r = c;
  171.                         break;
  172.                     case 2:
  173.                         g = c;
  174.                         break;
  175.                     case 3:
  176.                         b = c;
  177.                         break;
  178.                 }
  179.                 var iObj = document.createElement("A");
  180.                 iObj.innerHTML = font;
  181.                 iObj.style.clip = "rect(auto " + j + "px auto " + i + "px)";
  182.                 iObj.style.color = "rgb(" + r + "," + g + "," + b + ")";
  183.                 //iObj.href="#"; // 生成的文字超链接
  184.                 boxObj.appendChild(iObj);
  185.             }
  186.         }
  187.         init();
  188.     </script>
  189. </body>
  190.  
  191. </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. UE4中使用RenderDoc截帧

    RenderDoc(src,doc,ue4 doc,ue4文档)是一个独立的开源图形调试器,通过采集和检查GPU上运行的单个帧,来定位图形bug和优化性能 RenderDoc支持任何在Win7.Win ...

  2. 【Java语言特性学习之三】Java4种对象引用

    为了更灵活的控制对象的生命周期,在JDK1.2之后,引用被划分为(引用的级别和强度由高到低)强引用.软引用.弱引用.虚引用四种类型,每种类型有不同的生命周期,它们不同的地方就在于垃圾回收器对待它们会使 ...

  3. 物联网架构成长之路(43)-k8s从入门到放弃

    0. 前言 这段时间要入门一下CI/CD了,以前简单的了解过Jenkins,现在要把以下的这个图的架构搭建起来.国外可能一两个命令就安装完成的事情,我折腾了2天多,真的差点放弃了. 1. 安装Virt ...

  4. 自己搭建 NuGet.Server 环境

    1. 官网 https://github.com/NuGet/NuGet.Server 下载最新的源代码 VS 发布到指定的目录,比如发布到我本地 D:\Workspace\DeploymentPro ...

  5. 机器学习（十）-------- 降维(Dimensionality Reduction)

    降维(Dimensionality Reduction) 降维的目的:1 数据压缩 这个是二维降一维 三维降二维就是落在一个平面上. 2 数据可视化 降维的算法只负责减少维数,新产生的特征的意义就必须 ...

  6. Winform 窗体皮肤美化_IrisSkin

    1 先把IrisSkin2.dll文件添加到当前项目引用(解决方案资源管理器->当前项目->引用->右键->添加引用,找到IrisSkin2.dll文件.....之后就不用我说 ...

  7. MySQL 8.0.18安装教程(windows 64位)

    目录 1-先去官网下载点击的MySQL的下载​ 2-配置初始化的my.ini文件的文件3-初始化MySQL4-安装MySQL服务 + 启动MySQL 服务5-连接MySQL + 修改密码 * 第一项 ...

  8. xcodeinstruments 内存检测

    http://blog.csdn.net/totogo2010/article/details/8233565

  9. APP弱网测试方法

    常用工具 •利用抓包工具   -Fiddler/Charles•使用chrome浏览器的开发者工具•使用手机自带的限速功能(只适用IOS设备)•需要硬件设备(路由器或者网卡)   -NEWT/ATC/ ...

  10. MySQL Execution Plan--COUNT相关测试

    COUNT全表记录 在MySQL中,相同的SQL不同的存储引擎执行计划不同: 对于MyISAM引擎,由于使用表锁进行并发控制,同一时间点多个并发线程执行相同查询获得的结果相同,且MyISAM存储引擎专 ...