使用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="显示图片" οnclick="showImage();" /><input type="button" value="隐藏图片" οnclick="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.οnlοad=init;window.οnscrοll=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="查找字符串" οnclick="findString()" /> </td><td><input type="text" id="findText" /></td></tr><tr><td><input name="replace" type="button" value="替换字符串" οnclick="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" οnsubmit="return check()"><table cellpadding="0" cellspacing="0"><tr><td class="info">您的Email：</td><td><input id="email" type="text" name="email" class="input-text" οnblur="checkeEmail();"/><span id="emailMessage"></span></td></tr><tr><td class="info">输入密码：</td><td><input id="pwd" type="password" name="password" class="input-text" οnblur="checkPwd();"/><span id="pwdMsg"></span></td></tr><tr><td class="info">再输入一遍密码：</td><td><input id="repwd" type="password" name="password" class="input-text"οnblur="checkRepwd();"/><span id="repwdMsg"></span></td></tr><tr><td class="info">您的姓名：</td><td><input id="user" type="text" name="name" class="input-text"οnblur="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}$/”。
转载于:https://www.cnblogs.com/zp-frighting/p/10502291.html
使用JavaScript制作页面效果3相关推荐
- JavaScript制作页面倒计时器
制作页面倒计时器,选定一个未来时间,得到几天几时几分几秒的倒计时. 在这里选择使用两个时间相差的毫秒数来计算相对应的天数.小时数.分钟数和秒数.为了使代码看起来简洁,进行了封装函数. 1.setInt ...
- 用JavaScript制作页面特效
1.Window对象 名称 history:有关客户访问过的URL的信息 location:有关当前URL的信息 screen:有关客户端的屏幕和显示性能的信息 常用方法 prompt():弹出输入框 ...
- 使用JavaScript制作页面特效2
1.Date对象的常用方法 setFullYear() setMonth() setDate() setHours() setMinutes() setSeconds() 定时函数 setTimeou ...
- 【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发 八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...
- CRM后台管理系统：HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)
CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...
- HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
- CRM后台管理系统：HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)...
CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...
- javascript实现页面滚屏效果
当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析.本示例在页面右侧有五个数字标签,代表五个 ...
- html5 打字机效果,使用JavaScript制作打字机文本效果
我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介.我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如轻量级响应式jQuery打字机特效插件和逼真的js打 ...
最新文章
- Go 学习笔记（46）— Go 标准库之 fmt（输入/输出格式化参数、Printf/Fprintf/Sprintf区别、Println/Fprintln/Sprintln 区别）
- 如何活着：欲望、外界、标签、天才、时间、人生目标和经历
- 第一个hibernate程序
- 【JavaWeb】Response请求转发与重定向辨析
- webpack 配置详解
- 常用的友元重载运算符OSTREAM
- 容器编排技术 -- Kubernetes kubectl create poddisruptionbudget 命令详解
- ANSI C:+++
- MVC HtmlHelper扩展——实现分页功能
- 理解C语言——从小菜到大神的晋级之路（9）——多维数组
- QCC3003x BLE 设置私有地址
- ceph最低配置和硬件推荐
- 华为2019实习生专业面试经历——通信算法工程师
- 7个人生工具：SWOT、PDCA、6W2H、SMART、WBS、时间管理、二八原则
- 个人编程语言的学习感悟
- 网络安全笔记5——数字签名
- swiper——AutoPlay
- winform 窗体设置成无边框、可拖拽、四周圆角
- Win7如何利用系统放大镜工具更改用户密码
- 【论文合集】2022年12月医学影像期刊论文合集