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 >