跟着杨中科学习asp.net之dom

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

时间: 2024-10-16 17:24:59

跟着杨中科学习asp.net之dom的相关文章

跟着杨中科学习asp.net之javascript

Dom教程 使用javascript操作dom进行dhtml开发,目标:能够使用javascript操作dom实现常见的dhtml效果 Dom就是html页面的模型,将每个标签都做成为一个对象 ,javascript通过调用dom中的属性.方法就可以对网页中的文本框.层等元素进行编程控制,比如通过操作文本框的dom对象,就可以读取文本框中的值.设置文本框中的值 Dom也像winform一样,通过事件.属性.方法进行编程 Javascript→dom就是c#→.net framework. Css

跟着杨中科学习asp.net之html

第一节课 HTML基础加强班 l 什么是浏览器? 1. 浏览器就是接受浏览者的操作(打开一个网址.点击一个链接.点击一个按钮),然后帮浏览者去web服务器请求网页的内容(html格式返回),然后展现成人眼能够看得懂的可视化的页面的软件. l IE=浏览器?这个说法是错误的.IE是浏览器的一种,还有FireFox.Opera.Charome等,注意遨游(Maxthon).世界之窗.搜狗浏览器.360浏览器等并不是一种独立于IE的浏览器,其内核还是IE的内核,只不过是换了一个外壳而已,所以用遨游的不

跟着杨中科循序渐进学习wpf(全)

第一季 C#编程基础 1.用C#编写一个10+20=?的小程序: public static voidMain(tring[] args) { int i1=10; int i2=20; int i3=i1+i2; Console.WriteLine(i3);           //也可用占位符来实现:Console.WriteLine("{0}+{1}={2}",i1,i2,i1+i2);在输出参数较多时候要用占位符 Console.ReadKey();             

杨中科与如鹏网网友的对话—阐述了C、C++、Java之学习与程序化的思维

[如鹏网网友]:请问老师,C要学到什么程度才能去学JAVA之类的面向对象的语言呢?[杨中科]:能写有一定难度的程序.比如写一个俄罗斯方块.聊天软件什么的.面向对象的核心还是面向过程,面向过程都没学好呢,理解面向对象纯属越学越糊涂[如鹏网网友]:对,当初就是C都没学好,所以学C++也是越学越累[杨中科]:我反感大学这一点.上学期学C.下学期学C++.完全违背学习规律.应该在学完C后安排一个学期的实战开发课.像咱们如鹏网的课那样.积累的足够的开发经验,明白了“一切语言.面向对象都是纸老虎”以后再学其

跟着传智播客学习asp.net之DIV+CSS

div+css详解 学习资料:韩顺平div+css视频.css禅意花园.别具光芒.csdn网页设计专栏.开源之祖sourceforeg.net.php开源大全 www.php.open.com Div+css (sascading style sheets:层叠样式表)是什么? 传统table布局缺点: 1. 显示样式和数据是绑定在一起的 2. 布局的时候灵活度不高 3. 一个页面可能会有大量的<table>元素,代码冗余 4. 增加带宽(200字节) 5. 搜索引擎不喜欢这样的布局 优点 1

【vue】跟着老马学习vue-数据双向绑定

学习了node.js教程,只能说是有了一定的了解,之前也了解了webpack和es6的核心内容,也看过vue2.0的官网教程,并结合视频看过项目,但是理解和运用仍然存在很多问题,接下来的一段时间,跟着老马学习vue 学习链接:http://aicoder.com/vue/preview/all.html#1 vue最大的特点就在于它的双向绑定,是一个前端的双向绑定类的框架. 一说到vue我们就应该立刻想到以下几部分:1.数据双向绑定:2.列表渲染.条件渲染:3.事件处理:4.生命周期:5.组件化

观看杨老师(杨旭)Asp.Net Core MVC入门教程记录

观看杨老师(杨旭)Asp.Net Core MVC入门教程记录 ASP.NET Core MVC入门 Asp.Net Core启动和配置 Program类,Main方法 Startup类 依赖注入,IoC容器 生命周期 Transient:每次被请求都会创建新的实例 Scoped:每次Web请求会创建一个实例 Singleton:一旦被创建实例,就会一直使用这个实例,直到应用停止 依赖注入好处 不用去管生命周期 类型之间没有依赖 补充: ILogger:在Microsoft.Extensions

学习ASP .NET MVC5官方教程总结(七)Edit方法和Edit视图详解

学习ASP .NET MVC5官方教程总结(七)Edit方法和Edit视图详解 在本章中,我们研究生成的Edit方法和视图.但在研究之前,我们先将 release date 弄得好看一点.打开Models\Movie.cs 文件.先添加一个引用: <span style="font-size:14px;">using System.ComponentModel.DataAnnotations;</span> 然后在Movie类中添加以下代码: [Display(

学习ASP .NET MVC5官方教程总结(六)通过控制器访问模型的数据

学习ASP .NET MVC5官方教程总结(六)通过控制器访问模型的数据 在本章中,我们将新建一个MoviesController 控制器,并编写获取电影数据的代码,使用视图模板将数据展示在浏览器中. 在进行下一步之前,你需要先编译应用程序,否则在添加控制器的时候会出错. 在解决方法资源管理器的Controllers文件夹右键,选择"添加">"新建搭建基架项": 在"添加支架"对话框,选择 包含视图的MVC 5控制器(使用 En),然后单击