Qihangnet's Blog! - JAVASCRIPT

Saturday, March 15, 2008

最近在项目中由于一个特殊的要求,需要使用类似于js的document.getElementsById的css class调用的实现。于是到网上搜索了一下，似乎并没有真正能较好达到目的且效率较理想的。于是乎，自己简单的写了一个，效率还凑合，而且支持多class名称的标签。代码如下：

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

Array.prototype.indexOf = function(item,i){
  i || (i = 0);
  var length = this.length;
  if (i < 0) i = length + i;
  for (; i < length; i++)
    if (this[i] === item) return i;
  return -1;
}

document.getElementsByClassName = function(className, parentElement){
	var elems = ($(parentElement)||document.body).getElementsByTagName("*");
	var result=[];
	for (i=0; j=elems[i]; i++){
		if (j.className.split(/(\s+)/).indexOf(className)!=-1){
			result.push(j);
		}
	}
	return result;
}

使用时先将代码加在head部分或者写在独立的js文件然后在head里引用，然后在页面中适当的部分即可通过document.getElementsByClassName来获得指定class的标签数组。

JAVASCRIPT

posted on Saturday, March 15, 2008 2:28:00 PM (China Standard Time, UTC+08:00)

Comments [0]

Tuesday, November 21, 2006

Microsoft Anti-Cross Site Scripting Library V1.5 发布了

微软反跨站攻击脚本库 v1.5。此下载包含Microsoft Application Security Anti-Cross Site Scripting Library的分发组件.Anti-Cross Site Scripting Library可以为网站开发人员提供基于Web应用防护,以抵御源自 Cross-Site Scripting (XSS跨站漏洞)的攻击.支持.NET Framework: 2.0, 1.1

下载地址：http://www.microsoft.com/downloads/details.aspx?FamilyID=efb9c819-53ff-4f82-bfaf-e11625130c25&DisplayLang=en

ASP.NET | DOWNLOAD | JAVASCRIPT | 技术咨询

posted on Tuesday, November 21, 2006 8:22:02 PM (China Standard Time, UTC+08:00)

Comments [0]

Tuesday, October 10, 2006

支持百度的搜索引擎来源的关键字加亮

我们在上网使用搜索引擎的时候，经常会遇到类似这样的一个问题：从Google上搜索到了一个包含了“税收”的文章，但是打开对应的网站页面时发现这篇文章很长，很难确定税务在文章中的位置，即使使用浏览器的查找功能，也并不爽。那么如何改进信息类网站在此需求上的用户体验呢？一个国外的朋友做了件好事情：http://www.kryogenix.org/code/browser/searchhi/，他在这个页面上提供了一个js，可以很方便的实现我们的需求。但是这个脚本对baidu没有什么效果为什么呢？首先我们看看他的部分代码：

……
if (qsip[0] == 'q' || qsip[0] == 'p') { // q= for Google, p= for Yahoo
words = unescape(qsip[1].replace(/\+/g,' ')).split(/\s+/);
for (w=0;w<words.length;w++) {
highlightWord(document.getElementsByTagName("body")[0],words[w]);
}
}
……

上述代码获取来源地址中q或p的值，q对应的是google的搜索关键字，p是Yahoo的搜索关键字，而且这两个关键字是utf-8编码的，使用js自然可以很方便的处理，但是百度搜索的则有较大不同：搜索关键字的对应的地址参数是wd，且编码为GB2312。如何解决这个问题呢？我这里使用了js结合vbs的办法来解决该问题。

首先我们使用vbs写一个函数解决编码问题：

Function DeCodeAnsi(s)
Dim i, sTmp, sResult, sTmp1
sResult = ""
For i=1 To Len(s)
If Mid(s,i,1)="%" Then
sTmp = "&H" & Mid(s,i+1,2)
If isNumeric(sTmp) Then
If CInt(sTmp)=0 Then
i = i + 2
ElseIf CInt(sTmp)>0 And CInt(sTmp)<128 Then
sResult = sResult & Chr(sTmp)
i = i + 2
Else
If Mid(s,i+3,1)="%" Then
sTmp1 = "&H" & Mid(s,i+4,2)
If isNumeric(sTmp1) Then
sResult = sResult & Chr(CInt(sTmp)*16*16 + CInt(sTmp1))
i = i + 5
End If
Else
sResult = sResult & Chr(sTmp)
i = i + 2
End If
End If
Else
sResult = sResult & Mid(s,i,1)
End If
Else
sResult = sResult & Mid(s,i,1)
End If
Next
DeCodeAnsi = sResult
End Function

然后在js中调用这个vbs的函数：
if (qsip[0] == 'wd') { // wd= for baidu
if(qsip[1]=='') continue;
execScript('wd = DeCodeAnsi("'+qsip[1]+'")','vbscript');
words = decodeURI(wd.replace(/\+/g,' ')).split(/\s+/);
for (w=0;w<words.length;w++) {
highlightWord(document.getElementsByTagName("body")[0],words[w]);
}
}

ok问题解决了。

使用的时候在网页中加上以下两行就好了：

searchhi.js (2.23 KB)
searchhi.vbs (.93 KB)

JAVASCRIPT

posted on Tuesday, October 10, 2006 11:55:25 AM (China Standard Time, UTC+08:00)

Comments [2]

Thursday, May 11, 2006

利用正则表达式限制网页表单里的文本框输入内容

用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"

用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

JAVASCRIPT

posted on Thursday, May 11, 2006 9:57:11 AM (China Standard Time, UTC+08:00)

Comments [1]

Monday, April 10, 2006

js写的Hashtable类

用下面这个东西类可以在客户端使用HashTable哦,比较喜欢^_^

<script language="javascript" type="text/javascript">
    function Hashtable()
    {
    this._hash = new Object();
    this.add = function(key,value){
    if(typeof(key)!="undefined"){
    if(this.contains(key)==false){
    this._hash[key]=typeof(value)=="undefined"?null:value;
    return true;
    } else {
    return false;
    }
    } else {
    return false;
    }
    }
    this.remove = function(key){delete this._hash[key];}
    this.count = function(){var i=0;for(var k in this._hash){i++;} return i;}
    this.items = function(key){return this._hash[key];}
    this.contains = function(key){ return typeof(this._hash[key])!="undefined";}
    this.clear = function(){for(var k in this._hash){delete this._hash[k];}}
    }
    var a = new Hashtable();
    a.add("aa");
    a.add("bb",2342);
    a.add("bb",2342);
    a.remove("aa");
    alert(a.count());
    alert(a.contains("bb"));
    alert(a.contains("aa"));
    alert(a.items("bb"));
    </script> 

JAVASCRIPT

posted on Monday, April 10, 2006 1:46:00 PM (China Standard Time, UTC+08:00)

Comments [0]

Wednesday, June 22, 2005

改进版的渐变效果进度条

对原来的版本的渐变效果进度条做了改进，抛弃了长度达256的数组，并修改了样式表，实现了大幅度减少资源消耗。请看效果。

具体程序如下：

<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var i;
function go()
{
  bar_width = document.getElementById("bg").clientWidth;
  i = bar_width;
  setTimeout('start();',300);
}
function start()
{
  if(i-->0)
  {
   ps.style.width = i;
   bn.innerHTML = Math.floor((bar_width-i)/bar_width*100)+"%";
   setTimeout('start();',20);
  }
}

</script>
<style type="text/css">
#bg {
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
width:300px;
height:20px;
border:1px solid black;
z-index:0;
position:absolute;
}
#ps {
float:right;
background-color:#FFFF00;
width:100%;
}
#bn {
position:absolute;
text-align:center;
width:100%;
height:100%;
cursor:default;
}
</style>
</head>
<body onload="go();">
<div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
</body>
</html>

JAVASCRIPT

posted on Wednesday, June 22, 2005 11:23:54 AM (China Standard Time, UTC+08:00)

Comments [4]

Tuesday, June 21, 2005

偶做的渐变效果进度条

演示效果请看渐变效果进度条，具体代码如下：

<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var _Hex = Array("00","01","02","03","04","05","06","07","08","09",
"0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19",
"1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29",
"2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39",
"3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49",
"4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59",
"5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69",
"6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79",
"7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89",
"8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99",
"9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9",
"AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9",
"BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9",
"CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9",
"DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9",
"EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9",
"FA","FB","FC","FD","FE","FF");
function go()
{
  setTimeout('start();',100);
}
var i=0;
function start()
{
  if(i++<256)
  {
   ps.innerHTML += "<span style='width:1px;background-color:#FF"+_Hex[256-i]+"00;'>";
   bn.innerHTML = Math.floor(i/2.56)+"%";
   setTimeout('start();',10);
  }
}

</script>
<style type="text/css">
#ps {
background-color:#FFFF00;
width:256px;
margin: 1px;
float:left;
}
#bn {
width:39px;
margin: 1px;
float:right;
text-align:center;
color:#FFFFFF;
font-family:Arial;
font-size:13px;
}
</style>
</head>
<body onload="go();">