美化 - 编程学习

Posts Tagged ‘美化’

美化html段落文本 Ⅰ

星期三, 06月 4th, 2008

上篇已经说了在第五篇会开始讲CSS,刚开始讲不能讲得复杂,我还是由浅入深,一步步来.还是那句话:先用起来,然后再去研究.即然我第一篇讲de是段落,那我这篇初讲CSS当然也还是要从段落开始,让我de段落先漂亮起来.

在没有讲CSS之前我先去想一下什么样de段落才看起来才是最舒服de？如果大家一时还没有什么想法或是还不清楚如何去分析这个问题不妨先看一下《网页设计技巧系列之一浅谈文本排版》.不论如何至少我de小学老师告诉我每一段de第一行应该空两个字.这可能是我接受到de第一个关于如何划分段落de方法.并且可能更多人已经产生了思维定式,认为段落必需要首行空两格.而我则认为区分段落de首要素同段距,其次才能是段落首行de处理.而首行de处理是否只有缩进两字呢？我个人认为不是,因为我还可以用“首字下沉”、“首行突出两字”等来表现.有人会说:“首字下沉我就见过,比如作者de博客就用了这个效果,但是首行突出两字似乎有点奇怪.”然而事实上首行突出两字必不是作者发明de,在中国古代de奏本上就常采用这种格式,不同de是因为他们常需要在行首写上一些颂语,而要表达这种颂语就需要抬高其地位,比如“君”“圣上”等字眼,所以才会突出两字,久之则形成了一种特别de排版形式,这种形式现在de文体是用得少了,不过大家可以多多了解一下,方便以后表达不同de文体时可以用得着.

即然段距是段落区分de第一要素,那么我就先来解决这个段距dede样式问题.即然是一段一段de那么我每一段都是由一组组合而成de,而我deCSS只要通过对这个段落标签de描述就可以实现我所需要de效果了.那么基本形式是:

p {这里是样式描述内容}

我注意到了,在CSS中这个段落标签是不需要加尖括号de,只需要一个”p”即可以了.所有de标签都是如此处理.那么我需要给每个段落设个段距,这里我有两个描述属性,一个是padding,另一个是margin,这两个表现de效果看起来有点像,但是却有着本质上de区别,如果我把段落表示成盒子,在这个盒子里装着一些东西,padding就是这些东西与盒子内侧边de距离,而margin则是盒子与盒子之间de距离.这里很显然,我里应该是使用margin.写法是:margin:1em 0;这是一种简写de方法,如果写全了应该是:margin-top:1em; margin-right:0; margin-bottom:1em; margin-left:0; 这很明显太冗余了,所以一般我通常是写成:margin:1em 0 1em 0; 这里de顺序是上右下左,由于上下de数值是一样de,左右de数值是一样de,那么就可以再缩写成:margin:1em 0; 这里deem是指相对长度单位,相对于当前对象内文本de字体尺寸.有关于单位de知识请查阅沈苏小雨编制de《CSS2.0中文手册》.那为什么要用em而不用px或是pt呢,这是因为我现在de流览器大多都有字体放大de功能,这也是方便读者de能看得更清楚文字内容,那么如果我用px来设定段距那么当字体放大时段距却不会变动,那么当放大到一定数值时这个段距de特性也就不存在了.所以我使用em这个单位,也就是希望当字体变大时段距也跟着相应变大,方便识别.

这里值得注意de是,当我使用marginde时候两个段落之间demargin会有重叠,那么看上图中右侧de图我可以发现在两段之间demargin是被重叠了原本应该是两个高度相加de结果还是一个高度,但是上图中间de示意padding却没有重叠他们de高度是相加de,这点大家要注意到,这不是什么BUG,而是一种特性.那么我就写一句CSS来设定我de段落:

p {margin:1em 0;}

说了段距自然就会说到行距,有看过《网页设计技巧系列之一浅谈文本排版》de朋友就会明白行距de重要性,那么您是否有给自己de页面设置行距呢,是如何设置de？设置行距有一个专门de属性:line-height,这个应该称之为行高.因为我要设定de是一行de高度,而不是行与行之间de距离.这也就是为什么我总发现Photoshop里设置行距de数据与做网页设置de数值不一样de原因了.但是行距依然是可以通过我设定de行高最终产生,所以方法不同,但是目标是一致de.一般我de行高一定是要超过字体高度de,否则行与行之间就会重叠,当然我不排除使用这种式做一些特别de效果,但是至少在阅读文本上我需要行行清楚.行距不宜太大,太大了阅读效率不高,如果太小了又容易读错行.所以一般行高不应超过两个字de高度.振之最常用de是1.6em~1.8em之间,如果宽度很大,我就需要加大行距不然我很容易读错行,如果宽度小de时候行距过大则失去了阅读de效率.那么我把刚才de段落deCSS做一下增加,标注一下我de行距:

p {margin:1em 0; line-height:1.6em; }

这样对于一个基本de段落设置就已经完成了,如果需要给这个段落加个首行缩进,还可以为这个段落设置一下字体,字大小,字样式,色彩等等:

p {margin:1em 0; text-indent:2em; font:normal normal 12px/1.6em “宋体”; color:#000; }

这里关于字体de属性也是个缩写形式,顺序是:“font : font-style || font-variant || font-weight || font-size || line-height || font-family ”,这些知识在沈苏小雨deCSS2.0中文手册中都有讲述.我这里就不重复了.这里decolor是文字de色彩,#后面de数值应该是6位,可以直接复制Photoshop拾色板里de数值.但是我也常常会缩写.缩写方式是,奇数位与偶数位de值相同时即可合并为3位de色值.比如:#4488cc,可以缩写为#48c,如果需要首突出,那么不光需要把text-indentde值设为负值,还需要修改paddingde数值,因为突出去de也就是超出了内容区那么如果padding区没有空间那么这两个突出去de字就无法显示.那我再给出一个首行突出两字deCSS

p {margin:1em 0; padding:0 0 0 2em; text-indent:-2em; font:normal normal 12px/1.6em “宋体”; color:#000; }

有关美化段落文本de内容先讲到这里,下一篇讲解首字下沉de做法以及注意事项!

Tags: 段落文本, 美化
Posted in HTML/CSS | No Comments »

用css alpha 滤镜实现input file 样式美化代码

星期三, 06月 4th, 2008

在WEB上传文件时,要用到上传框:
<input type=”file” id=”f” name=”f”>
这东东在IE(其他偶没经过测试)中是一个非常特殊de对象. 如果是您手动写入de或其他对象经过某些事件触发填入de值 ,由于安全问题,在进行提交表单时,往往会被清空,所以上传失败. 简单点说,除非您de鼠标亲自点到了上传框f上,IE才会给您上传文件!
哪怕您将 f deonclick句柄赋给某个对象,如:
<input type=”file” id=”f” name=”f”>
<input onclick=”f.click()” value=”点击”>
您 “点击” 后,同样会弹出文件选择对话框,可惜失望地:您照样不能上传文件! 怎么办呢？看下这段:
<BODY onmousemove=”f.style.pixelLeft=event.x-200;f.style.pixelTop=event.y-10;”>
<input type=”text”><input type=”button” onmousemove=”">
<input type=”file” id=”f” name=”f” style=”position:absolute;”>
</BODY>
随便点击鼠标,看到效果了吧？基于上面de思路,偶们就可以把它弄到一个button下面就OK了!!
点击运行可以看到效果: <style> input{border:1px solid green;} </style> <BODY> <form method="post" action="" enctype="multipart/form-data"> <input type="text" id="txt" name="txt"> <input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="请选择文件" size="30"> <input type="file" id="f" name="f" style="position:absolute;" size="1" onChange="txt.value=this.value"> <INPUT TYPE="submit"> </form> </BODY> 
[Ctrl A 全选提示:您可先修改部分相关代码,再按运行]

为了达到真正模拟de效果,还得要把f给隐藏,加个不透明dealpha 滤镜即可,再加上 hidefocus 属性,隐藏fde虚线:
点击运行可以看到效果: <style> input{border:1px solid green;} </style> <BODY> <form method="post" action="" enctype="multipart/form-data"> <input type="text" id="txt" name="txt"> <input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="请选择文件" size="30" onclick="f.click()"> <input type="file" id="f" onchange="txt.value=this.value" name="f" style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus> <INPUT TYPE="submit"> </form> </BODY> 
[Ctrl A 全选提示:您可先修改部分相关代码,再按运行]
可以看下opacity=0改为稍大些de效果.
OK了,现在您就可以控制它们de样式、位置了…

Tags: alpha, css, File, input, 样式, 滤镜, 美化
Posted in HTML/CSS | No Comments »

input文本框样式代码实例

星期三, 06月 4th, 2008

通过css来更改所有deformde样式de方法,可以在css中定义
input{color:red}
textarea{border:1px solid #333}
这样de格式,一般如果不需要更改所有de文本样式,可以通过下面de方法来定义文本框和密码框等样式
点击运行可以看到效果: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> .username { width:130px; background:#FFFFFF url("/article/upimages/ico_username.gif") 2px 2px no-repeat; padding-left:18px;BORDER-RIGHT: #E7AD01 1px solid; BORDER-TOP: #E7AD01 1px solid; FONT-SIZE: 13px; BORDER-LEFT: #E7AD01 1px solid; COLOR: #000000; BORDER-BOTTOM: #E7AD01 1px solid; HEIGHT: 20px } </style> </head> <body> <table cellSpacing="0" cellPadding="0" width="100%" border="0" id="table1"> <tr> <form name="myform" method="post" action=""> <td class="login_td">用户名: <input class="username" onmouseover="this.style.borderColor='#99E300'" onmouseout="this.style.borderColor='#A1BCA3'" maxLength="12" name="UserName"></td> </form> </tr> </table> </body> </html> 
[Ctrl A 全选提示:您可先修改部分相关代码,再按运行]

Tags: css, input, 美化
Posted in HTML/CSS | No Comments »

支持IE和firefox的js代码美化加亮源码

星期一, 06月 2nd, 2008

自己在IE和FF试过了js相关代码加亮效果,用了一段别人de压缩后de相关代码作为例子,受限制,删了一部分. 发现错误de大虾一定要留下测试用de相关代码啊!
点击运行可以看到效果: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> 脚本之家 <A href="http://www.jb51.net">www.jb51.net</A> </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <link rel="Shortcut Icon" href="shell32.dll,20"> <STYLE> #oTxt{ color:#333333; background-color:#f0f0f0; font-family:Courier New; font-size:12px; margin:0; line-height:13px; border-left:none; overflow:scroll; } #oResult{ color:#333333; background-color:#f0f0f0; font-family: Courier New; font-size:12px; margin:0; line-height:13px; border-left:none; overflow:scroll; height:164px; } </STYLE> </HEAD> <BODY> <textarea id=oTxt wrap=off style="border:dashed 1px gray; border-right:none; border-bottom:none; width:400;height:164px;padding:2px;" onkeyup="_highlight()"> // // test comment // s = s.replace(/\/\//g, ”); /*/ ‘this is a block’ ‘http://test.com’ ‘comment !!’ //*/ //*/ ’string2′ ‘http://test.com’ “string1/*” //*/ /*/ ‘this is a block’ ‘http://test.com’ “comment !!” /*/ “string1: start a comment /* ” ‘http://test.com’ ’string2: end a comment */ ‘ //*/ /****************************\ * code highlight * * necrocoder 2006.05.11 * \****************************/ var sss = kkkk.innerHTML “\r\n”; for(var i=0;i<5;i ) sss = kkkk.innerHTML "\r\n" "\r\n"; var tm = (new Date()).getTime(); sss = sss.syntaxed(); var dtm = (new Date()).getTime() - tm; aaa.innerHTML = sss; //aaaa.innerText = sss; document.write('highlighted in ' dtm 'ms.'); /* * Examples */ Array.prototype.indexOf=function(o){for(var i=0;i <this.length;i ){if(this[i]==o)return i;} return-1;};Array.prototype.lastIndexOf=function(o){for(var i=this.length-1;i>=0;i–){if(this[i]==o)return i;}return-1;};Array.prototype.contains=function(o){return this.indexOf(o)!= -1;};Array.prototype.copy=function(o){return this.concat();};Array.prototype.insertAt=function(o,i){this.splice(i,0,o);};Array.prototype.insertBefore=function(o,o2){var i=this.indexOf(o2);if(i== -1)this.push(o);else this.splice(i,0,o);};Array.prototype.removeAt=function(i){this.splice(i,1);};Array.prototype.remove=function(o){var i=this.indexOf(o);if(i!= -1)this.splice(i,1);};String.prototype.trim=function(){return this.replace(/(^\s )|\s $/g,”");};Function.READ=1;Function.WRITE=2;Function.READ_WRITE=3;Function.prototype.addProperty=function(sName,nReadWrite){nReadWrite=nReadWrite||Function.READ_WRITE;var capitalized=sName.charAt(0).toUpperCase() sName.substr(1);if(nReadWrite&Function.READ) this.prototype["get" capitalized]=new Function(”",”return this._” sName “;”);if(nReadWrite&Function.WRITE) this.prototype["set" capitalized]=new Function(sName,”this._” sName ” = ” sName “;”);};function BiObject(){this._hashCode=BiObject._hashCodePrefix Math.round(Math.random()*1000) BiObject._hashCodePrefix BiObject._hashCodeCounter ;} _p=BiObject.prototype=new Object;_p._className=”BiObject”;_p._disposed=false;_p._id=null;BiObject._hashCodeCounter=1;BiObject._hashCodePrefix=”hc”;BiObject.toHashCode=function(o){if(o._hashCode!=null) return o._hashCode;return o._hashCode=BiObject._hashCodePrefix Math.round(Math.random()*1000) BiObject._hashCodePrefix BiObject._hashCodeCounter ;};BiObject.prototype.getDisposed=function(){return this._disposed;};BiObject.prototype.getId=function(){return this._id;};BiObject.prototype.setId=function(v){this._id=v;};BiObject.prototype.getUserData=function(){return this._userData;};BiObject.prototype.setUserData=function(v){this._userData=v;};_p.toHashCode=function(){return BiObject.toHashCode(this);};_p.dispose=function(){this._disposed=true;delete this._userData;};_p.toString=function(){if(this._className) return”[object " this._className "]“;return”[object Object]“;};_p.getProperty=function(sPropertyName){var getterName=”get” sPropertyName.charAt(0).toUpperCase() sPropertyName.substr(1);if(typeof this[getterName]==”function”) return this[getterName]();throw new Error(”No such property, ” sPropertyName);};_p.setProperty=function(sPropertyName,oValue){var setterName=”set” sPropertyName.charAt(0).toUpperCase() sPropertyName.substr(1);if(typeof this[setterName]==”function”) this[setterName](oValue);else throw new Error(”No such property, ” sPropertyName);};_p.setAttribute=function(sName,sValue,oParser) {var v;if(sValue==”true”) v=true;else if(sValue==”false”) v=false;else if(parseFloat(sValue)==sValue) v=parseFloat(sValue);else v=sValue;this.setProperty(sName,v);};_p.getAttribute=function(sName) {return String(this.getProperty(sName));};_p.addXmlNode=function(oNode,oParser) {if(oNode.nodeType==1) oParser.fromNode(oNode);};if(typeof BiObject==”undefined”) BiObject=new Function;function BiBrowserCheck(){if(BiBrowserCheck._singleton) return BiBrowserCheck._singleton;var ua=navigator.userAgent;this._ie= /msie/i.test(ua);this._moz=navigator.product==”Gecko”;this._platform=navigator.platform;if(this._moz) {/rv\:([^\);] )(\)|;)/.test(ua);this._version=RegExp.$1;this._ie55=false;this._ie6=false;} else {/MSIE\s ([^\);] )(\)|;)/.test(ua);this._version=RegExp.$1;this._ie55= /msie 5\.5/i.test(ua);this._ie6= /msie 6/i.test(ua);} BiBrowserCheck._singleton=this;} BiBrowserCheck.prototype=new BiObject;BiBrowserCheck.prototype.getIe=function() {return this._ie;};BiBrowserCheck.prototype.getIe55=function() {return this._ie55;};BiBrowserCheck.prototype.getIe6=function() {return this._ie6;};BiBrowserCheck.prototype.getMoz=function() {return this._moz;};BiBrowserCheck.prototype.getVersion=function() {return this._version;};BiBrowserCheck.prototype.getPlatform=function() {return this._platform;};var _br=new BiBrowserCheck;BiBrowserCheck.ie=_br.getIe();BiBrowserCheck.ie55=_br.getIe55();BiBrowserCheck.ie6=_br.getIe6();BiBrowserCheck.moz=_br.getMoz();BiBrowserCheck.version=_br.getVersion();BiBrowserCheck.platform=_br.getPlatform();_br=null;function BiUri(sBase,sRel) {this._params={};if(sBase) {this.setHref(sBase);if(sRel) this._setRelative(sRel)}} _p=BiUri.prototype=new BiObject;_p._className=”BiUri”;_p._scheme=”";_p._userInfo=”";_p._port=”";_p._host=”";_p._path=”";_p._dirPath=”";_p._fragment=”";_p._query=”";_p._hrefCache=null;BiUri.prototype.getScheme=function(){return this._scheme;};BiUri.prototype.getPath=function(){return this._path;};BiUri.prototype.getDirPath=function(){return this._dirPath;};BiUri.prototype.getHost=function(){return this._host;};BiUri.prototype.getPort=function(){return this._port;};BiUri.prototype.getFragment=function(){return this._fragment;};BiUri.prototype.getQuery=function(){return this._query;};BiUri.prototype.getUserInfo=function(){return this._userInfo;};BiUri.regExps={scheme:/^([^:] )\:. $/,user:/^([^@\/] )@. $/,host:/^([^:\/\?\#] ).*$/,port:/^:(\d )/,path:/^([^\?#]*)/,dirPath:/^(.*\/)[^\/]*$/,fragment:/^[^#]*#(.*)$/,absUri:/^\w(\w|\d|\ |\-|\.)*:/i};_p.toString=function() {return this.getHref();};_p.setHref=function(s) {this._hrefCache=null;s=String(s);this._scheme=”";this._userInfo=”";this._host=”";this._port=null;this._path=”";this._dirPath=”";this._query=”";this._fragment=”";this._params={};var err=new Error(”Not a well formatted URI”);var ok=BiUri.regExps.scheme.test(s);if(!ok)throw err;this._scheme=RegExp.$1;if(this._scheme==”mailto”||this._scheme==”news”||this._scheme==”view-source”) s=s.substring(this._scheme.length 1);else s=s.substring(this._scheme.length 3);ok=BiUri.regExps.user.test(s);if(ok) {this._userInfo=RegExp.$1;s=s.substring(this._userInfo.length 1);} if(this._scheme!=”file”||s.charAt(0)!=”/”) {ok=BiUri.regExps.host.test(s);if(!ok) throw err;this._host=RegExp.$1;s=s.substring(this._host.length);} ok=BiUri.regExps.port.test(s);if(ok) {this._port=Number(RegExp.$1);s=s.substring(RegExp.$1.length 1);} this._parsePathAndRest(s);};_p._parsePathAndRest=function(s) {var err=new Error(”Not a well formatted URI”);var ok=BiUri.regExps.path.test(s);if(!ok) throw err;this._path=RegExp.$1;s=s.substring(this._path.length);if(this._path==”"&&(this._scheme==”file”||this._scheme==”http”||this._scheme==”https”||this._scheme==”ftp”)) {this._path=”/”;} var segments=this._path.split(”/”);var sb=[];var j=0;for(var i=0;i<segments.length;i ) {if(segments[i]==".") continue;if(segments[i]=="..") {j--;delete sb[j];sb.length=j continue;} sb[j ]=segments[i];} this._path=sb.join("/");if(this._path.length>0) {ok=BiUri.regExps.dirPath.test(this._path);if(!ok) throw err;this._dirPath=RegExp.$1;} ok=BiUri.regExps.fragment.test(s);if(ok) {this._fragment=RegExp.$1;s=s.substring(0,s.length-this._fragment.length-1);this._fragment=”#” this._fragment.replace(”#”,”#”);} this._query=s;s=s.substring(1);if(this._query!=”") {var pairs=s.split(/\;|\&/);var parts;for(var i=0;i <pairs.length;i ) {parts=pairs[i].split("=");if(parts.length==2) this._params[parts[0]]=decodeURIComponent(parts[1]);else this._params[pairs[i]]=null;}}};_p._setRelative=function(s) {this._hrefCache=null;s=String(s);var isAbsolute=BiUri.regExps.absUri.test(s);if(isAbsolute) {this.setHref(s);return;} var dirPath=this._dirPath;this._path="";this._dirPath="";this._query="";this._fragment="";this._params={};if(s.charAt(0)=="/") {this._parsePathAndRest(s)} else this._parsePathAndRest(dirPath s);};_p.getHref=function() {if(this._hrefCache!=null) return this._hrefCache;var s=this._scheme (this._scheme=="mailto"||this._scheme=="news"||this._scheme=="view-source"?":":"://") this._userInfo (this._userInfo==""?"":"@") this._host (this._port!=null?":" this._port:"") this._path;var sb=[];for(var name in this._params) {if(this._params[name]!=null) sb.push(name "=" encodeURIComponent(this._params[name]));else sb.push(name);} return this._hrefCache=s this.getQuery() this._fragment;};_p.getParam=function(sName) {return this._params[sName];};_p.setParam=function(sName,sValue) {this._hrefCache=null;return this._params[sName]=String(sValue);};_p.removeParam=function(sName) {this._hrefCache=null;delete this._params[sName];};_p.getQuery=function() {var sb=[];for(var name in this._params) {if(this._params[name]!=null) sb.push(name "=" encodeURIComponent(this._params[name]));else sb.push(name);} return(sb.length>0?”?” sb.join(”&”):”");};function BiEvent(sType) {BiObject.call(this);this._type=sType;} _p=BiEvent.prototype=new BiObject;_p._className=”BiEvent”;_p._bubbles=false;_p._propagationStopped=true;_p._defaultPrevented=false;BiEvent.prototype.getType=function(){return this._type;};BiEvent.prototype.getTarget=function(){return this._target;};BiEvent.prototype.getCurrentTarget=function(){return this._currentTarget;};BiEvent.prototype.getBubbles=function(){return this._bubbles;};_p.initDispatch=function(){};_p.stopPropagation=function() {this._propagationStopped=true;};_p.preventDefault=function() {this._defaultPrevented=true;};_p.dispose=function() {this._target=null;this._currentTarget=null;};_p.getDefaultPrevented=function() {return this._defaultPrevented;};function BiMouseEvent(){};function BiKeyboardEvent(){};application=new BiApplication;application._coreScriptFiles_ie=["js/coreclasses.js","js/xmlrpc.js","js/guicomponents.js","js/gauge.ie.js","js/menu.ie.js","js/window.js","js/grids.js","js/databinding.js","js/chartingbase.js","js/charting.js","js/charting2.js","js/datetime.js"];application._coreScriptFiles_moz=["js/coreclasses.js","js/xmlrpc.js","js/guicomponents.js","js/menu.moz.js","js/window.js","js/grids.js","js/databinding.js","js/chartingbase.js","js/charting2.js","js/datetime.js"];if(BiBrowserCheck.ie) application._coreScriptFiles=application._coreScriptFiles_ie;else application._coreScriptFiles=application._coreScriptFiles_moz; // </textarea> <SCRIPT LANGUAGE="JavaScript"> var tm_highlight = null; function _highlight() { clearTimeout(tm_highlight); tm_highlight = setTimeout(’document.getElementById(”oResult”).innerHTML = (”” document.getElementById(”oTxt”).value.formatJS() ““);’, 1000); } //String.prototype.div = document.createElement(’div’); String.prototype.toHtml = function () { return this .replace(/\&/g, ‘&’) .replace(/\</g, '<') .replace(/\>/g, ‘>’) .replace(/\x20/g, ‘ ‘) .replace(/(\r\n|\r|\n)/g, ‘ ‘); }; String.prototype.formatJS = function () { var s = this; var index = 0, brch=0; var keywords = ['abstract','boolean','break','byte','case','catch','char','class','const','continue','default','delete','do','double','else','extends','false','final','finally','float','for','function','goto','if','implements','import','in','instanceof','int','interface','long','native','new','null','package','private','protected','public','return','short','static','super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','while','with']; var objects = ['Anchor','anchors','Applet','applets','Area','Array','arguments','Button','Checkbox','Date','document','FileUpload','Form','forms','Frame','frames','Function','Hidden','history','Image','images','Link','links','Area','location','Math','MimeType','mimeTypes','navigator','options','Password','Plugin','plugins','Radio','Reset','RegExp','Select','String','Submit','Text','Textarea','window']; var specials = ['prototype','callee','caller','apply','call','encodeURIComponent','decodeURIComponent','parseInt','parseFloat','__defineGetter__','__defineSetter__']; var blocks = []; var indent = “”, indent_fix=”"; s=s .replace(/\t/g, ‘ ‘) .replace(/\r\n|\r/g, “\n”) .replace(/(\/\/[^\n]*(\n|$)|\/\*(\*(?!\/)|[^\*])*\* \/|\”(\\\”|\\\\|[^\"\n])*\”|\’(\\\’|\\\\|[^\'\n])*\’|([=!\(\:\{\[\;]\s*)\/(\\.|[^\/\n]) \/[igm]*)/g, function ($0) { var color = “#CCCCCC”, ret = “‘”; // comment var kkk = $0; if(kkk.charAt(0) == ‘”‘) color = “#FF00FF”; // double quote else if(kkk.charAt(0) == “‘”) color = “#9900FF”; // single quote else if(kkk.match(/^(?:[=!\(\:\{\[]\s*)(\/(\\.|[^\/\n]) \/[igm]*$)/)) { ret = kkk.replace(/^([=!\(\:\{\[]\s*)(\/(\\.|[^\/\n]) \/[igm]*$)/, “$1′”); kkk = kkk.replace(/^([=!\(\:\{\[]\s*)(\/(\\.|[^\/\n]) \/[igm]*$)/, “$2″); color = “#6666CC”; // regexp } blocks[blocks.length] = “” kkk.toHtml() ““; return ret; }) // alert(blocks);s=s .replace(/(\}?[\n ]*;[\n ]*)/g, function ($0,$1){return $1.replace(/[\n ]/g, ”) “\n”;}) .replace(/\b(else)\b/g, “$1\n”) .replace(/\b((case|default)[^:]*\:)/g, “$1\n”) .replace(/(\{[\n ]*)((([A-Za-z\$\_][0-9A-Za-z\$\_]*|`)[\n ]*\:[\n ]*[^,\}] ,?) )([\n ]*\})/g, function ($0,$1,$2,$3,$4,$5) { return $1 $2.replace(/[\n ] /g, ‘ ‘).replace(/(([A-Za-z\$\_][0-9A-Za-z\$\_]*|`)\:[^,\}] ,?)/g, “$1\n”) $5; }) .replace(/[\n ]*(\{|\};?)[\n ]*/g, function ($0, $1) { if($1.charAt(0) == ‘}’) brch–; var ss = “\n”; for(var i=0;i<brch;i ) ss = " "; if($1 == '{') brch ; return ss $1 "\n"; }) .replace(/[\n ]*\{[\n ]*\}/g, '{}') .replace(/^[ ]*([^\{\}])/g, "$1") .replace(/(\n\s*for\b[^\n]*\;\s*)\n/g, '$1') .replace(/(\n\s*for\b[^\n]*\;\s*)\n/g, '$1') .replace(/\n\s*(for|while|if|switch)\b[^\n]*; *\n/g, function ($0, $1) { var le = 0; for(var i=0;i<$0.length;i ) if($0.charAt(i) == '(') le ; else if($0.charAt(i) == ')'){le--; if(le == 0)return $0.substr(0,i 1) "\n" $0.substr(i 1,$0.length);} }) .replace(/(\n *)*(\n *)/g, "$2") .replace(/(`\s*)\ (?=\s*`)/g, "$1\n ") .replace(/( *)([^\n]*)\n/g, function ($0, space, text) { var ret = $0; if(text.match(/^\{/)) { indent = space " "; indent_fix = ""; } else if(text.match(/^\}/)) { indent = space; indent_fix = ""; } else { if(text.match(/^(case|default)\b/)) ret = indent.substr(0,indent.length-4) text; else ret = indent indent_fix text; if(text.match(/^(if|for|else|var|while)\b/) && !text.match(/\;\s*$/)) indent_fix = " "; else if(!text.match(/[^\;]\s*$/)) indent_fix = ""; if(text.charAt(0)==' ') ret = " " ret; ret = "\n"; } return ret; }) .replace(/\&/g, '&') .replace(/\</g, '<') .replace(/\>/g, ‘>’) .replace(/\x20/g, ‘ ‘) .replace(eval(’/\\b(’ keywords.join(’|') ‘)\\b/g’),’$1‘) // keywords .replace(eval(’/\\b(’ objects.join(’|') ‘)\\b/g’),’$1‘) // objects .replace(eval(’/\\b(’ specials.join(’|') ‘)\\b/g’),’$1‘) // objects .replace(/\n/g, ‘ ‘) .replace(/\’/g, function ($0){return blocks[index ];}); return s; } tm_highlight = setTimeout(’document.getElementById(”oResult”).innerHTML = (”” document.getElementById(”oTxt”).value.formatJS() ““);’, 1); // </SCRIPT> <hr style="color:black;height:2px;"> </BODY> </HTML> 
[Ctrl A 全选提示:您可先修改部分相关代码,再按运行]

Tags: JS, 加亮, 美化
Posted in JavaScript | No Comments »

编程学习

Posts Tagged ‘美化’

美化html段落文本 Ⅰ

用css alpha 滤镜实现input file 样式美化代码

input文本框样式代码实例

支持IE和firefox的js代码美化加亮源码

Pages

Archives

Categories

编程学习

Posts Tagged ‘美化’

美化html段落文本 Ⅰ

用css alpha 滤镜 实现input file 样式美化代码

input文本框样式代码实例

支持IE和firefox的js代码美化加亮源码

Pages

Archives

Categories

用css alpha 滤镜实现input file 样式美化代码