论坛首页 Web前端技术论坛

常用JS代码实例

浏览 42337 次
精华帖 (2) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (18)
作者 正文
   发表时间:2009-04-23  
function sysb(f,b){
 v = parseFloat(f).toString(b)
 alert(v);
}

sysb(0.45,2);
sysb(0.45,8);
sysb(0.45,16); 
0 请登录后投票
   发表时间:2009-04-24  
http://www.webtoolkit.info
http://code.google.com/p/jspdf/
http://phpjs.org/functions/sprintf
0 请登录后投票
   发表时间:2009-04-24  
http://phpjs.org/functions/index
PHP功能函数的JS实现
0 请登录后投票
   发表时间:2009-06-02  
给自己写的jQuery.iamsese命名空间增加cookie控制功能
	setCookie : function(name, value) {
        var str = name + "=" + value;
		var Then = new Date()
		Then.setTime(Then.getTime() + 1 * 3600000) // 小时
		str += "; expires="+Then.toGMTString();
		str += "; path=/";
		str += "; domain=.beijingextreme.com.cn";
		document.cookie = str;
	},
	getCookie : function(name) {
		var tmp, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)", "gi");
		if (tmp = reg.exec(unescape(document.cookie)))
			return (tmp[2]);
		return null;
	}


例子demo
//将st属性写到cookies里面  -- 使用jquery.iamsese.js cooke功能
			$.iamsese.setCookie('curactText',$(this).attr('st'));
var curactText = $.iamsese.getCookie('curactText');
0 请登录后投票
   发表时间:2009-06-02  
jquery lightbox 插件的使用
//设置jquery lightbox
	BEUI.E.getLightBoxConfig = function(){
		var imgPath = 'js/jquery-lightbox/images/lightbox-';
		return ({
			// Configuration related to images
			imageLoading:	imgPath + 'ico-loading.gif',		
			imageBtnPrev:	imgPath + 'btn-prev.gif',	
			imageBtnNext:	imgPath + 'btn-next.gif',
			imageBtnClose:	imgPath + 'btn-close.gif',
			imageBlank:		imgPath + 'blank.gif'
		});					
	} ;
	
	/**
	 * 相册特效
	 */
	BEUI.E.confXC = function(){
		$('#exap-content').toggle();
		$('#exap-content table#gallery a').lightBox(BEUI.E.getLightBoxConfig());
		
		//$('#exap-content table#gallery a').lightBox(BEUI.E.getLightBoxConfig());
		$('#exap-content table#gallery tr td').hover(
			function(){
				$(this).css({'background-color':'#cccccc'});
			},
			function(){
				$(this).css({'background-color':'#f1f2d2'});
			}
		);
		$('#exap-content').fadeIn(3600);
	};


具体应用:
$(document).ready(function() {
	BJExtreme.UI.Effects.confXC();
});


页面链接:
http://beijingextreme.com.cn/forwardAction.php?Controller=Thailand#mid=11&sid=-1
0 请登录后投票
   发表时间:2009-07-09  
history.back();


返回上一页
0 请登录后投票
   发表时间:2009-07-09  
引用

从360某页面中摘出来的验证JS,其中身份证验证做的很地道,很不错,感觉很神奇


Validator = {
    Require : /.+/,
    Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
    Mobile : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
    Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
    IdCard : "this.IsIdCard(value)",
    Currency : /^\d+(\.\d+)?$/,
    Number : /^\d+$/,
    Zip : /^[1-9]\d{5}$/,
    QQ : /^[1-9]\d{4,8}$/,
    Integer : /^[-\+]?\d+$/,
    Double : /^[-\+]?\d+(\.\d+)?$/,
    English : /^[A-Za-z]+$/,
    Chinese :  /^[\u0391-\uFFE5]+$/,
    Username : /^[a-z]\w{3,}$/i,
    UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
    IsSafe : function(str){return !this.UnSafe.test(str);},
    SafeString : "this.IsSafe(value)",
    Filter : "this.DoFilter(value, getAttribute('accept'))",
    Limit : "this.limit(value.length,getAttribute('min'),  getAttribute('max'))",
    LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
    Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
    Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
    Range : "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')",
    Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
    Custom : "this.Exec(value, getAttribute('regexp'))",
    Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
    ErrorItem : [document.forms[0]],
    ErrorMessage : ["以下原因导致提交失败:\t\t\t\t"],
    Validate : function(theForm, mode){
    	var obj = theForm || event.srcElement;
    	var count = obj.elements.length;
    	this.ErrorMessage.length = 1;
    	this.ErrorItem.length = 1;
    	this.ErrorItem[0] = obj;
    	for(var i=0;i<count;i++){
    		with(obj.elements[i]){
    			var _dataType = getAttribute("dataType");
    			if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined")  continue;
    			this.ClearState(obj.elements[i]);
    			if(getAttribute("require") == "false" && value == "") continue;
    			switch(_dataType){
    				case "IdCard" :
    				case "Date" :
    				case "Repeat" :
    				case "Range" :
    				case "Compare" :
    				case "Custom" :
    				case "Group" : 
    				case "Limit" :
    				case "LimitB" :
    				case "SafeString" :
    				case "Filter" :
    					if(!eval(this[_dataType]))	{
    						this.AddError(i, getAttribute("msg"));
    					}
    					break;
    				default :
    					if(!this[_dataType].test(value)){
    						this.AddError(i, getAttribute("msg"));
    					}
    					break;
    			}
    		}
    	}
    	if(this.ErrorMessage.length > 1){
    		mode = mode || 1;
    		var errCount = this.ErrorItem.length;
    		switch(mode){
    		case 2 :
    			for(var i=1;i<errCount;i++)
    				this.ErrorItem[i].style.color = "red";
    		case 1 :
    			alert(this.ErrorMessage.join("\n"));
    			this.ErrorItem[1].focus();
    			break;
    		case 3 :
    			for(var i=1;i<errCount;i++){
    			    try{
        				var span = document.createElement("SPAN");
        				span.id = "__ErrorMessagePanel";
        				span.style.color = "red";
        				this.ErrorItem[i].parentNode.appendChild(span);
        				span.innerHTML = this.ErrorMessage[i].replace(/\d+:/," * ");
    				}
    				catch(e){alert(e.description);}
    			}
    			this.ErrorItem[1].focus();
    			break;
    		default :
    			alert(this.ErrorMessage.join("\n"));
    			break;
    		}
    		return false;
    	}
    	return true;
    },
    limit : function(len,min, max){
    	min = min || 0;
    	max = max || Number.MAX_VALUE;
    	return min <= len && len <= max;
    },
    LenB : function(str){
    	return str.replace(/[^\x00-\xff]/g,"**").length;
    },
    ClearState : function(elem){
    	with(elem){
    		if(style.color == "red")
    			style.color = "";
    		var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
    		if(lastNode.id == "__ErrorMessagePanel")
    			parentNode.removeChild(lastNode);
    	}
    },
    AddError : function(index, str){
    	this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
    	this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
    },
    Exec : function(op, reg){
    	return new RegExp(reg,"g").test(op);
    },
    compare : function(op1,operator,op2){
    	switch (operator) {
    		case "NotEqual":
    			return (op1 != op2);
    		case "GreaterThan":
    			return (op1 > op2);
    		case "GreaterThanEqual":
    			return (op1 >= op2);
    		case "LessThan":
    			return (op1 < op2);
    		case "LessThanEqual":
    			return (op1 <= op2);
    		default:
    			return (op1 == op2);            
    	}
    },
    MustChecked : function(name, min, max){
    	var groups = document.getElementsByName(name);
    	var hasChecked = 0;
    	min = min || 1;
    	max = max || groups.length;
    	for(var i=groups.length-1;i>=0;i--)
    		if(groups[i].checked) hasChecked++;
    	return min <= hasChecked && hasChecked <= max;
    },
    DoFilter : function(input, filter){
           return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input);
    },
    IsIdCard : function(number){
    	var date, Ai;
    	var verify = "10x98765432";
    	var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
    	var area = ['','','','','','','','','','','','北京','天津','河北','山西','内蒙古','','','','','','辽宁','吉林','黑龙江','','','','','','','','上海','江苏','浙江','安微','福建','江西','山东','','','','河南','湖北','湖南','广东','广西','海南','','','','重庆','四川','贵州','云南','西藏','','','','','','','陕西','甘肃','青海','宁夏','新疆','','','','','','台湾','','','','','','','','','','香港','澳门','','','','','','','','','国外'];
    	var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/i);
    	if(re == null) return false;
    	if(re[1] >= area.length || area[re[1]] == "") return false;
    	if(re[2].length == 12){
    		Ai = number.substr(0, 17);
    		date = [re[9], re[10], re[11]].join("-");
    	}
    	else{
    		Ai = number.substr(0, 6) + "19" + number.substr(6);
    		date = ["19" + re[4], re[5], re[6]].join("-");
    	}
    	if(!this.IsDate(date, "ymd")) return false;
    	var sum = 0;
    	for(var i = 0;i<=16;i++){
    		sum += Ai.charAt(i) * Wi[i];
    	}
    	Ai +=  verify.charAt(sum%11);
    	return (number.length ==15 || number.length == 18 && number == Ai);
    },
    IsDate : function(op, formatString){
    	formatString = formatString || "ymd";
    	var m, year, month, day;
    	switch(formatString){
    		case "ymd" :
    			m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
    			if(m == null ) return false;
    			day = m[6];
    			month = m[5]*1;
    			year =  (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
    			break;
    		case "dmy" :
    			m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
    			if(m == null ) return false;
    			day = m[1];
    			month = m[3]*1;
    			year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
    			break;
    		default :
    			break;
    	}
    	if(!parseInt(month)) return false;
    	month = month==0 ?12:month;
    	var date = new Date(year, month-1, day);
           return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate());
    	function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
    },
    getObj : function(name){
        var objs = document.getElementsByName(name);
        return objs[objs.length -1];
    },
    dispError : function(items, messages, mode, separator){
        var iArray = items.split(separator);
        for(var i=iArray.length-1;i>=0;i--)
            iArray[i] = this.getObj(iArray[i]);
        messages = ("以下原因导致提交失败:\t\t\t\t" + separator + messages).split(separator);
        switch(mode){
            case 2 :
                for(i=iArray.length-1;i>=0;i--)
                    iArray[i].style.color = "red";
            case 1 :
                alert(messages.join("\n"));
                iArray[0].focus();
                break;
            case 3 :
                for(i=iArray.length-1;i>=0;i--){
                    try{
                        var span = document.createElement("SPAN");
                        span.id = "__ErrorMessagePanel";
                        span.style.color = "red";
                        iArray[i].parentNode.appendChild(span);
                        span.innerHTML = messages[i+1].replace(/\d+:/," * ");
                    }
                    catch(e){alert(e.description);}
                }
                iArray[0].focus();
                break;
        }
    }
}

0 请登录后投票
   发表时间:2009-08-05  
图片漂浮广告代码

<!--图片漂浮广告代码开始-->

<div id="sese" style="position:absolute;display:none">
<!--链接地址--><a href="http://vb2005xu.iteye.com" target="_blank">
<!--图片地址--><img src="http://www.iteye.com/upload/logo/user/35330/4e311ac1-0916-340c-83bf-e343e6f44427.jpg?1236833606" border="0" width="100" height="90">
</a>
</div>

<script> 
var x = 50,y = 60 
var xin = true, yin = true 
var step = 3 
var delay = 30 
var obj=document.getElementById("sese") 
obj.style.display = '' ;
function ad1() { 
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth 
var B = document.body.clientHeight-obj.offsetHeight 
obj.style.left = x + document.body.scrollLeft 
obj.style.top = y + document.body.scrollTop 
x = x + step*(xin?1:-1) 
if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T } 
if (y > B) { yin = false; y = B } 
} 
var itl= setInterval("ad1()", delay) 
obj.onmouseover=function(){clearInterval(itl)} 
obj.onmouseout=function(){itl=setInterval("ad1()", delay)} 
</script>

<!--图片漂浮广告代码结束-->
<div id="body" style="width:99.9%;height:150%;background-color:#efc;" title="用这个作为根块" >

</div>
0 请登录后投票
   发表时间:2009-08-05  
对于上面的 "图片漂浮广告代码" 做个简单的补充,可能由于w3c的标准作怪,你看你运行这段代码出现一点小问题

当你在HTML页面中使用了 xhtml的申明时,譬如加上了这个
引用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


当页面高度超出现滚动条时 就会出现  漂移div 下到最下面的现象.参见下文:
http://hi.baidu.com/bluedream_119/blog/item/dc377d4bef83aff783025c68.html

引用

关于获取各种浏览器可见窗口大小的一点点研究
<script>
function getInfo()
{
var s = "";
s = " 网页可见区域宽:" document.body.clientWidth;
s = " 网页可见区域高:" document.body.clientHeight;
s = " 网页可见区域宽:" document.body.offsetWidth " (包括边线和滚动条的宽)";
s = " 网页可见区域高:" document.body.offsetHeight " (包括边线的宽)";
s = " 网页正文全文宽:" document.body.scrollWidth;
s = " 网页正文全文高:" document.body.scrollHeight;
s = " 网页被卷去的高(ff):" document.body.scrollTop;
s = " 网页被卷去的高(ie):" document.documentElement.scrollTop;
s = " 网页被卷去的左:" document.body.scrollLeft;
s = " 网页正文部分上:" window.screenTop;
s = " 网页正文部分左:" window.screenLeft;
s = " 屏幕分辨率的高:" window.screen.height;
s = " 屏幕分辨率的宽:" window.screen.width;
s = " 屏幕可用工作区高度:" window.screen.availHeight;
s = " 屏幕可用工作区宽度:" window.screen.availWidth;


s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话 在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)


原因如上,解决方案如下:

//var R= document.body.clientWidth-obj.offsetWidth 
var R= document.documentElement.clientWidth-obj.offsetWidth 

//var B = document.body.clientHeight-obj.offsetHeight 
var B = document.documentElement.clientHeight-obj.offsetHeight 

obj.style.left = x + document.documentElement.scrollLeft 
//obj.style.left = x + document.body.scrollLeft 

obj.style.top = y + document.documentElement.scrollTop 
//obj.style.top = y + document.body.scrollTop 


将 document.body 换成 document.documentElement ,因为你是用了w3c标准,另外
还要重新设置

<div id="body" title="用这个作为根块" >

</div>
<style>
html,body{
	height: 100%;
}
</style>



完整的代码如下:
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>过客阵营</title>
</head>
<body>
<!--图片漂浮广告代码开始-->

<div id="sese" style="position:absolute;display:none">
<!--链接地址--><a href="http://vb2005xu.iteye.com" target="_blank">
<!--图片地址--><img src="http://www.iteye.com/upload/logo/user/35330/4e311ac1-0916-340c-83bf-e343e6f44427.jpg?1236833606" border="0" width="100" height="90">
</a>
</div>

<script> 
var x = 50,y = 60 
var xin = true, yin = true 
var step = 3 
var delay = 30 
var obj=document.getElementById("sese") 
obj.style.display = '' ;

obj.title = document.documentElement.clientHeight ;
function ad1() { 
var L=T=0
//var R= document.body.clientWidth-obj.offsetWidth 
var R= document.documentElement.clientWidth-obj.offsetWidth 

//var B = document.body.clientHeight-obj.offsetHeight 
var B = document.documentElement.clientHeight-obj.offsetHeight 

obj.style.left = x + document.documentElement.scrollLeft 
//obj.style.left = x + document.body.scrollLeft 

obj.style.top = y + document.documentElement.scrollTop 
//obj.style.top = y + document.body.scrollTop 


x = x + step*(xin?1:-1) 
if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T } 
if (y > B) { yin = false; y = B } 
} 
var itl= setInterval("ad1()", delay) 
obj.onmouseover=function(){clearInterval(itl)} 
obj.onmouseout=function(){itl=setInterval("ad1()", delay)} 
</script>

<!--图片漂浮广告代码结束-->


<div id="body" title="用这个作为根块" >

</div>
<style>
html,body{
	height: 100%;
}

div.#body{
	width:99.9%;height:150%;background-color:#efc;
}
</style>

</body>
</html>

0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics