使用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>
运行结果
点击隐藏图片后
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>
运行结果
二、表单验证
代码 说明
. 匹配除换行符以外的任意字符
\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>
运行结果：
点击查找字符串的按钮，结果如下
点击替换字符串的按钮，结果如下
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;
}
}
运行结果
当不填信息时，结果如下，会给出提醒信息：email，密码，姓名不能为空
里面不填内容，当直接点击注册时，会提醒email不能为空
输入错误的email，密码，姓名时，会给错误提醒
实现这种效果都是在input表签里加入onblur事件。
三、今天遇到的问题
电子邮件的格式用正则表达式表示“/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/”。
固定电话的格式用正则表达式表示“/^\d{3,4}-\d{7,8}$/”。
使用JavaScript制作页面效果3的更多相关文章
- 【JavaScript制作页面时常用的五个特效，你用到了哪个？】
常用的五个特效的相关知识点见附录(五道例题后有附录哦~): 例一: 1.在某页面中有一个图片和五个超链接,如下图所示: 单击不同的数字超链接显示不同的图片: 图1 图片幻灯片显示效果 提示: (1)默 ...
- 用JavaScript制作页面特效
1.Window对象 名称 history:有关客户访问过的URL的信息 location:有关当前URL的信息 screen:有关客户端的屏幕和显示性能的信息 常用方法 prompt():弹出输入框 ...
- 使用JavaScript制作页面特效2
1.Date对象的常用方法 setFullYear() setMonth() setDate() setHours() setMinutes() setSeconds() 定时函数 setTimeou ...
- javascript实现页面滚屏效果
当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析.本示例在页面右侧有五个数字标签,代表五个 ...
- Android - FragmentTabHost 与 Fragment 制作页面切换效果
使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...
- Android - TabHost 与 Fragment 制作页面切换效果
Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...
- 使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容，决定页面效果，用户在下拉列表框中选择页面将要使用的背景颜色
查看本章节 查看作业目录 需求说明: 根据在下拉列表框中选择的内容,决定页面效果 用户在下拉列表框中选择页面将 要使用的背景颜色 当用户选择橙色时,页面背景将显示为橙色 实现思路: 用表单 <s ...
- 如何用iframe标签以及Javascript制作时钟？
如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...
- jQuery插件-jgcharts实现Javascript制作Google Charts
from:http://www.zz68.net/program/Ajax/2010/0415/1992.html jgcharts是一个基于jQuery的非常经典的Google Charts图表制作 ...
随机推荐
- Java基于opencv实现图像数字识别(四)—图像降噪
Java基于opencv实现图像数字识别(四)-图像降噪 我们每一步的工作都是基于前一步的,我们先把我们前面的几个函数封装成一个工具类,以后我们所有的函数都基于这个工具类 这个工具类呢,就一个成员变量 ...
- java中数组实现的错误
作为一个刚学java的小白 真是错误百出 下面就是一个大神会非常不屑的一个小错误 数组在初始化的时候仅仅是定义了一个数组,并未其中的内容初始化. 附上错误代码 : class student{publ ...
- echarts立体效果地图-自定义区域及文字
setgeomap: function (_id, _fn) { // 全城拥堵占比 GLOBAL.myMapChart = echarts.init(document.getElementById( ...
- day10 参数args kwargs 作用域
函数参数/作用域/args/kwargs 1.参数 1.1参数基本知识 任意个数 任意类型 func("1",True) 1.2位置传参(调用函数并传入参数) def func(a ...
- 2.3 i++/i--与++i/--i的运算
一.i++/i--: i先参与运算,运算完成后自加/减1: public class Test{ public static void main(String[] args){ // [1] ; i+ ...
- Cookie保存用户名和密码
首次登录: 第二次登录: 百度网盘: 链接: https://pan.baidu.com/s/12W4B5-Bfyc_021oyVYkEJw 提取码: r55h
- JVM垃圾回收机制之对象回收算法
前言 在前面的文章中,介绍了JVM内存模型分为:堆区.虚拟机栈.方法区.本地方法区和程序计数器,其中堆区是JVM中最大的一块内存区域,在Java中的所有对象实例都保存在此区域,它能被所有线程共享. 在 ...
- hsdf -- 6.21 -- day6
差点忘写总结…… 这么快就到day6了啊 感觉前面写的总结都是苟屁,跟没有有什么区别…… 今天认真总结一下 最大的失误就是全程肝a题,最后还挂了…… 感觉今天方向偏了,由进行一次测试到仅仅是想要尽可能 ...
- dbca建库--linux上使用vnc图形化安装oracle10g版本
选择创建数据库 配不配置em,自己决定,我们选择配置 配置下面账户密码,在项目中,下面账户肯定是不相同的,我们这里输入相同的,密码为oracle10g 选择文件系统存放(asm和字符设备暂时不能存放) ...
- Linux atop监控说明
2017-02-22 09:42 by pursuer.chen, 7060 阅读, 2 评论, 收藏, 编辑 介绍 atop是一个功能非常强大的linux服务器监控工具,它的数据采集主要包括:CPU ...