代码高亮度显示__脚本特效_后台技术飞飞Asp技术乐园

代码高亮度显示

时间： 2007-09-25 15:03:23　阅读次数：1730

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>编辑中对应的颜色</title>
<style>
* {
	margin:0px;
	padding:0px;
}

html, body {
	background-color:buttonface;
	width:100%;
	height:100%;
	overflow:hidden;
	border-width:0px;
	font-size:13px;
	font-family:Verdana Arial 宋体;
	color:#333333;
}

#divMain {
	overflow:hidden;
}

#divTools {
	width:100%;
	height:20px;
	line-height:20px;
	overflow:hidden;
	border-bottom:1px solid buttonshadow;
	margin:0px;
	padding:0px;
	padding-left:10px;
	background-color:buttonface;
	color:black;
}

#divTools a {
	display:block;
	float:left;
	height:20px;
	padding-left:15px;
	padding-right:15px;
	line-height:20px;
	text-align:center;
	overflow:hidden;
	color:black;
	text-decoration:none;
}

#divTools a:hover {background-color:gold;color:black;}

#divTools a:active {background-color:navy;color:white;}

#editDiv {
    position:relative;
	border:1px inset buttonface;
	width:94%;
	height:400px;
	overflow:auto;
	padding:5px;
	margin:2px 15px 0px 15px;
	background-color:white;
	display:block;
}

#show {
 position:relative;
	border:1px inset buttonface;
	width:94%;
	height:400px;
	overflow:auto;
	padding:5px;
	margin:2px 15px 0px 15px;
	background-color:white;
	display:none;
}
</style>
</head>

<body onload="abc(editDiv);w_size(0)" style="margin:0 0 0 0;padding:0 0 0 0;overflow:hidden">
<div id="divMain">
<div id="divTools">
<a href="javascript:void(w_size(0));" id="viewButton01" >代码视图</a>
<a href="javascript:void(w_size(1));" id="viewButton02" >预览视图</a>
</div>
<DIV ID="editDiv" onkeyup="yanse()" contentEditable="true">
&lt;html&gt; 
&lt;head&gt; 
&nbsp;&nbsp;&nbsp; &lt;title&gt;一个简单的万年历_Test by 编程浪子&lt;/title&gt; 
&nbsp;&nbsp;&nbsp; &lt;meta http-equiv=&quot;Content-Type&quot; 
content=&quot;text/html; charset=gb2312&quot;&gt; 
 
&nbsp;&nbsp;&nbsp; &lt;script language=&quot;javascript&quot;&gt; 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;//定义一个日历类 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;function CalClass() 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;this.getDaysOfMonth=function(year,month)　//获取指定年月的天数 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
var disLeapYear=year%4||!(year%100)&amp;&amp;year%400; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
return month==2?(disLeapYear?28:29):(/4|6|9|11/.test(month)?30:31); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;} 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;this.getMonthName=function(month)　// 
获取中文月份 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
return (month&gt;9?&quot;十&quot;:&quot;&quot;)+&quot;一二三四五六七八九十&quot;.charAt(month%10-1)+&quot;月&quot;; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;} 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;this.getCal=function(year,month)　　//获取日历界面 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
var lastDate=this.getDaysOfMonth(year,month); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
var strMonthName=this.getMonthName(month); 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
var str=&quot;&lt;caption&gt;&lt;b&gt;&quot;+year+&quot;年&quot;+strMonthName+&quot;&lt;/b&gt;&lt;/caption&gt;&quot;; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
str+=&quot;&lt;tr&gt;&quot;+&quot;一二三四五六天&quot;.replace(/(.)/g,&quot;&lt;td&gt;星期$1&lt;/td&gt;&quot;)+&quot;&lt;/tr&gt;&quot;; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
for(var i=1;i&lt;=(new Date(year,month-1,1).getDay()-1);i++) 
str+=&quot;&lt;td&gt; &lt;/td&gt;&quot;; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
for(var j=1;j&lt;=lastDate;j++) 
str+=&quot;&lt;td&gt;&quot;+j+&quot;&lt;/td&gt;&quot;; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
str='&lt;table border=&quot;5&quot;&gt;'+ str.replace(/((&lt;td&gt;[\d 
]+&lt;\/td&gt;){7})/g,&quot;&lt;tr&gt;$1&lt;/tr&gt;&quot;) +'&lt;/table&gt;'; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
return str; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;} 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;} 
 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;var 
isIE=/msie/i.test(window.navigator.userAgent);　//判断浏览器类型 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;var myCal=new CalClass(); 
 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;Date.prototype.getNow=function()&nbsp; 
&nbsp;//定义一个中文时间的prototype 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;var 
hour=this.getHours(); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;return 
(hour%12?hour%12:12) + (/\d+(:\d+):\d+/.exec(this)[1]) + 
(hour&lt;12?&quot;AM&quot;:&quot;PM&quot;); 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;} 
 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;function InitCalUI()&nbsp;&nbsp;//初始化日历界面 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;var now=new 
Date(); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;var 
str=myCal.getCal(now.getYear()+(isIE?0:1900),now.getMonth()+1); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;var 
today=now.getDate(); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;str=str.replace(&quot;&lt;td&gt;&quot;+today+&quot;&lt;/td&gt;&quot;,&quot;&lt;td&gt;&quot;+today+&quot;&lt;br/&gt;&quot;+now.getNow().fontcolor(&quot;brown&quot;)+&quot;&lt;/td&gt;&quot;); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;document.getElementById(&quot;divCalendar&quot;).innerHTML=str; 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;str=&quot;&quot;; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;for (var 
i=1980;i&lt;=2008;i++) 
str+=&quot;&lt;option&gt;&quot;+i+&quot;&lt;/option&gt;&quot;; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;str='&lt;select 
name=&quot;selYear&quot;&gt;'+str+'&lt;/select&gt;年'; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;str+='&lt;select 
name=&quot;selMonth&quot;&gt;' 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;+'.1.2.3.4.5.6.7.8.9.10.11.12'.replace(/\.(\d+)/g,'&lt;option&gt;$1&lt;/option&gt;') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
+'&lt;/select&gt;月　'; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;str+='&lt;button 
onclick=&quot;ChangeCalUI()&quot;&gt;查看&lt;/button&gt;'; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;str=&quot;&lt;form&gt;&quot;+str+&quot;&lt;/form&gt;&quot;; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;document.getElementById(&quot;divSelDate&quot;).innerHTML=str; 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;} 
 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;function ChangeCalUI()　//日期变动时相应的日历界面 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;var 
selYear=document.forms[0].selYear; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;var 
selMonth=document.forms[0].selMonth; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;var 
year=selYear.options[selYear.selectedIndex].text; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;var 
month=selMonth.options[selMonth.selectedIndex].text; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;document.getElementById(&quot;divCalendar&quot;).innerHTML=myCal.getCal(year,month); 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;} 
&nbsp;&nbsp;&nbsp; &lt;/script&gt; 
&lt;/head&gt; 
&lt;body onload=&quot;InitCalUI();&quot;&gt; 
&nbsp;&nbsp;&nbsp; &lt;div id=&quot;divCalendar&quot;&gt;&lt;/div&gt; 
&nbsp;&nbsp;&nbsp; &lt;div id=&quot;divSelDate&quot;&gt;&lt;/div&gt; 
&lt;/body&gt; 
&lt;/html&gt; 
</DIV>
<DIV ID="show"></DIV>
</div>
<script>
 //event.cancelBubble=true;
 //*********************************
 //原作者:风云舞
 //本程序需要IE浏览器版本高于IE5.5才能正常调试,另移植到iframe上道理应该相同
 //*********************************以下
function editDiv.onkeypress(){ 
if(event.keyCode==13){
var txtobj=document.selection.createRange()
txtobj.text==""?txtobj.text="\n":(document.selection.clear())&(txtobj.text="\n") //三目复合表达式,解决有被选文字时回车的光标定位问题
document.selection.createRange().select()
return false
}
if(event.keyCode==32){
var txtobj=document.selection.createRange()
txtobj.text==""?txtobj.pasteHTML("&nbsp;"):(document.selection.clear())&(txtobj.pasteHTML("&nbsp;")) //三目复合表达式,解决有被选文字时回车的光标定位问题
document.selection.createRange().select()
return false
}
}

</html>

提示：您可以先修改部分代码再运行