Dom教程
使用javascript操作dom进行dhtml开发,目标:能够使用javascript操作dom实现常见的dhtml效果
Dom就是html页面的模型,将每个标签都做成为一个对象
,javascript通过调用dom中的属性、方法就可以对网页中的文本框、层等元素进行编程控制,比如通过操作文本框的dom对象,就可以读取文本框中的值、设置文本框中的值
Dom也像winform一样,通过事件、属性、方法进行编程
Javascript→dom就是c#→.net framework。
Css+javascritp+dom=dhtml
Dom事件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body onmousedown="alert(‘别点我!‘)">
</body>
</html>
封装到函数里面:直接调用
<head>
<title></title>
<script type="text/javascript">
function bodymousedown()
{ alert(‘点到我了!‘); alert(‘哈哈!‘) }
</script>
</head>
<body onmousedown="bodymousedown()">
</br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br>
</body>
</html>
<head>
<title></title>
<script type="text/javascript">
function bodymousedown()
{ alert(‘点到我了!‘); alert(‘哈哈!‘) }
function f1() {
alert("我是f1");
}
function f2() {
alert("我是f2");
}
</script>
</head>
<!--<body onmousedown="bodymousedown()">-->
<input type="button" onclick="document.ondblclick=f1" value="关联事件1" />
<input type="button" onclick="document.ondblclick=f2" value="关联事件2" />
</br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br>
</body>
双击效果:
Window对象
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function confirmdemo() {
if (confirm("是否进入?")) {
alert("进入了!");
}
else {
alert("取消进入了!");
}
}
</script>
</head>
<body>
<input type="button" value="confirmtest" onclick="confirmdemo()"/>
</body>
</html>
<input type="button" value="navigate测试" onclick="navigate(‘HTMLPagedom.htm‘)"/>
重新导航到另外的页面
setInterval每隔一段时间执行指定的代码,第一个参数为代码
的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时
器的标识
function startInterval() {
setInterval("alert(‘hello‘)", 5000)
}
</script>
</head>
<body>
<input type="button" value="confirmtest" onclick="confirmdemo()"/>
<input type="button" value="navigate测试" onclick="navigate(‘HTMLPagedom.htm‘)"/>
<input type="button" value="setInterval测试" onclick="startInterval()"/>
clearInterval取消setInterval的定时执行,相当于Timer中的
Enabled=False。因为setInterval可以设定多个定时,所以
clearInterval要指定清除那个定时器的标识,即setInterval的返回
值。
var intervalId = setInterval("alert(‘hello‘)", 5000);
clearInterval(intervalId);
var intervalId;
function startInterval() {
intervalId=setInterval("alert(‘hello‘)", 5000)
}
</script>
</head>
<body>
<input type="button" value="confirmtest" onclick="confirmdemo()"/>
<input type="button" value="navigate测试" onclick="navigate(‘HTMLPagedom.htm‘)"/>
<input type="button" value="setInterval测试" onclick="startInterval()"/>
<input type="button" value="停止Interval" onclick="clearInterval(intervalId)"/>
</body>
setTimeout("alert(‘这是timeout‘)",2000)
走马灯
标题栏走马灯效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新学期欢迎新同学</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
}
</script>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新学期欢迎新同学</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var firstch = title.charAt(0);
var leftstr = title.substring(1,title.length);
document.title = leftstr + firstch;
}
scroll();
</script>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新学期欢迎新同学</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var firstch = title.charAt(0);
var leftstr = title.substring(1, title.length);
document.title = leftstr + firstch;
}
setInterval("scroll()", 500)
</script>
</head>
<body>
</body>
</html>
每隔500毫秒滚动,实现走马灯效果
练习:刚进入的时候还是向左滚动,点击【向左】按钮就向左连
续滚动,点击【向右】按钮就向右连续滚动。
? 思路1、全局变量,标志当前的滚动方向,当点击向左的时候
dir="left",向右dir="right"。
? 思路2、scrollleft scroolright,向右滚的时候将scrollleft的Interval
clear掉,然后setInterval启动scrollright
Dom事件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
btn.value = "ok";
</script>
</head>
<body>
<input type="button" id="btn" value="模态对话框" onclick="showModelessDialog(‘dialog.htm‘)"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
// btn.value = "ok";
</script>
</head>
<body onload="btn.value = ‘ok‘">
<input type="button" id="btn" value="模态对话框" onclick="showModelessDialog(‘dialog.htm‘)"/>
</body>
</html>
在页面加载完成后onload才会调用
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
// btn.value = "ok";
</script>
</head>
<body onload="btn.value = ‘ok‘;" onunload="alert(‘洛阳亲友如相问!‘)">
<input type="button" id="btn" value="模态对话框" onclick="showModelessDialog(‘dialog.htm‘)"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
// btn.value = "ok";
</script>
</head>
<body onload="btn.value = ‘ok‘;"
onbeforeunload="window.event.returnValue=‘ 真的要放弃发帖退出吗?‘">
<input type="button" id="btn" value="模态对话框" onclick="showModelessDialog(‘dialog.htm‘)"/>
</body>
</html>
Dom属性
window对象的属性1
window.location.href=‘http://www.itcast.cn‘,重新导向新的地址,和navigate方
法效果一样。window.location.reload() 刷新页面
window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于
window对象的事件,所有元素的事件都可以通过event属性取到相关信息。类似
于winForm中的e(EventArg).
? altKey属性,bool类型,表示发生事件时alt键是否被按下,类似的还有
ctrlKey、shiftKey属性,例子 <input type="button" value="点击"
onclick="if(event.altKey){alert(‘Alt点击‘)}else{alert(‘普通点击‘)}" /> ;
? clientX、clientY 发生事件时鼠标在客户区的坐标;screenX、screenY 发生
事件时鼠标在屏幕上的坐标;offsetX、offsetY 发生事件时鼠标相对于事件
源(比如点击按钮时触发onclick)的坐标。
? returnValue属性,如果将returnValue设置为false,就会取消默认事件的处
理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提
交表单到服务器,防止错误数据提交给服务器、防止页面刷新。
<a href="http://www.baidu.com" onclick="alert(‘禁止访问!‘)">百度</a>
点击百度后,页面会弹出禁止访问
但是点击ok后页面还是会跳转到百度
现要实现页面不跳转
要阻止跳转:
<a href="http://www.baidu.com" target="_blank" onclick="alert(‘禁止访问!‘); window.event.returnValue=false;">百度</a>
同样表单的提交操作类似:
<form action="Default.aspx">
<input type="submit" value="提交" onclick="alert(‘数据异常禁止提交!‘);window.event.returnValue=false;"/>
</form>
? srcElement,获得事件源对象。几个事件共享一个事件响应函数用。
? keyCode,发生事件时的按键值。
? button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按。
<body onmousedown="if(event.button==2){alert(‘禁止复制‘);}">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" value="href" onclick="alert(location.href)"/>//显示当前页面的地址
</body>
</html>
<input type="button" value="点击"onclick="if(event.altKey){alert(‘Alt点击‘)}else{alert(‘普通点击‘)}" />
定时器走马灯易错点:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新学期欢迎新同学</title>
<script type="text/javascript">
function scrollleft() {
var title = document.title;
var lastch = title.charAt(title.length-1);//易错 返回最后一个字符charAt() 方法可返回指定位置的字符。
var leftstr = title.substring(0, title.length-1);//易错 substring截取字符串
document.title = lastch + leftstr;
}
// function scrollright() {
// var title = document.title;
// var firstch = title.charAt(title.length);
// var leftstr = title.substring(1, title.length);
// document.title = leftstr + firstch;
// }
// setInterval("scrollleft()", 500)
</script>
</head>
<body>
<input type="button" value="滚动" onclick=" setInterval(‘scrollleft()‘, 500)">
</body>
</html>
每点击一次会启动一个定时器,因此滚动的速度会加快
停止代码写法:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新学期欢迎新同学</title>
<script type="text/javascript">
function scrollleft() {
var title = document.title;
var lastch = title.charAt(title.length-1);//易错
var leftstr = title.substring(0, title.length-1);//易错
document.title = lastch + leftstr;
}
// function scrollright() {
// var title = document.title;
// var firstch = title.charAt(title.length);
// var leftstr = title.substring(1, title.length);
// document.title = leftstr + firstch;
// }
// setInterval("scrollleft()", 500)
</script>
</head>
<body>
<input type="button" value="滚动" onclick="timeId=setInterval(‘scrollleft()‘, 500)">
<input type="button" value="停止定时器" onclick=" clearInterval(timeId)">
</html>
Dom属性
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" value="分享本页给好友" onclick="clipboardData.setData(‘Text‘,‘我发现这个页面很黄很暴力!‘
+location.href);alert(‘已经将地址放到粘贴板中,赶快通知qq好友!‘);"/>
</body>
</html>
<body oncopy="alert(‘禁止复制!‘);return false;">
<input type="button" value="分享本页给好友" onclick="clipboardData.setData(‘Text‘,‘我发现这个页面很黄很暴力!‘
+location.href);alert(‘已经将地址放到粘贴板中,赶快通知qq好友!‘);"/>abcdefg
所有元素都有oncopy,onpaste事件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body oncopy="alert(‘禁止复制!‘);return false;">
<input type="button" value="分享本页给好友" onclick="clipboardData.setData(‘Text‘,‘我发现这个页面很黄很暴力!‘
+location.href);alert(‘已经将地址放到粘贴板中,赶快通知qq好友!‘);"/>abcdefg
<br/>
<input type="text" onpaste="alert(‘禁止粘贴!‘);return false;"/>
</body>
</html>
在网站中复制文章的时候,为了防止那些拷贝党不添加文章来源,
自动在复制的内容后添加版权声明。
function modifyClipboard() {
clipboardData.setData(‘Text‘, clipboardData.getData(‘Text‘)
+ ‘本文来自传智播客技术专区,转载请注明来源。‘ +
location.href);
}
oncopy="setTimeout(‘modifyClipboard()‘,100)"。用户复制动作发生
0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值,
写1000、10、50、200……都行。不能直接在oncopy里修改粘
贴板。
不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1
秒以后执行,这样就不再oncopy的执行调用栈上了。
<script>
function modifyClipboard() {
clipboardData.setData(‘Text‘, clipboardData.getData(‘Text‘)
+ ‘本文来自传智播客技术专区,转载请注明来源。‘ +
location.href);
}
</script>
</head>
<body oncopy="setTimeout(‘modifyClipboard()‘,100)">
<input type="button" value="分享本页给好友" onclick="clipboardData.setData(‘Text‘,‘我发现这个页面很黄很暴力!‘
+location.href);alert(‘已经将地址放到粘贴板中,赶快通知qq好友!‘);"/>abcdefg
<br/>
<input type="text" onpaste="alert(‘禁止粘贴!‘);return false;"/>
</body>
</html>
前进后退导航
window对象的属性4
history操作历史记录
? window.history.back()后退;window.history.forward()前进。也可以
用window.history.go(-1)、window.history.go(1)前进
document属性。是最复杂的属性之一。后面讲解详细使用。
第一个页面:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<javasctipt type="text/javascript">
function modifyClipboard() {
clipboardData.setData(‘Text‘, clipboardData.getData(‘Text‘)
+ ‘本文来自传智播客技术专区,转载请注明来源。‘ +
location.href);
}
</javascript>-->
<script>
function modifyClipboard() {
clipboardData.setData(‘Text‘, clipboardData.getData(‘Text‘)
+ ‘本文来自传智播客技术专区,转载请注明来源。‘ +
location.href);
}
</script>
</head>
<body oncopy="setTimeout(‘modifyClipboard()‘,100)">
<input type="button" value="分享本页给好友" onclick="clipboardData.setData(‘Text‘,‘我发现这个页面很黄很暴力!‘
+location.href);alert(‘已经将地址放到粘贴板中,赶快通知qq好友!‘);"/>abcdefg
<br/>
<input type="text" onpaste="alert(‘禁止粘贴!‘);return false;"/>
<input type="button" value="跳转页面" onclick="navigate(‘HTMLPagehistory.htm‘)"/>
<input type="button" value="前进" onclick="window.history.forward()">
</body>
</html>
第二个页面:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
<input type="button" value="后退" onclick="window.history.back()"/>
</html>
或可写成<a href="javascript:window.history.back()">后退</a>
这样,效果是一样的
document属性。是最复杂的属性之一。后面讲解详细使用。
document属性1
document是window对象的一个属性,因为使用window对象成员
的时候可以省略window.,所以一般直接写document
document的方法:
? (1)write:向文档中写入内容。writeln,和write差不多,只不过
最后添加一个回车
? <input type="button" value="点击" onclick="document.write(‘<font
color=red>你好</font>‘)" />
? 在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载
过程中write才会与原有内容融合在一起
? <script type="text/javascript">
? document.write(‘<font color=red>你好</font>‘);
? </script>
? write经常在广告代码、整合资源代码中被使用。见备注
内容联盟、广告代码、cnzz,不需要被主页面的站长去维护内容,只
要被嵌入的js内容提供商修改内容,显示的内容就变了。
1. write
<script type="text/javascript">
document.write("<a href=‘http://www.itcast.cn‘>传智播客</a>");
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script type="text/javascript">
document.write("<a href=‘http://www.itcast.cn‘>传智播客</a>");
</script>
<body>
<br/>
这是页面类容
<script type="text/javascript">
document.write("<a href=‘http://www.itcast.cn‘>传智播客</a>");
</script>
这是页面类容
</body>
</html>
Script也可以写在body里面
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script type="text/javascript">
document.write("<a href=‘http://www.itcast.cn‘>传智播客</a>");
</script>
<body>
<br/>
这是页面类容
<script type="text/javascript">
document.write("<a href=‘http://www.itcast.cn‘>传智播客</a>");
</script>
<input type="button" value="hello" onclick="document.write(‘hello‘)"/>
这是页面类容
</body>
</html>
点击hello按钮感觉会在新页面打印出来,但其实还是当前的页面只有在页面加载
过程中write才会与原有内容融合在一起(onlick页面已经加载完成)
广告联盟
http://news.baidu.com/newscode.html 百度广告获取广告代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type=text/css> div{font-size:12px;font-family:arial}.baidu{font-size:14px;line-height:24px;font-family:arial} a,a:link{color:#0000cc;}
.baidu span{color:#6f6f6f;font-size:12px} a.more{color:#008000;}a.blk{color:#000;font-weight:bold;}</style>
</head>
<script type="text/javascript">
document.write("<a href=‘http://www.itcast.cn‘>传智播客</a>");
</script>
<body>
<br/>
这是页面类容
<script language="JavaScript" type="text/JavaScript" src="http://news.baidu.com/ns?word=title%3A%E8%AE%A1%E7%AE%97%E6%9C%BA&tn=newsfcu&from=news&cl=2&rn=5&ct=0"></script>
<script type="text/javascript">
document.write("<a href=‘http://www.itcast.cn‘>传智播客</a>");
</script>
<input type="button" value="hello" onclick="document.write(‘hello‘)"/>
这是页面类容
</body>
</html>
可以直接在记事本里面打开别人网站的js代码
http://news.baidu.com/ns?word=title%3A%E8%AE%A1%E7%AE%97%E6%9C%BA&tn=newsfcu&from=news&cl=2&rn=5&ct=0
Cnzz数据专家
document方法
getElementById方法(非常常用),根据元素的Id获得对象,网页中id不能
重复。也可以直接通过元素的id来引用元素,但是有有效范围、
form1.textbox1之类的问题,因此不建议直接通过id操作元素,而是通过
getElementById
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick() {
alert(textbox1.value);
}
</script>
</head>
<body>
<input type="text" id="textbox1" />
<input type="button" value="点一下" onclick="btnClick()"/>
</body>
</html>
通过控件的id取value值但不推荐这样使用textbox1.value会出现无法取到的情况
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick() {
alert(textbox1.value);
}
function btnClick2() {
alert(textbox2.value);
}
</script>
</head>
<body>
<input type="text" id="textbox1" />
<input type="button" value="点一下" onclick="btnClick()"/>
<form action="Default.aspx">
<input type="text" id="textbox2" />
<input type="button" value="点一下" onclick="btnClick2()"/>
</form>
</body>
</html>
错误原因:input放在了form中,引用时不能直接引用input的id
正确用法:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick() {
alert(textbox1.value);
}
function btnClick2() {
// alert(textbox2.value);
alert(form1.textbox2.value);
}
</script>
</head>
<body>
<input type="text" id="textbox1" />
<input type="button" value="点一下" onclick="btnClick()"/>
<form action="Default.aspx" id="form1">
<input type="text" id="textbox2" />
<input type="button" value="点一下" onclick="btnClick2()"/>
</form>
</body>
</html>
这样使用每次要找到form的id,再通过这个id来找控件的id略显麻烦,因此推荐使用另外一种方法:getElementById(‘控件名’)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick() {
var txt = document.getElementById("textbox1");
alert(txt.value);
// alert(textbox1.value);
}
function btnClick2() {
// alert(textbox2.value);
// alert(form1.textbox2.value);
var txt = document.getElementById("textbox2");
alert(txt.value);
}
</script>
</head>
<body>
<input type="text" id="textbox1" />
<input type="button" value="点一下" onclick="btnClick()"/>
<form action="Default.aspx" id="form1">
<input type="text" id="textbox2" />
<input type="button" value="点一下" onclick="btnClick2()"/>
</form>
</body>
</html>
(*)getElementsByName,根据元素的name获得对象,由于页面中元素
的name可以重复,比如多个RadioButton的name一样,因此
getElementsByName返回值是对象数组。
易错点:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick() {
var radios=document.getElementsByName("gender");
for(var r in radios)
{
alert(r.value);
}
}
</script>
</head>
<body>
<input type="radio" value="男" name="gender"/>男
<input type="radio" value="女" name="gender"/>女
<input type="radio" value="未知" name="gender"/>未知
<input type="button" value="click" onclick="btnClick()"/>
</body>
</html>
正确方法:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick() {
var radios = document.getElementsByName("gender");
// for(var r in radios)
// {
// alert(r.value);
// }
// }在js中不像C#中的foreach,并不会遍历每个元素,而是遍历的key
for (var i = 0; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
}
</script>
</head>
<body>
<input type="radio" value="男" name="gender"/>男
<input type="radio" value="女" name="gender"/>女
<input type="radio" value="未知" name="gender"/>未知
<input type="button" value="click" onclick="btnClick()"/>
</body>
</html>
(*)getElementsByTagName,获得指定标签名称的元素数组,比如
getElementsByTagName("p")可以获得所有的<p>标签。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick() {
var radios = document.getElementsByName("gender");
// for(var r in radios)
// {
// alert(r.value);
// }
// }在js中不像C#中的foreach,并不会遍历每个元素,而是遍历的key
for (var i = 0; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
}
function btnClick2() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value = "hello";
}
}
</script>
</head>
<body>
<input type="radio" value="男" name="gender"/>男
<input type="radio" value="女" name="gender"/>女
<input type="radio" value="未知" name="gender"/>未知
<input type="button" value="click" onclick="btnClick()"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="button" value="bytagname" onclick="btnClick2()"/>
</body>
</html>
案例:点击一个按钮,被点击的按钮显示“呜呜”,其他按钮显示“哈哈”。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length;i++ ) {
var input = inputs[i];
input.onclick = btnClick;
}
}
function btnClick() {
alert("点了!");
}
</script>
</head>
<body onload="initEvent()">
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length;i++ ) {
var input = inputs[i];
// input.onclick = btnClick;
// window.event.srcElement,获得引发事件的控件
input.onclick = btnClick;
}
}
function btnClick() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input == window.event.srcElement) {
input.value = "呜呜";
}
else {
input.value = "哈哈";
}
}
}
// function btnClick() {
// alert("点了!");
// }
</script>
</head>
<body onload="initEvent()">
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
</body>
</html>
案例:十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。
(btn.disabled = true )
思路:1.注册按钮初始状态为不可用
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>注册</title>
<script type="text/javascript">
</script>
</head>
<body>
<textarea></textarea>
<input type="button" value="同意" disabled="disabled"/>
</body>
</html>
2. 启动定时器setInterval,1秒钟运行一次CountDown的方法,设定初始值10的全局变量,在
countDonw方法中对全局变量倒数
3. 将倒数的值写到按钮上(请仔细阅读协议(还剩8秒))
4. 直到全局变量的值<=0时按钮可用,并且设定按钮上文本为同意
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>注册</title>
<script type="text/javascript">
var leftScconds = 10;
var intervalId;
function CountDown() {
var btnReg = document.getElementById("btnReg");
if(btnReg)//如果网页的加载速度非常慢的话,可能定时器运行的时候控件还没有加载!
{
if (leftScconds <= 0) {
btnReg.value = "同意";
btnReg.disabled = ""; //或者btnReg.disabled=false;
clearInterval(intervalId);//停止计时器
}
else {
btnReg.value = "请仔细阅读协议(还剩" + leftScconds + "秒)";
leftScconds--;
}
}
}
intervalId=setInterval("CountDown()", 1000);
</script>
</head>
<body>
<textarea></textarea>
<input type="button" value="同意" disabled="disabled" id="btnReg"/ >
</body>
</html>
练习:加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果
放到第三个文本框中。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function calClick() {
var value1 = document.getElementById("text1").value;
var value2 = document.getElementById("text2").value;
document.getElementById("text3").value = value1 + value2;
}
</script>
</head>
<body>
<input type="text" id="text1"/>+<input type="text" id="text2"/>=
<input type="button" onclick="calClick()" value="="/><input type="text" id="text3" readonly="readonly"/>
</body>
</html>
执行的结果为拼接字符串
正确的做法为:(转换为int类型)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function calClick() {
var value1 = document.getElementById("text1").value;
var value2 = document.getElementById("text2").value;
value1 = parseInt(value1, 10);
value2= parseInt(value2, 10);
document.getElementById("text3").value = value1 + value2;
}
</script>
</head>
<body>
<input type="text" id="text1"/>+<input type="text" id="text2"/>=
<input type="button" onclick="calClick()" value="="/><input type="text" id="text3" readonly="readonly"/>
</body>
</html>
注意parseInt(参数一,参数二)
参数一为要转换的数,参数二为结果的进制数(这里是十进制,所以就是10)
练习:美女时钟。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function ReFlash() {
var imgMM = document.getElementById("imgMM");
if (!imgMM) {
return;
}
else {
imgMM.src = "Images/1.jpg";
}
}
setInterval("ReFlash()",1000);
</script>
</head>
<body>
<img id="imgMM" src=""/>
</body>
</html>
完整代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function ReFlash() {
var imgMM = document.getElementById("imgMM");
if (!imgMM) {
return;
}
// else {
// imgMM.src = "Images/1.jpg";
// }
var now = new Date();
var filename = now.getHours() + "_" + now.getSeconds() + ".jpg";
imgMM.src = "mm/" + filename;
}
setInterval("ReFlash()",1000);
</script>
</head>
<body>
<img id="imgMM" src=""/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function Fill2Len(i) {
if (i < 10) {
return "0" + i;
}
else {
return i;
}
}
function ReFlash() {
var imgMM = document.getElementById("imgMM");
if (!imgMM) {
return;
}
// else {
// imgMM.src = "Images/1.jpg";
// }
var now = new Date();
var filename = Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds()) + ".jpg";
imgMM.src = "mm/" + filename;
}
setInterval("ReFlash()",1000);
</script>
</head>
<body onload="ReFlash()">
<img id="imgMM" src=""/>
</body>
</html>
跟着杨中科学习asp.net之dom,布布扣,bubuko.com