DOM 讲解结束
12.window对象的属性2 --oncopy
•clipboardData对象,对黏贴板的操作.clearData("Text")清空粘贴板, .getData("Text")得到粘贴板的信息,返回值为粘贴板中的内容; .setData("Text".val),设置粘贴板中的值
•案例:复制地址给好友
<input type="button" value="分享给好友" onclick ="clipboardData.setData('Text','我发现一个好玩的网站,很黄很暴力!'+location.href);alert('已经粘贴成功!');" />
•当复制的时候body和oncopy方法被触发,直接return false就是禁止复制.任何元素又有oncopy属性
<body oncopy="alert('禁止复制!');return false;">
<input type="button" value="分享给好友" onclick ="clipboardData.setData('Text','我发现一个好玩的网站,很黄很暴力!'+location.href);alert('已经粘贴成功!');" />
这里是一些文章
</body>
•当粘贴的时候body和onpaste方法被触发,直接return false就禁止粘贴
<label for="phone">手机号码 </label>< input id ="phone" type ="text" oncopy ="alert('请不要复制到下面的重复手机号码里面')"/>
<br />
<label for="phoneAgain">重复手机号码 </label>< input id ="Again" type ="text" onpaste ="alert('为了保证您的充值正确,请勿粘贴号码!');return false;"/>
•很多元素都有oncopy,onpaste
13.window对象的属性3 --oncopy,onpaste
用户复制动作发生0.1秒后再去改粘贴板中的内容,100ms只是一个经常取值,写1000,10,50,200,都行.不能直接在oncopy里修改
不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒后执行,这样就不再oncopy的执行调用栈上了
<script type="text/javascript">
function modifyClipboard() { //修改粘贴板中的内容
clipboardData.setData( 'Text', clipboardData.getData('Text' ) + '本文来自' + location.href);
}
</script>
</head>
<body oncopy="setTimeout('modifyClipboard()',100);"> <!--设置0.1秒的缓冲-->
14.window对象属性4 --history --document
window.history.back()后退, window.history.forward()前进. 也可以用window.history.go(-1)后退,window.history.go(1)前进
<a href="javascript:window.history.back()">后退</ a>
document属性 是最复杂的属性之一 后面详细使用
15.document属性1
•document是window对象的一个属性,因为使用window对象成员的时候可以忽略window,所以一般直接写document
document的方法:
(1)write:向文档中写入内容,writelen,写入行,有回车
<input type="button" value="点击" onclick="document.write('<font
color=red >你好</font>')" />
在onclick等事件中写的代码会冲掉页面的内容分类,只有在页面加载过程中write才会与原有内容融合在一起
<script type="text/javascript">
document.writeln( '<font
color=red>你好</font>' );
</script>
write经常在广告代码,整合资源代码中被使用.见备注内容联盟,广告代码,不需要被页面的站长去维护内容,只要被嵌入的js内容提供商修改内容,显示的内容就变了
16.document方法
(2)getElementById方法(非常常用),根据元素的Id获得对象,网页中的id不能重复.也可以直接通过元素的id来引用元素,但是有有效范围,form1.textbox1之类的问题,因此不建议直接通过id操作元素,而是通过getElementById来调用
< head>
< title></ title >
< script type ="text/javascript" >
function btnClick()
{
var txt
= document.getElementById("textbx1" );
alert(txt.value);
}
function btnClick2()
{
var txt
= document.getElementById("textbx2" );
alert(txt.value);
}
</ script>
</ head>
< body>
< input id ="textbx1" type ="text" />< input type ="button" value ="按钮1" onclick ="btnClick()" />
< form id ="form1" action ="WebForm1.aspx">
< input id ="textbx2" type ="text" />< input type ="button" value ="按钮2" onclick ="btnClick2()" />
</ form>
</ body>
(3)(*)getElementByName,根据元素的name获得对象,由于页面元素的name可以重复,不如RadioButton的name一样,因此getElementByName返回是对象数组.
function btnClick()
{
var radios
= document.getElementsByName( "gender");
for (var i
= 0; i < radios.length; i++) {
var r
= radios[i];
alert(r.value);
}
}
< input type ="radio" name ="gender" value ="男" /> 男
< input type ="radio" name ="gender" value ="女" /> 女
< input type ="radio" name ="gender" value ="保密" /> 保密
< input type ="button" value ="提交" onclick ="btnClick()" />
(4)(*)getElementByTagName,获得指定标签名称的元素数组,比如getElementByTagName("p")可以获得所有的<p>标签
function giveName()
{
var inputs
= document.getElementsByTagName( "input");
for (var i
= 0; i < inputs.length; i++) {
var input
= inputs[i];
input.value = "hhh" ;
}
}
(5)案例:点击按钮,变呜呜,其他哈哈
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 = "哈哈" ;
}
}
}
< body onload ="initEvent()">
< input type ="button" value ="哈哈" />
< input type ="button" value ="哈哈" />
< input type ="button" value ="哈哈" />
< input type ="button" value ="哈哈" />
< input type ="button" value ="哈哈" />
</ body>
(6)案例:十秒后协议文本框下的注册按钮才能点击,时钟倒是.
(btn.disabled = true)
< script type ="text/javascript">
var time
= 10; //次数
var timeId; //定时器ID
function initSubmitBtn()
{
timeId = setInterval( "desrease()" ,
1000); //定时器开始
}
function desrease()
{
var btn
= document.getElementById("submitbtn" );
if (btn)
{
if (time
> 0) {
btn.value = "请仔细阅读协议(还剩" +
time + "秒)";
}
else {
btn.disabled = "" ;
clearInterval(timeId); //停止定时器
btn.value = "同意" ;
return ;
}
time--;
}
}
</ script>
< body onunload ="initSubmitBtn()">
< input type ="button" id ="submitbtn" disabled ="disabled" value ="同意"/>
(7)案例:加法计算器 两个文本框 点击【=】按钮 在第三个文本框中显示 结果
< head>
< title></ title >
< script type ="text/javascript">
function btnAdd()
{
var first
= document.getElementById("txt1" ).value;
var second
= document.getElementById( "txt2").value;
first = parseInt(first, 10); //js是弱类型的
second = parseInt(second, 10);
document.getElementById( "result" ).value
= first + second;
}
</ script>
</ head>
< body>
< input type ="text" id ="txt1" /> + < input type ="text" id ="txt2" />
< input type ="button" id ="btnAdd" value ="
= " onclick ="btnAdd()" />
< input type ="text" id ="result" readonly ="readonly" />
</ body>
(8)案例:美女时钟
< head>
< title></ title >
< script type ="text/javascript">
var timeId;
var nowTime;
function Fill2Len(i)
{
if (i
< 10) {
return "0" +
i;
}
else {
return i;
}
}
function Refresh()
{
var imgMM
= document.getElementById("imgMM" );
if (!imgMM)
{
return ;
}
nowTime = new Date(); //"网上有模仿C#函数实现"yy-mm-dd"的效果,搜索
javascript format
var filename
= Fill2Len(nowTime.getHours()) + "_" +
Fill2Len(nowTime.getSeconds()) + ".jpg" ;
imgMM.src = "mm/" +
filename;
}
timeId = setInterval( "Refresh()" ,
1000);
</ script>
</ head>
< body onload ="Refresh()">
< img id ="imgMM" src ="" alt ="美女时钟" />
</ body>
