北大青鸟

网站首页 > 常见IT技术问题 > Java开发 >

站内公告

使用JavaScript增强交互效果

责任编辑:宏鹏来源:武汉北大青鸟鲁广校区时间:2012-12-21 08:44:47
导读:使用JavaScript增强交互效果。

脚本的基本结构
<script type="text/javascript">
<!--
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+"日&nbsp;"+hour+":"+minute+":"+second+"&nbsp;"+apm+"&nbsp;"+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("调用的函数", "指定的时间间隔")

<script language="javascript" type="text/javascript">
function disptime()
{ var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;}
</script>
……
<body onload="disptime()">
<div id="myclock"></div>


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

<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>
无参函数

<script type="text/javascript">
function showHello(){
for(var i=0;i<5;i++){
document.write("<h2>Hello World</h2>");

}
}
</script>


</head>

<body>

<input name="btn" type="button" value="显示5次HelloWorld" onclick="showHello()" />

</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

<script type="text/javascript">
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入,5秒后将自动跳转到登录页面</h2>");
setTimeout("javascript:location.href='login.html'",5000);//使用setTimeout延迟5秒后自动跳转
}
</script>
---------------
Document对象的常用方法

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

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

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

function all_input(){
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
}

function s_input(){
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
}

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

object.style.visibility="值"

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

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

<script type="text/javascript">
function show(){
if(document.getElementById("art").style.display=='block'){
document.getElementById("art").style.display='none'; //触动的ul如果处于显示状态,即隐藏
}
else{
document.getElementById("art").style.display='block'; //触动的ul如果处于隐藏状态,即显示
}
}
</script>

</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>
-------------

<style type="text/css">
body{font-size:13px;
line-height:20px;
}
a{font-size: 13px;
color: #000000;
text-decoration: none;
}
a:hover{font-size:13px;
color: #ff0000;
}
img {
vertical-align: middle;
border:0;
}
.no_circle{list-style:none;
display:none;
}
</style>
<script type="text/javascript">
function show(d1){
if(document.getElementById(d1).style.display=='block'){
document.getElementById(d1).style.display='none'; //触动的层如果处于显示状态,即隐藏
}
else{
document.getElementById(d1).style.display='block'; //触动的层如果处于隐藏状态,即显示
}
}
</script>
</head>

<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属性的值

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

function clearText(){
var mail=document.getElementById("email");
if(mail.value=="请输入正确的电子邮箱"){
mail.value="";
mail.style.borderColor="#ff0000";
}
}
……
<td>Email:<input id="email" type="text" class="inputs" value="请输入正确的电子邮箱" onfocus="clearText()"/></td>
</tr>
---------------------------
当用户输入无效的电子邮件地址,Email文本框中的内容将被自动选中并且高亮显示,提示用户重新输入
if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
alert("Email格式不正确\n必须包含符号@和.");
document.getElementById("email").select();
return false;
}
-------------------------
提示Email不能为空
function checkEmail(){
var mail= document.getElementById ("email");
var divID= document.getElementById ("DivEmail");
divID.innerHTML="";
if(mail.value==""){
divID.innerHTML="Email不能为空";
return false;
}
……
<input id="email" type="text" class="inputs" onblur="checkEmail()"/>
<div class="red" id="DivEmail"></div>
----------------------注册表
<script type="text/javascript">
function check(){
var username=document.getElementById("username").value;
if(username==""){//检测username是否为空
alert("请输入用户名");
return false;
}
if(username.length>16 || username.length<4){
alert("用户名长只能占16位字符,短4个字符,请重新填写!");
return false;
}
var pwd=document.getElementById("pwd").value;
if(pwd==""){//检测pwd是否为空
alert("密码不能为空");
return false;
}
if(pwd.length<6){
alert("密码不能少于6位");
return false;
}
var mail=document.getElementById("email").value;
if(mail.indexOf("@")==-1){
alert("Email格式不正确\n必须包含@");
return false;
}
if(mail.indexOf(".")==-1){
alert("Email格式不正确\n必须包含.");
return false;
}
return true;
}
</script>
</head>

<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" > 密&nbsp;&nbsp;码:</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">&nbsp;&nbsp;
<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;
}

var pass=document.getElementById("pass").value;
if(pass==""){
divPass.innerHTML="密码不能为空";
return false;
}
if(pass.length<6){
divPass.innerHTML="密码必须等于或大于6个字符";
return false;
}
var rpass=document.getElementById("rpass").value;
if(pass!=rpass){
divRpass.innerHTML="两次输入的密码不一致";
divPass.innerHTML="";
return false;
}
var mail=document.getElementById("email").value;
if(mail.indexOf("@")==-1){
divEmail.innerHTML="Email格式不正确,必须包含@";
return false;
}
if(mail.indexOf(".")==-1){
divEmail.innerHTML="Email格式不正确,n必须包含.";
return false;
}
return true;
}
</script>
</head>

<body>
<div id="container">
<iframe id="head" runat="server" src="head.htm" width="980px" height="136px" frameborder="0" scrolling="no"></iframe>

<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">&nbsp;</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" />男&nbsp;
<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>
运动&nbsp;&nbsp;
<label>
<input type="checkbox" id="checkbox2" value="checkbox" />
</label>
聊天&nbsp;&nbsp;
<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" />&nbsp;年&nbsp;&nbsp;
<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>&nbsp;月&nbsp;&nbsp;
<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" >&nbsp;
</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">&nbsp;</td>
</tr>
</tbody>
</table>
</form>
<iframe id="foot" runat="server" src="foot.htm" width="980px" height="150px" frameborder="0" scrolling="no"></iframe>
</div><!--containerend-->
</body>
</html>
--------------
计算器

<script language="javascript">
<!--
function add1(){
a = document.getElementById("txtNum1").value;
b = document.getElementById("txtNum2").value;
total = (a*1) + (b*1);
form1.txtresult.value = total;
}
function sub1(){
var a = document.getElementById("txtNum1").value;
var b = document.getElementById("txtNum2").value;
var total = a - b;
form1.txtresult.value = total;
}
//-->
</script>
</head>

<body>
<form action="" method="post" name="form1" id="myform">
<table border="0" >

<tr>
<td>个数</td>
<td colspan="3"><INPUT name="txtNum1" type="text" id="txtNum1" size="25"></td>
</tr>
<tr >
<td>第二个数</td>
<td colspan="3"><INPUT name="txtNum2" type="text" id="txtNum2" size="25"></td>
</tr>
<tr>
<td><INPUT name="addButton2" type="button" id="addButton2" value=" + " onClick="add1()"></td>
<td><INPUT name="subButton2" type="button" id="subButton2" value=" - " onClick="sub1()"></td>
<td><INPUT name="mulButton2" type="button" id="mulButton2" value=" × " ></td>
<td><INPUT name="divButton2" type="button" id="divButton2" value=" ÷ " ></td>
</tr>
<tr>
<td>计算结果</td>
<td colspan="3"><INPUT name="txtresult" type="text" id="txtresult" size="25"></td>
</tr>
</table>
</form>

本文标题:使用JavaScript增强交互效果,责任编辑:宏鹏,来源:武汉北大青鸟鲁广校区栏目,于2012-12-21 08:44:47发布于北大青鸟鲁广校区。使用JavaScript增强交互效果。

专业老师指导

赵老师

赵老师

从事IT教育培训十年有余,致力于帮助广大学子找到适合自己的专业

立即在线咨询

培训咨询客服

陈老师

陈老师

IT培训专业客服,用自己的真诚解决了无数学子的困惑

立即在线咨询

本文地址:https://m.027hpedu.com/wenda/java/2055.html

文章标题:使用JavaScript增强交互效果

上一篇:AJAX是什么?什么是AJAX技术?

下一篇:JAVA如何复制图片到剪切板

热点关注

推荐Java开发

热门Java开发

预约你的精彩未来

预约将免费领取7天课程体验卡

-------请选择试预约课程-------

JAVA
WEB前端
PHP
UI设计
Python
电子商务
视频剪辑
大数据工程师
平面设计

83345人已领取

全国百余家校区

只为您方便就学

北大青鸟鲁广校区

北大青鸟鲁广校区

武汉市洪山区珞喻路724号(地铁二号线光谷广场站F口出)

预约到校
领取学习大礼包

首页

热门课程

视频网课

新闻资讯

关于学校

联系学校

预约选课申请

  • 预约时间

    请选择预约时间

  • 预约课程

    请选择预约课程

  • 姓   名
  • 手机号
  • QQ 号
  • 微信号

添加老师微信号

专业老师24小时1对1学习指导

定制专属于你的专属学习方案

微信号:17740513250

复制老师的微信号

复制成功啦

快去微信添加老师为好友吧~

北大青鸟小青

微信号:17740513250

北大青鸟小青

微信号:17740513250

设置备注
小主知道啦