使用JavaScript增强交互效果

责任编辑：宏鹏来源：武汉北大青鸟鲁广校区时间：2012-12-21 08:44:47

导读：使用JavaScript增强交互效果。

脚本的基本结构
<script type="text/javascript">

</script >
-----------演示示例：输出Hello World
<title>输出Hello Wordl</title>
<script type="text/javascript">
document.write("使用JavaScript脚本循环输出helloworld");
for(var i=0;i<5;i++) {
document.write("<h3>Hello World</h3>");
}
document.write("<h1>Hello World</h1>");
</script>
</head>
<body>页面主体内容</body>
</html>
----------
外部JS文件</head>前
<script src="hello.js" language="javascript"></script>
简短缩写方式<body>之间
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
--------
typeof检测变量的返回值

document.write(typeof(width)+"<br>");
数据类型
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object： javascript中的对象、数组和null
-----------
switch (表达式)
{ case 常量1 :
JavaScript语句1;
break;
case 常量2 :
JavaScript语句2;
break;
...
default :
JavaScript语句3;
}
-------
break
continue
注释
alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框

/*
使用for循环运行“document.write("<h3>Hello World</h3>");”5次
使用document.write在页面上输出“Hello World”
*/
------
常用的输入输出
alert()
alert(“提示信息”);
prompt()
prompt(“提示信息”, “输入框的默认信息”);
prompt(“请输入姓名”, “张三”);
prompt(“请输入姓名”);
-----------------------输出Hello World
<script type="text/javascript">
document.write("Hello World");
var j=prompt("请输入连续输出标题3的次数：","");
for(var i=0;i<j;i++){
document.write("<h3>Hello World</h3>");
}
document.write("<h1>Hello World</h1>");
alert("共连续输出标题："+j+"次");
</script>
----------------------------------------------------------------------------------------1---------------
时钟显示特效
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作12小时进制的时钟</title>
<script type="text/javascript">

function clock_12h()
{
var today = new Date(); //获得当前时间
//获得年、月、日，Date()函数中的月份是从0－11计算
var year = today.getFullYear();
var month = today.getMonth()+1;
var date = today.getDate();
var hour = today.getHours(); //获得小时、分钟、秒
var minute = today.getMinutes();
var second = today.getSeconds();

var apm="AM"; //默认显示上午: AM
if (hour>12) //按12小时制显示
{
hour=hour-12;
apm="PM" ;
}
var weekday = 0;
switch(today.getDay()){
case 0:
weekday = "星期日";
break;
case 1:
weekday = "星期一";
break;
case 2:
weekday = "星期二";
break;
case 3:
weekday = "星期三";
break;
case 4:
weekday = "星期四";
break;
case 5:
weekday = "星期五";
break;
case 6:
weekday = "星期六";
break;
}

/*设置div的内容为当前时间*/
document.getElementById("myclock").innerHTML="<h2>你好，欢迎访问贵美商城！</h2><h2>"+year+"年"+month+"月"+date+"日 "+hour+":"+minute+":"+second+" "+apm+" "+weekday+"</h2>";

}
/*使用setInterval()每间隔指定毫秒后调用clock_12h()*/
var myTime = setInterval("clock_12h()",1000);

</script>
</head>

<body>
<div id="myclock"></div>
</body>
--------------
var 日期对象=new Date(参数) 参数格式：MM DD,YYYY,hh:mm:ss

Seconds 和 Minutes0 至 59
Hours0 至 23
Day0 至 6（星期几）
Date1 至 31（月份中的天数）
Months0 至 11（一月至十二月）

setTimeout()用法
setTimeout（“调用的函数”, “指定的时间后"）
setInterval()方法
setInterval（"调用的函数", "指定的时间间隔"）

------------
广告窗口特效

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>window对象演示例子</title>
<script type="text/javascript">
/*弹出窗口*/
function open_adv(){
window.open("adv.html");
}
/*弹出固定大小窗口，并且无菜单栏等*/
function open_fix_adv(){
window.open("adv.html","","height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0");
}
/*屏显示*/
function fullscreen(){
window.open("plan.html","","fullscreen=yes");
}
/*弹出确认消息框*/
function confirm_msg(){
if(confirm("你相信自己是棒的吗？")){
alert("有信心必定会赢，没信心一定会输！");
}
}
/*关闭窗口*/
function close_plan(){
window.close();
}

</script>
</head>

<body>
<form action="" method="post">
<p>
<input name="open1" type="button" value="弹出窗口" onclick="open_adv()" /></p>
<p><input name="open2" type="button" value="弹出固定大小窗口，且无菜单栏等" onclick="open_fix_adv()"/></p>
<p><input name="full" type="button" value="屏显示" onclick="fullscreen()"/></p>
<p><input name="con" type="button" value="打开确认窗口" onclick="confirm_msg()"/></p>
<p><input name="c" type="button" value="关闭窗口" onclick="close_plan()"/></p>
</form>
</body>
-----------------------------直接跳出
onload=function(){
window.open("adv.html","","height=480,width=753,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0");
}
-------------------
parseInt ("字符串")
将字符串转换为整型数字
如: parseInt ("86")将字符串“86”转换为整型值86
parseFloat("字符串")
将字符串转换为浮点型数字
如: parseFloat("34.45")将字符串“34.45”转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字
-----------------------------
调用函数
函数调用一般和表单元素的事件一起使用，调用格式：
事件名＝“函数名( )" ;
-----------------------------
有参函数
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用有参函数显示HelloWorld</title>
<script type="text/javascript">
function showHello(count){
for(var i=0;i<count;i++){
document.write("<h2>Hello World</h2>");
}
}

</script>
</head>
<body>
<input name="btn" type="button" value="请输入显示HelloWorld的次数" onclick="showHello(prompt('请输入显示HelloWorld的次数：',''))"/>
</body>
无参函数

</head>

<body>

</body>
--------------------
常用的属性
名称说明
screen 有关客户端的屏幕和显示性能的信息
history 有关客户访问过的URL的信息
location有关当前 URL 的信息
-----------
常用的方法

名称说明
prompt 显示可提示用户输入的对话框
alert 显示带有一个提示信息和一个确定按钮的警示框
confirm 显示一个带有提示信息、确定和取消按钮的对话框
close 关闭浏览器窗口
open 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout在指定的毫秒数后调用函数或计算表达式
setInterval按照指定的周期（以毫秒计）来调用函数或表达式
-----------------------------------------------------------------
confirm("对话框中显示的纯文本")
<script language="javascript" type="text/javascript">
var flag=confirm("确认要删除此条信息吗？");
if(flag==true){
alert("删除成功！");
}
else{
alert("你取消了删除");
}
</script>
---------------
窗口特征
名称说明
height、width 窗口文档显示区的高度、宽度。以像素计。
left、窗口的x坐标、y坐标。以像素计
toolbar=yes | no |1 | 0是否显示浏览器的工具栏。黙认是yes。
scrollbars=yes | no |1 | 0是否显示滚动条。黙认是yes。
location=yes | no |1 | 0是否显示地址地段。黙认是yes。
status=yes | no |1 | 0 是否添加状态栏。黙认是yes。
menubar=yes | no |1 | 0是否显示菜单栏。黙认是yes。
resizable=yes | no |1 | 0窗口是否可调节尺寸。黙认是yes。
titlebar=yes | no |1 | 0是否显示标题栏。黙认是yes。
fullscreen=yes | no |1 | 0是否使用屏模式显示浏览器。黙认是no。处于屏模式的窗口必须同时处于剧院模式。
-----------------------------------------------------------------
常用的事件
名称说明
onload 一个页面或一幅图像完成加载
onmouseover鼠标移到某元素之上
onlick 当用户单击某个对象时调用的事件句柄
onkeydowm某个键盘按键被按下
onchange域的内容被改变
--------------------------------
匿名函数
Function 函数名() {javaScript代码}
调用函数：onclick=“函数名() "

网上常见匿名写法
方式一：事件名=function(){…}
方式二： (function (){ JavaScript代码;}())
直接运行函数
window.onload=function(){…}
<body onload= "事件名() " >
----------------------------
鲜花详情页面实现返回主页面功能

<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
</body>
四季的变化
<body><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/1.jpg" /></td>
<td><img src="images/2.jpg" /></td>
</tr>
<tr>
<td><a href="javascript:location='spring.html'">春</a></td>
<td><a href="javascript:location='summer.html'">夏</a></td>
</tr>
<tr>
<td><img src="images/3.jpg" /></td>
<td><img src="images/4.jpg" /></td>
</tr>
<tr>
<td><a href="javascript:location='autumn.html'">秋</a></td>
<td><a href="javascript:location='winter.html'">冬</a></td>
</tr>
<tr>
<td colspan="2"><a href="javascript:location.reload()">刷新本页</a></td>
</tr>
</table>

</body>
----------
Document对象的常用属性
属性描述
referrer 返回载入当前文档的文档的URL
URL 返回当前文档的URL

方法描述
getElementById()返回对拥有指定id的个对象的引用
getElementsByName()返回带有指定名称的对象的集合
getElementsByTagName()返回带有指定标签名的对象的集合
write()向文档写文本、HTML表达式或JavaScript代码
------------------
三种访问页面的区别
getElementById() 按元素的ID名称来访问

getElementsByName() 按元素的name名称来访问

getElementsByTagName() 按标签来访问
--------------------------------------例子
<script type="text/javascript">
function changeLink(){
document.getElementById("node").innerHTML="搜狐";
}

</script>
---------------
visibility属性的值
值描述
visible表示元素是可见的
hidden表示元素是不可见的

object.style.visibility="值"

display属性的值
值描述
none表示此元素不会被显示
block表示此元素将显示为块级元素，此元素前后会带有换行符

object.style.display="值"
-------------------------
简单的树形菜单
.no_circle{list-style-type:none; /*设置列表项标志的类型为无*/
display:none;
}
</style>

</head>

<body>
<b><img src="images/fold.gif">树形菜单：</b>
<ul><a href="javascript:onclick=show() "><img src="images/fclose.gif">文学艺术</a></ul>
<ul id="art" class="no_circle">
<li><img src="images/doc.gif" >先锋写作</li>
<li> <img src="images/doc.gif" >小说散文</li>
<li><img src="images/doc.gif" >诗风词韵</li>
</ul>
</body>
-------------

<body>
<b><img src="images/fold.gif">树形菜单：</b>
<ul><a href="javascript:onclick=show('art') "><img src="images/fclose.gif">文学艺术</a></ul>
<ul id="art" class="no_circle">
<li><img src="images/doc.gif" >先锋写作</li>
<li> <img src="images/doc.gif" >小说散文</li>
<li><img src="images/doc.gif" >诗风词韵</li>
</ul>
<ul><a href="javascript:onclick=show('photo') "><img src="images/fclose.gif">贴图专区</a></ul>
<ul id="photo" class="no_circle">
<li><img src="images/doc.gif" >真我风采</li>
<li> <img src="images/doc.gif" >视频贴图</li>
<li><img src="images/doc.gif" >行行摄摄</li>
<li><img src="images/doc.gif" >Flash贴图</li>
</ul>
<ul><a href="javascript:onclick=show('home') "><img src="images/fclose.gif">房产论坛</a></ul>
<ul id="home" class="no_circle">
<li><img src="images/doc.gif" >我要买房</li>
<li> <img src="images/doc.gif" >楼市话题</li>
<li><img src="images/doc.gif" >我要卖房</li>
<li><img src="images/doc.gif" >租房心语</li>
<li><img src="images/doc.gif" >二手市场</li>
</ul>
<ul><a href="javascript:onclick=show('game') "><img src="images/fclose.gif">娱乐八卦</a></ul>
<ul id="game" class="no_circle">
<li><img src="images/doc.gif" >红楼一梦</li>
<li> <img src="images/doc.gif" >笑话论坛</li>
<li><img src="images/doc.gif" >休闲生活</li>
<li><img src="images/doc.gif" >大话春秋</li>
</ul>
</body>
-------------------------
Tab切换效果
function change(ss){
if(ss=="1"){
document.getElementById("left1").style.display="block";
……//省略部分代码
}
else{
document.getElementById("left1").style.display="none";
……//省略部分代码
}
}
----------------
复选框的checked属性值
选中：true
未选中：false

使用getElementsByName()方法访问同名复选框
function check(){
var oInput=document.getElementsByName("product");
for (var i=0;i<oInput.length;i++){
if (document.getElementById("all").checked==true){
oInput[i].checked=true;
}
}
}
-------------------------------------------------------------------------------------------------4------
类别属性描述
文本属性font-size 字体大小
font-family 字体类型
边框属性 border 设置四个边框所有的属性
border-width 设置边框的宽度
border-style 设置边框的样式
border-color 设置边框的颜色
边界属性margin 设置所有外边框属性
margin-left
margin-right
margin-
margin-bottom 分别设置元素的左、右、上、下外边距
填充属 padding设置元素的所有内边距
padding-left
padding-right
padding-
padding-bottom分别设置元素的左、右、上、下内边距

------------------------------
样式表的基本语法
标签选择器
input{
width:120px;
border:solid 1px #ff0000;
}

ID选择器
#flow{color:#ff0000}

类选择器

.center{
text-align:center;
font-weight:bold;
}
------------
JavaScript中常用的事件列表
名称描述
onclick 当用户单击某个对象时调用事件
onmouseover鼠标移到某元素之上
onmouseout鼠标从某元素移开
onmousedown鼠标按钮被按下
-----------------------------------------------------------------------------------5--------------------
字符串对象.方法名( )

方法描述
toLowerCase() 把字符串转化为小写
toUpperCase() 把字符串转化为大写
charAt(index) 返回在指定位置的字符
indexOf(字符串，index) 查找某个指定的字符串值在字符串中次出现的位置
substring(index1,index2)返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符不包括索引index2对应的字符
-----------------------
使用String对象的length属性验证密码的长度

var pwd=document.getElementById("pwd").value;
if(pwd.length<6){
alert("密码必须等于或大于6个字符");
return false;}
----------------------------
验证两次输入密码是否一致

var repwd=document.getElementById("repwd").value;
if(pwd!=repwd){
alert("两次输入的密码不一致");
return false; }
-------------------------
使用length属性获取文本长度，使用for循环和substring()方法依次截断单个字符，判断每个字符是否是数字

var user=document.getElementById("user").value;
for(var i=0;i<user.length;i++){
var j=user.substring(i,i+1)
if(j>=0){
alert("姓名中不能包含数字");
}
}
--------------
文本框对象的属性、方法和事件

类别名称描述
事件onblur失去焦点，当光标离开某个文本框时触发
onfocus获得焦点，当光标进入某个文本框时触发
onkeypress某个键盘按键被按下并松开
方法blur()从文本域中移开焦点
focus()在文本域中设置焦点，即获得鼠标光标
select()选取文本域中的内容
属性id设置或返回文本域的id
value设置或返回文本域的value属性的值

-------------
清除文本框中初始内容，并设置边框为红色

<body>
<table id="mytable" border="0" cellspacing="0" cellpadding="0">
<form action="register.html" method="post" name="myform" onsubmit="return check()"><tr>
<td><img src="images/reg-.jpg"></td>
</tr>
<tr>
<td id="main"><table id="center" border="0" cellspacing="0" cellpadding="0">
<tr><td class="p1"> 用户名：</td>
<td> <input id="username" type="text"></td>
</tr>
<tr><td class="p1" > 密  码：</td>
<td><input id="pwd" type="password"> </td>

</tr>
<tr><td class="p1" >E-mail：</td>
<td><input id="email" type="text"></td>
</tr>
<tr><td class="p1"> 个人简介：</td>
<td><textarea id="intro" cols="30" rows="4"></textarea></td>
</tr>
</table>
</td>
</tr>
<tr>
<td background="images/reg-end.jpg" style="height:63px; text-align:center;"><input name="B1" type="submit" value="提交" class="submit">  
<input name="B2" type="reset" value="重置"class="submit">
</td>
</tr></form>
</table>
</body>
--------------

<!DOCTYPEhtml PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>贵美商城</title>
<link rel="stylesheet"type="text/css"href="css/global.css"/>
<link rel="stylesheet"type="text/css"href="css/layout.css"/>
<script type="text/javascript">
function check(){
var fname=document.getElementById("fname").value;
if(fname==""){
divFname.innerHTML="名字不能为空";
return false;
}
for(var i=0;i<fname.length;i++){
var j=fname.substring(i,i+1)
if(j>=0){
divFname.innerHTML="名字中不能包含数字";
return false;
}
}
var lname=document.getElementById("lname").value;
if(lname==""){
divLname.innerHTML="姓氏不能为空";
return false;
}

<form id="form1" method="post" action="register_success.htm" onsubmit="return check()">
<table id="main" class="reg_bg" cellpadding="0px">
<tbody>
<tr class="h58">
<td colspan="3"> </td>
<td rowspan="11">
<h4><img src="images/read.gif" alt="alt" />阅读贵美网服务协议 </h4>
<textarea id="textarea" cols="30" rows="15">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。
本服务协议双方为贵美与贵美网用户，本服务协议具有合同效力。
贵美的权利和义务
1.贵美有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。
2.对用户在注册使用贵美网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，贵美应及时作出回复。
3.对于在贵美网网上交易平台上的不当行为或其它任何贵美认为应当终止服务的情况，贵美有权随时作出删除相关信息、终止服务提供等处理，而无须征得用户的同意。
4.因网上交易平台的特殊性，贵美没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。
</textarea>
</td>
</tr>
<tr class="register_table_line">
<td class="input_title" >名字：</td>
<td class="input_content"> <input id="fname" type="text" class="reg_text" size="24" /> <div class="red" id="divFname"></div></td>
</tr>
<tr class="register_table_line">
<td class="input_title" >姓氏：</td>
<td class="input_content">
<input id="lname" type="text" class="reg_text" size="24" />
<div class="red" id="divLname"></div></td>
</tr>
<tr class="register_table_line">
<td class="input_title" >登录名：</td>
<td class="input_content">
<input name="sname" type="text" class="reg_text" size="24" />
</td>
</tr>
<tr class="register_table_line">
<td class="input_title" >密码：</td>
<td class="input_content">
<input id="pass" type="password" class="reg_text" size="26" />
<div class="red" id="divPass"></div></td>
</tr>
<tr class="register_table_line">
<td class="input_title" >再次输入密码：</td>
<td class="input_content">
<input id="rpass" type="password" class="reg_text" size="26" />
<div class="red" id="divRpass"></div>
</td>
</tr>
<tr class="register_table_line">
<td class="input_title" >电子邮箱：</td>
<td class="input_content">
<input id="email" type="text" class="reg_text" size="24" />
<div class="red" id="divEmail"></div></td>
</tr>
<tr class="register_table_line">
<td class="input_title" >性别：</td>
<td class="input_content">
<input id="gen" style="border:0px;" type="radio" value="男" checked="checked" />
<img src="images/Male.gif" width="23" height="21" alt="alt" />男 
<input name="gen" style="border:0px;" type="radio" value="女" class="input" />
<img src="images/Female.gif" width="23" height="21" alt="alt" />女
</td>
</tr>
<tr class="register_table_line">
<td class="input_title" >头像：</td>
<td class="input_content">
<input type="file" />
</td>
</tr>
<tr class="register_table_line">
<td class="input_title" >爱好：</td>
<td class="input_content">
<label>
<input type="checkbox" id="checkbox" value="checkbox" />
</label>
运动  
<label>
<input type="checkbox" id="checkbox2" value="checkbox" />
</label>
聊天  
<label>
<input type="checkbox" id="checkbox3" value="checkbox" />
</label>
玩游戏
</td>
</tr>
<tr class="register_table_line">
<td class="input_title">出生日期：</td>
<td class="input_content">
<input id="nYear" class="reg_text n4" value="yyyy" maxlength="4" /> 年  
<select id="nMonth">
<option value="" selected="selected">[选择月份]</option>
<option value="0">一月</option>
<option value="1">二月</option>
<option value="2">三月</option>
<option value="3">四月</option>
<option value="4">五月</option>
<option value="5">六月</option>
<option value="6">七月</option>
<option value="7">八月</option>
<option value="8">九月</option>
<option value="9">十月</option>
<option value="10">十一月</option>
<option value="11">十二月</option>
</select> 月  
<input id="nDay" class="reg_text n4" value="dd" size="2" maxlength="2" />日
</td>
</tr>
<tr class="register_table_line">
<td class="input_title h35" > 
</td>
<td class="input_content h35">
<input type="image" id="Button" style="border:0px;" src="images/submit.gif" /> <img src="images/reset.gif" onclick="javascript:form1.reset();" style="cursor:pointer;" alt="重置" />
</td>
</tr>
<tr>
<td colspan="2" class="h65"> </td>
</tr>
</tbody>
</table>
</form>
<iframe id="foot" runat="server" src="foot.htm" width="980px" height="150px" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
--------------
计算器