JavaScript应用实践（一）之实用函数

最新推荐文章于 2021-02-26 11:52:42 发布

你的目光温柔如水

最新推荐文章于 2021-02-26 11:52:42 发布

阅读量394

点赞数

分类专栏： JSnote

本文链接：https://blog.csdn.net/qq_41443301/article/details/81028183

版权

JSnote 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

（一）通过正则表达式验证日期

var expression = /^(
(
	((1[6-9]|[2-9]\d)\d{2})(\/|\.|\-)
	(0?[13578]|1[02])(\/|\.|\-)
	(0?[1-9]|[12]\d|3[01])
)|(
	((1[6-9]|[2-9]\d)\d{2})(\/|\.|\-)
	(0?[13456789]|1[012])(\/|\.|\-)
	(0?[1-9]|[12]\d|30)
)|(
	((1[6-9]|[2-9]\d)\d{2})(\/|\.|\-)
	(0?2)(\/|\.|\-)
	(0?[1-9]|1\d|2[0-8])
)|(
	(
	(1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)
	)-0?2-29-
)
)$/;   //验证日期的正则表达式

function checkdate(str){
	var expression = /^((((1[6-9]|[2-9]\d)\d{2})(\/|\.|\-)(0?[13578]|1[02])(\/|\.|\-)(0?[1-9]|[12]\d|3[01]))
	|(((1[6-9]|[2-9]\d)\d{2})(\/|\.|\-)(0?[13456789]|1[012])(\/|\.|\-)(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)
	\d{2})(\/|\.|\-)(0?2)(\/|\.|\-)(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|
	((16|[2468][048]|[3579][26])00))-0?2-29-))$/;
	var objreg = new RegExp(expression);
	if (objreg.test(str)) {
		return true;
	} else{
		return false;
	}
}

（二）检查表单元素是否为空

function checkform(form){
	for (var i = 0; i < form.length; i++) {
		if (form.elements[i].value=="") {
			alert(form.elements[i].title+"不能为空！")；
			form.elements[i].focus();
			return;
		}
	}
	form.submit();
}

（三）验证E-mail是否正确

var expression = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

function checkemail(str){
	var expression = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
	var objreg = new RegExp(expression);
	if (objreg.test(str)) {
		return true;
	} else{
		return false;
	}
}

（四）验证电话号码是否正确

（五）验证身份证号码是否正确

var expression = /^\d{17}[\d|X]|^\d{15}$/;

function checkenum(str){
	var expression = /^\d{17}[\d|X]|^\d{15}$/;
	var objreg = new RegExp(expression);
	if (objreg.test(str)) {
		return true;
	} else{
		return false;
	}
}

（六）验证用户名及密码是否正确

//由3-10位的字母、数字和下划线组成的正则表达式
var expression = /^(\w){3,10}$/;
//由6-20位的字母、数字、下划线和点“.”组成的正则表达式
var expression = /^[A-Za-z]{1}[A-Za-z0-9]|[.]{5,19}$/;

（七）随机产生指定位数的验证码

function checkcode (digit) {
	var result="";
	for (var i = 0; i < parseInt(digit); i++) {
		result = result+(parseInt(Math.random()*10)).toString;
	}
	return result;
}

（八）显示长日期格式的系统日期

function clock (bgclock) {
	var now = new Date();
	var year = now.getYear();
	var month = now.getMonth()+1;
	var date = now.getDate();
	var day = now.getDay();
	if (month<10) {
		month = "0" + month;
	}if (date<10){
		date = "0" + date;
	}
	var arr_week = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
	var week = arr_week[day];
	var time = year+"年"+month+"月"+date+"日"+week;
	if (document.all) {
		bgclock.innerHTML = time;
	}
	var timer = setTimeout("clock(bgclock)",200);
}

（九）显示实时系统日期时间

function clock (bgclock) {
	var now = new Date();
	var year = now.getYear();
	var month = now.getMonth()+1;
	var date = now.getDate();
	var day = now.getDay();
	var hour = now.getHours();
	var minute = now.getMinutes();
	var second = now.getSeconds();
	if (month<10) {
		month = "0" + month;
	}if (date<10){
		date = "0" + date;
	}if (hour<10) {
		hour = "0" + hour;
	}if (minute<10) {
		minute = "0" + minute;
	}if (second<10) {
		second = "0" + second;
	}
	var arr_week = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
	var week = arr_week[day];
	var time = year+"年"+month+"月"+date+"日"+week+" "+hour+":"+minute+":"+second;
	if (document.all) {
		bgclock.innerHTML = time;
	}
	var timer = setTimeout("clock(bgclock)",200);
}

（十）导航条图片动画效果

function move (image,num) {
	image.src = "image" + num + "_big.png"
}
function out (image,num) {
	image.src = "image" + num + "_small.png"
}

<img src="image0_small.png" οnmοusemοve="move(this,0)" οnmοuseοut="out(this,0)">

（十一）半透明背景的下拉菜单

var menuoffx=0;  //菜单距链接文字最左端的距离
var menuoffy=18;  //菜单距链接文字顶端的距离
var fo_shadows = new Array();
var linkset = new Array();
var IE4 = document.all&&navigator.userAgent.indexOf("Opera")==-1;
var netscape6 = document.getElementById&&!document.all;
var netscape4 = document.layers;

function showmenu (e,vmenu,mod) {
	if(!document.all&&!document.getElementById&&!document.layers){
		return;
	}
	which = vmenu;
	clearhidemenu();
	IE_clearshadow();
	menuobj = IE4?document.all.popmenu:netscape6?document.getElementById("popmenu"):netscape4?document.popmenu:"";
	menuobj.thestyle = (IE4||netscape6)?menuobj.style:menuobj;
	if (IE4||netscape6) {
		menuobj.innerHTML = which;
	}else{
		menuobj.document.write('<layer name="other" bgColor="#E6E6E6" width="165" οnmοuseοver="clearhidemenu()"
			οnmοuseοut="hidemenu()">'+which+'</layer>')
		menuobj.document.close();
	}
	menuobj.contentwidth = (IE4||netscape6)?menuobj.offsetWidth:menuobj.document.other.document.width;
	menuobj.contentheight = (IE4||netscape6)?menuobj.offsetHeight:menuobj.document.other.document.height;
	eventx = IE4?event.clientX:netscape6?event.clientX:e.x;
	eventy = IE4?event.clientY:netscape6?event.clientY:e.y;
	var rightedge = IE4?document.body.clientWidth-eventx:window.innerWidth-eventx;
	var bottomedge = IE4?document.body.clientHeight-eventy:window.innerHeight-eventy;

	if (rightedge<menuobj.contentwidth) {
		menuobj.thestyle.left = IE4?document.body.scrollLeft+eventx-menuobj.contentwidth+menuoffx:netscape6?
		window.pageXOffset+eventx-menuobj.contentwidth:eventx-menuobj.contentwidth;
	}else{
		menuobj.thestyle.left = IE4?IE_x(event.srcElement)+menuoffx:netscape6?window.pageXOffset+eventx:eventx;
	}
	if (bottomedge<menuobj.contentheight&&mod!=0) {
		menuobj.thestyle.top = IE4?document.body.scrollTop+eventy-menuobj.contentheight-event.offsetY+menuoffy-23:netscape6?
		window.pageYOffset+eventy-menuobj.contentheight-10:eventy-menuobj.contentheight;
	}else{
		menuobj.thestyle.top = IE4?IE_y(event.srcElement)+menuoffy:netscape6?window.pageYOffset+eventy+10:eventy;
	}
	menuobj.thestyle.visibility = "visible";
	IE_dropshadow(menuobj,"#999999",3);
	return false;
}	

function hidemenu () {
	if (window.menuobj) {
		menuobj.thestyle.visibility = (IE4||netscape6)?"hidden":"hide";
	}
	IE_clearshadow();
}
function clearhidemenu () {
	if (window.delayhide) {
		clearTimeout(delayhide);
	}
}
function dynamichide (e) {
	if (IE4&&!menuobj.contains(e.toElement)) {
		hidemenu();
	}else if(netscape6&&e.currentTarget!=e.relatedTarget&&!contains_netscape6(e.currentTarget,e.relatedTarget)){
		hidemenu();
	}
}
function delayhidemenu () {
	if (IE4||netscape6||netscape4) {
		delayhide = setTimeout("hidemenu()",500);
	};
}
function highlightmenu (e,state) {
	if (document.all) {
		source_el = event.srcElement;
	}else if (document.getElementById) {
		source_el = e.target;
	}
	if (source_el.className=="menuitems") {
		source_el.id=(state=="on")?"mouseoverstyle":"";
	}else{
		while(source_el.id!="popmenu"){
			source_el=document.getElementById?source_el.parentNode:source_el.parentElement;
			if (source_el.className=="menuitems") {
				source_el.id=(state="on")?"mouseoverstyle":"";
			}
		}
	}
}
function IE_y (e) {
	var t = e.offsetTop;
	while(e=e.offsetParent){
		t+=e.offsetTop;
	}
	return t;
}
function IE_x (e) {
	var l = e.offsetLeft;
	while(e=e.offsetParent){
		l+=e.offsetLeft;
	}
	return l;
}
function IE_dropshadow (el,color,size) {
	for (var i = size; i>0; i--) {
		var rect = document.getElementById('div');
		var rs = rect.style;
		rs.position = 'absolute';
		rs.left = (el.style.posLeft+i)+'px';
		rs.top = (el.style.posTop+i)+'px';
		rs.width = el.offsetWidth+'px';
		rs.height = el.offsetHeight+'px';
		rs.zIndex = el.style.zIndex-i;
		rs.backgroundColor = color;
		var opacity = 1-i/(i+1);
		rs.filter = 'alpha(opacity='+(100*opacity)+')';
		fo_shadows[fo_shadows.length] = rect;
	}
}
function IE_clearshadow () {
	for (var i = 0; i < fo_shadows.length; i++) {
		if(fo_shadows[i])
			fo_shadows[i].style.display = "none";
	}
	fo_shadows[i] = new Array();
}

<div id="popmenu" class="menuskin" οnmοuseοver="clearhidemenu();highlightmenu(event,'on')"
	οnmοuseοut="highlightmenu(event,'off');dynamichide(event)">
</div>

（十二）收缩式侧导航条

function show (obj,maxg,obj2) {
	if (obj.style.pixelHeight<maxg) {
		obj.style.pixelHeight+=maxg/10;
		obj.filter.alpha.opacity +=20;
		if (obj.style.pixelHeight==maxg/10) {
			obj.style.display='block';
		}
		myObj = obj;
		mymaxg = maxg;
		myObj2 = obj2;
		setTimeout('show(myObj,mymaxg,myObj2)','5');
	}
}
function hide (obj,maxg,obj2) {
	if (obj.style.pixelHeight>0) {
		if (obj.style.pixelHeight==maxg/5) {
			obj.style.display='none';
			obj.style.pixelHeight -= maxg/5;
			obj.filter.alpha.opacity -=10;
			myObj = obj;
			mymaxg = maxg;
			myObj2 = obj2;
			setTimeout('hide(myObj,mymaxg,myObj2)','5');
		}
	}else if (whichContinue) {
			whichContinue.click();
	}
}
function chang (obj,maxg,obj2) {
	if (obj.style.pixelHeight) {
		hide(obj,maxg,obj2);
		nopen="";
		whichContinue="";
	}else if (nopen) {
		whichContinue=obj2;
		nopen.click();
	}else{
		show(obj,maxg,obj2);
		nopen=obj2;
		whichContinue="";
	}
}

<TD class="list_title" id="list" οnmοuseοver="this.typename='list_title2'" οnmοuseοut="this.typename='list_title'" οnclick="chang(menu1,60,list1)"><span></span></TD>

（十三）带记忆功能的表单

<!DOCTYPE html>
<html>
<head>
	<title>记忆功能</title>
	<meta name="save" content="history">
	<style type="text/css">
		.savehistory{
			behavior:url(#default#savehistory);
		}
	</style>
</head>
<body>
	<input name="txt_unit" type="text" class="savehistory">
	<input name="txt_co" type="text" class="savehistory">
</body>
</html>

（十四）防止表单重复提交

<input name="submit" type="button" οnclick="this.disabled=true;this.form.submit();">

你的目光温柔如水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript应用实践（一）之实用函数

（一）通过正则表达式验证日期var expression = /^(( ((1[6-9]|[2-9]\d)\d{2})(\/|\.|\-) (0?[13578]|1[02])(\/|\.|\-) (0?[1-9]|[12]\d|3[01]))|( ((1[6-9]|[2-9]\d)\d{2})(\/|\.|\-) (0?[13456789]|1[012])(\/|\.|\-) (0...
复制链接

扫一扫