使用JavaScript制作页面效果3

时间：2023-03-09 15:44:43
使用JavaScript制作页面效果3

一、

1.下拉列表：select对象

属性：

option[ ]：选项数组

selectedIndex：被选中选项的索引号

length：选项总数

方法：

add(option对象，添加位置)：增加选项

2.JavaScript访问样式的常用方法

style属性（对象）

className属性

3.实现元素的显示和隐藏

display属性：

none:不显示

block：显示

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>显示和隐藏图片</title>

		<script type="text/javascript">

			function showImage(){

				document.getElementById("photo").style.display="block";

				}

			function hideImage(){

				document.getElementById("photo").style.display="none";

			}

		</script>

	</head>

	<body>

		<div id="photo"><img src="img/book1.jpg"/></div>

		<input type="button" value="显示图片" onclick="showImage();" />

		<input type="button" value="隐藏图片" onclick="hideImage();" />

	</body>

</html>

　　运行结果

使用JavaScript制作页面效果3

点击隐藏图片后

使用JavaScript制作页面效果3

4.获取或设置坐标方面的样式属性

style对象定位方面的样式

left、top

right、bottom

position

z-index

5.获取样式

行内样式：style对象

内部/外部样式：

IE浏览器：currentStyle属性

Firefox等浏览器：document.defaultView.getComputedStyle()方法

6.获取滚动距离

Onscroll事件

scrollTop：纵向距离

scrollLeft：横向距离

实例代码：HTML代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>随鼠标滚动的广告图片</title>

		<style type="text/css">

			#main {

				text-align: center;

			}

			#adver {

				position: absolute;

				left: 50px;

				top: 30px;

				z-index: 2;

			}

		</style>

		<script type="text/javascript">

			var adv;

			var left,top;

			function init(){

				adv=document.getElementById("adver");

				if(adv.currentStyle){

					left=adv.currentStyle.left;

					top=adv.currentStyle.top;

				}else{

					left=document.defaultView.getComputedStyle(adv,null).left;

					top=document.defaultView.getComputedStyle(adv,null).top;

				}

				left =parseInt(left);

				top=parseInt(top);

			}

			function move(){

				var scrollTop=document.documentElement.scrollTop;

				var scrollLeft=document.documentElement.scrollLeft;

			    scrollLeft =parseInt(scrollLeft);

				scrollTop=parseInt(scrollTop);

				adv.style.left=left+scrollLeft+"px";

				adv.style.top=left+scrollTop+"px";

			}

			window.onload=init;

			window.onscroll=move;

		</script>

	</head>

	<body>

		<div id="adver"><img src="img/adv.jpg" /></div>

		<div id="main"><img src="img/main1.JPG" /><img src="data:images/main2.jpg" /><img src="data:images/main3.jpg" /></div>

	</body>

</html>

　　运行结果

使用JavaScript制作页面效果3

二、表单验证

常用元字符：
代码 　　　　　　　　　　说明
. 　　　　　　　　　　　　匹配除换行符以外的任意字符
\w 　　　　　　　　　　　 匹配字母或数字或下划线
\s 　　　　　　　　　　　 匹配任意的空白符
\d 　　　　　　　　　　　 匹配数字
\b 　　　　　　　　　　　 匹配单词的开始或结束
^ 　　　　　　　　　　　　匹配行的开始
$ 　　　　　　　　　　　　匹配行的结束

常用反义元字符：
代码 　　说明
\W 　　　　  匹配任意不是字母，数字，下划线，汉字的字符
\S 　　 　　  匹配任意不是空白符的字符
\D 　　　　　匹配任意非数字的字符
\B 　　 　　  匹配不是单词开头或结束的位置
[^x] 　 　　  匹配除了x以外的任意字符

常用重复限定符：
代码 　　　　　　说明
* 　　　　　　　 重复零次或更多次
+ 　　　　　　　 重复一次或更多次
? 　　　　　　　 重复零次或一次
{n} 　　　　　　重复n次
{n,} 　　　　　  重复n次或更多次
{n,m} 　　　　  重复n到m次

1.String属性

属性：length：字符串的长度

方法：

toLowerCase()：转换为小写

toUpperCase()：转换为大写

toAt(index)：返回在指定位置的字符

indexOf(字符串，index)：查找字符串值首次出现的位置

substring(index1,index2)：截取字符串

实例：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>模拟Word的查找和替换</title>

		<script src="js/findReplace.js"></script>

	</head>

	<body>

		<form id="form1" name="form1" method="post" action="">

			<caption>模拟Word的查找和替换</caption>

			<table width="200" border="1">

				<tr>

					<td colspan="2"><textarea id="wordText" cols="50" rows="10">什么是 RegExp？

RegExp 是正则表达式的缩写。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符<span style="color:red">，并可用于解析、格式检查、替换等等。

您可以规定</span>字符串中的检索位置，以及要检索的字符类型，等等。

</textarea></td>

				</tr>

				<tr>

					<td><input name="find" type="button" id="find" value="查找字符串" onclick="findString()" /> </td>

					<td><input type="text" id="findText" /></td>

				</tr>

				<tr>

					<td><input name="replace" type="button" value="替换字符串" onclick="replaceString()" /></td>

					<td><input type="text" id="replaceText" /></td>

				</tr>

			</table>

		</form>

	</body>

</html>

　　运行结果：

使用JavaScript制作页面效果3

点击查找字符串的按钮，结果如下

使用JavaScript制作页面效果3

点击替换字符串的按钮，结果如下

使用JavaScript制作页面效果3

2.Textbox文本框对象

属性

value:文本框的值

方法：

blur()：从文本域中移开焦点

focus()：从文本域中示设置焦点

select()：选取文本域中的内容

事件：

onblur：失去焦点

onfocus：获得焦点

onkeypress：键盘按下

3.String对象支持正则表达式的方法

search(正则表达式)：返回匹配的位置

match(正则表达式)：返回匹配的字符串

replace(正则表达式，替换字符串)：返回替换后的结果

实例：HTML代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>休闲网</title>

		<link type="text/css" rel="stylesheet" href="css/xiuxian.css" />

		<script type="text/javascript" src="js/bd.js"></script>

	</head>

	<body>

		<div id="header">

			<div id="logo"><img src="img/logo.gif"/></div>

			<div id="help">注册  | 登录 | 帮助</div>

			<div class="clear"></div>

		</div>

		<div id="register">

			<h1>注册休闲网</h1>

			<form action="" method="post" name="myForm" onsubmit="return check()">

			<table cellpadding="0" cellspacing="0">

				<tr>

					<td class="info">您的Email：</td>

					<td><input id="email" type="text" name="email" class="input-text" onblur="checkeEmail();"/><span id="emailMessage"></span></td>

				</tr>

				<tr>

					<td class="info">输入密码：</td>

					<td><input id="pwd" type="password" name="password" class="input-text" onblur="checkPwd();"/><span id="pwdMsg"></span></td>

				</tr>

				<tr>

					<td class="info">再输入一遍密码：</td>

					<td><input id="repwd" type="password" name="password" class="input-text"onblur="checkRepwd();"/><span id="repwdMsg"></span></td>

				</tr>

				<tr>

					<td class="info">您的姓名：</td>

					<td><input  id="user" type="text" name="name" class="input-text"onblur="checkUser();"/><span id="userMsg"></span></td>

				</tr>

				<tr>

					<td class="info">性别：</td>

					<td><input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="1"/>女</td>

				</tr>

				<tr>

					<td class="info">出生日期：</td>

					<td>

						<select name="birthYear" >

							<option value="1998">1998</option>

							<option value="1996">1996</option>

						</select>年

						<select name="birthMonth" >

							<option value="12">12</option>

							<option value="6">6</option>

						</select>月

						<select name="birthDay" >

							<option value="1">1</option>

							<option value="6">6</option>

						</select>日

					</td>

				</tr>

				<tr>

					<td></td>

					<td><input type="submit" name="submit" value="注册" class="input-button" /></td>

				</tr>

			</table>

			</form>

		</div>

		<div id="footer">

			<a href="#">关于我们</a>  |<a href="#"> 诚聘英才 </a>  | <a href="#">联系方式  </a>  | <a href="#">帮助中心</a>

		</div>

	</body>

</html>

　　css代码：

body{margin: 0;padding: 0;font-size: 12px;}

#header{background: url(../img/bg.gif) repeat-x;line-height: 36px;}

#logo{float: left;}

#help{float:right;margin-right:20px ;color: white;}

.clear{clear: both;}

#register{width: 550px; margin: 0px auto;padding: 30px 0 ;}

#register h1{text-align: center; font-size: 16px;}

#register table{width: 100%;}

#register table td{line-height: 30px;}

#register table td.info{text-align: right;}

#register .input-text{border: 1px solid #999999;width: 150px;}

#register .input-button{background: #f36; color: #FFFFFF;border-left:1px solid #FFFFFF ;border-top: 1px solid #FFFFFF;

border-right:  1px solid #000000; border-left:  1px solid #000000;}

#footer{text-align: center;color: #999999;}

#footer a{color: #999999;text-decoration: underline;}

　　JavaScript代码

function $(id){

 return	document.getElementById(id);

}

function checkeEmail(){

	var email=$("email").value ;

	if(email=="")

	{

		$("emailMessage").innerHTML="Email不能为空。";

		return false;

	}

	if(email.indexOf("@")==-1||email.indexOf(".")==-1){

        $("emailMessage").innerHTML="Email格式不正确，必须包含@和.";

        return false;

	}

	return true;

}

function checkPwd(){

	var pwd=$("pwd").value;

	if(pwd==""){

        $("pwdMsg").innerHTML="密码不能为空";

        return false;

	}

	if(pwd.length<6){

        $("pwdMsg").innerHTML="密码必须等于或者大于6个字符";

        return false;

	}

	return true;

}

function checkRepwd(){

	var repwd=$("repwd").value;

	if(repwd!=$("pwd").value){

        $("repwdMsg").innerHTML="两次密码不一致";

        return false;

	}

	return true;

}

function checkUser(){

	var user=$("user").value;

	if(user==""){

        $("userMsg").innerHTML="姓名不能为空";

        return false;

	}

	for(var i=0;i<user.length;i++){

		var j=user.substring(i,i+1);

		if(isNaN(j)==false){

        $("userMsg").innerHTML="姓名中不能有数字";

        return false;

		}

	}

	return true;

}

function check(){

	if(checkeEmail()&&checkPwd()&&checkRepwd()&&checkUser()){

		return true;

	}else {

	return false;

	}

}

　　运行结果

使用JavaScript制作页面效果3

当不填信息时，结果如下，会给出提醒信息：email，密码，姓名不能为空

使用JavaScript制作页面效果3

里面不填内容，当直接点击注册时，会提醒email不能为空

使用JavaScript制作页面效果3

输入错误的email，密码，姓名时，会给错误提醒

使用JavaScript制作页面效果3

实现这种效果都是在input表签里加入onblur事件。

三、今天遇到的问题

电子邮件的格式用正则表达式表示“/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/”。

固定电话的格式用正则表达式表示“/^\d{3,4}-\d{7,8}$/”。

相关文章