云淡风轻

JavaScript获取页面对象的ID和Name

云淡风轻 — Thu, 24 Sep 2009 07:20:47 +0000

这两个JavaScript函数用来获取页面对象的getElementByID、getElementsByName，代码和用法如下：

function $id( id ){
return document.getElementById( id );
}

function $name( name ){
return document.getElementsByName( name );
}

$id("test1").innerHTML = "ABC"; //更新ID为test1的对象的内容
$name("test2").value = "ABC"; //设置NAME为text2的对象的值

JavaScript操作cookies保存、获取和删除

云淡风轻 — Thu, 24 Sep 2009 06:23:39 +0000

/*
功能：保存cookies函数
参数：name，cookie名字；value，值
*/
function SetCookie(name,value){
var Days = 60; //cookie 将被保存两个月
var exp = new Date(); //获得当前时间
exp.setTime(exp.getTime() + Days*24*60*60*1000); //换成毫秒
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
 }

/*
功能：获取cookies函数
参数：name，cookie名字
*/
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null)
return unescape(arr[2]);
return null;
}

/*
功能：删除cookies函数
参数：name，cookie名字
*/
function delCookie(name){
var exp = new Date(); //当前时间
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

JavaScript前进后退按钮

云淡风轻 — Sat, 05 Sep 2009 07:23:29 +0000

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

JavaScript显示系统时间

云淡风轻 — Mon, 31 Aug 2009 00:44:48 +0000

JavaScript显示系统时间,显示年月日时分秒和星期，每秒自动刷新，并加入日期颜色区别:

星期一至星期五显示为黑色
星期六显示为绿色
星期日显示为红色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript 时间显示</title> </head> <body> <span id=localtime></span> <script type="text/javascript"> function showLocale(objD) { var str,colorhead,colorfoot; var yy = objD.getYear(); if(yy<1900) yy = yy+1900; var MM = objD.getMonth()+1; if(MM<10) MM = '0' + MM; var dd = objD.getDate(); if(dd<10) dd = '0' + dd; var hh = objD.getHours(); if(hh<10) hh = '0' + hh; var mm = objD.getMinutes(); if(mm<10) mm = '0' + mm; var ss = objD.getSeconds(); if(ss<10) ss = '0' + ss; var ww = objD.getDay(); if ( ww==0 ) colorhead="<font color=\"#FF0000\">"; if ( ww > 0 && ww < 6 ) colorhead="<font color=\"#373737\">"; if ( ww==6 ) colorhead="<font color=\"#008000\">"; if (ww==0) ww="星期日"; if (ww==1) ww="星期一"; if (ww==2) ww="星期二"; if (ww==3) ww="星期三"; if (ww==4) ww="星期四"; if (ww==5) ww="星期五"; if (ww==6) ww="星期六"; colorfoot="</font>" str = colorhead + yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + " " + ww + colorfoot; return(str); } function tick() { var today; today = new Date(); document.getElementById("localtime").innerHTML = showLocale(today); window.setTimeout("tick()", 1000); } tick(); </script> </body> </html>

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

JavaScript随机选择数组元素

云淡风轻 — Mon, 31 Aug 2009 00:37:25 +0000

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

SyntaxHighlighter 代码高亮显示工具安装成功

云淡风轻 — Fri, 28 Aug 2009 16:48:12 +0000

SyntaxHighlighter是一款用JavaScript编写的功能强大的代码高亮显示工具，它可以在网页中对各种程序源代码语法进行高亮显示。当前最新版本是2.0.296，目前支持的编程语言为：Bash/shell、C#、C++、CSS、Delphi、Diff、Groovy、JavaScript、Java、Perl、PHP、Plain Text、Python、Ruby、Scala、SQL、Visual Basic、XML/XHTML/XSLT/HTML。

演示地址：http://alexgorbatchev.com/wiki/SyntaxHighlighter:Demo

下载地址：http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

安装方法：

下载SyntaxHighlighter并解压缩，将解压缩后的文件夹syntaxhighlighter_2.0.296重命名为SyntaxHighlighter，SyntaxHighlighter文件夹下应该三个文件夹，分别是src、scripts、styles，另外还有一个test.html和LGPLv3.txt，然后将SyntaxHighlighter文件夹复制到上传到网站根目录。
在网页的之间插入以下代码：
其实就是载入两个CSS文件，其中第二行载入的shThemeDefault.css是默认的样式，在SyntaxHighlighter目录的styles目录中一共提供了6个样式文件，分别是shThemeDefault.css、shThemeDjango.css、shThemeEmacs.css、shThemeFadeToGrey.css、shThemeMidnight.css、shThemeRDark.css，可以根据自己喜欢的样式来载入不同的样式文件。
在的前面插入以下代码
在以上代码载入的19个js文件中，除了第一个shCore.js外，其他的都是每个js文件对应一种编程语言(根据文件名可以判断支持哪种编程语言)，可以根据实际需要来选择是否载入。

将需要进行高亮显示的源代码放在

之间，例如：

function test() : String
{
	return 10;
}

其中c-sharp是定义编程语言的类型，关于其他类型编程语言的定义方法，详见下表的Brush aliases列：

Brush name	Brush aliases	File name
Bash/shell	bash, shell	shBrushBash.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

保存，刷新，看看效果吧。

以下是HTML代码显示效果：



SyntaxHighlighter

以下是PHP代码显示效果：

$today = date("F j, Y, g:i a");
$today = date("m.d.y");
$today = date("j, n, Y");
$today = date("Ymd");
$today = date('h-i-s, j-m-y, it is w Day z ');
$today = date('\i\t \i\s \t\h\e jS \d\a\y.');
$today = date("D M j G:i:s T Y");
$today = date('H:m:s \m \i\s\ \m\o\n\t\h');
$today = date("H:i:s");

Theme 采用 XHTML 1.0 Strict 标准构建

云淡风轻 — Fri, 28 Aug 2009 02:46:17 +0000

由于这个Theme开始写的时间就是以XHTML 1.0 Transitional写的，现在要更改为XHTML 1.0 Strict，相对来讲，不是太复杂。经过简单的调试、修改，本站的THeme已完全达到 XHTML 1.0 Strict 的标准，并已经通过W3C的检查（点击页面最下面的W3C检查图标即可查看）。

在修改过程中，遇到以下三个问题：

1、XHTML 1.0 Strict 不支持a标签的target属性，也就是无法强制在新窗口打开网页。经过查找资料显示，W3C一直不提倡使用target这个属性，W3C认为是否在新窗口打开链接应该由用户去选择，而不是强制用户在新窗口里打开，这样很容易就导致一下子开太多的窗口，造成浏览器占用过多的系统资源。

解决办法：以对用户的尊重和遵循W3C标准为目的，放弃使用target属性，如果你想在新窗口打开的话，只能右击鼠标了。

2、XHTML 1.0 Strict 不支持img标签的border属性。

解决办法：在CSS里控制就可以了，如果你要网页上所有图片的边框为0的话，在CSS里加上如下代码（红色部分）：img{ border:0;}

3、XHTML 1.0 Strict 不支持script标签的language属性。

解决办法：将