九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
JavaScript網(wǎng)頁特效學習筆記2

今天又從書上和視頻中學到了幾個網(wǎng)頁常見的JavaScript特效，也知道了幾個在html頁面中很少用到的屬性。

1、按鈕只能被單擊一次

上網(wǎng)的時候可能會看到當單擊按鈕之后，就不能再次的單擊了，直到經(jīng)過幾秒鐘后，才可以進行單擊，其實這是用表單的那些元素的disabled屬性來設(shè)置的，如果元素的值為真，則元素不可用，反之，則可用。

  1. <html>  
  2.     <head>  
  3.         <title>這個頁面的按鈕只能被單擊一次</title>  
  4.         <script type="text/javascript">  
  5.         </script>  
  6.     </head>  
  7.     <body>  
  8.         <input type="button" name="button" value="只能單擊一次" onclick="this.disabled=true"/>  
  9.     </body>  
  10. </html>  


2、滾動的字幕鏈接

 在沒有學過JavaScript之前，html中的marquee屬性就是用來設(shè)置字幕的滾動的，我們也可以用JavaScript動態(tài)的創(chuàng)建marquee標簽。

  1. <html>  
  2.     <head>  
  3.         <title>帶鏈接的滾動字幕</title>  
  4.         <script type="text/javascript">  
  5.             var marqueewidth=400 //設(shè)置marquee的寬度   
  6.       
  7.             var marqueeheight=20//設(shè)置marquee的高度   
  8.       
  9.             var speed=6//設(shè)置marquee滾動的速度  
  10.       
  11.             var marqueecontents='<strong><big><a )  
  12.     </script>  
  13.     </head>  
  14.     <body>  
  15.     </body>  
  16. </html>  


 3、給按鈕定義熱鍵

為了方便用戶對網(wǎng)站的操作，有些網(wǎng)站給一些元素定義了熱鍵。在這里用的熱鍵是針對于Alt鍵的，有些屬性有accesskey的方法，通過該方法可以指定和Alt鍵搭配形成熱鍵。

  1. <html>  
  2.     <head>  
  3.         <title>可用快捷鍵鍵提交的表單</title>  
  4.     </head>  
  5.     <body>  
  6.         <form action="http://blog.csdn.net/long2010yu2010" method="get" name="form1">  
  7.             <textarea rows="6" cols="40">  
  8.             </textarea>  
  9.             <br/>  
  10.             <input type="submit" accesskey="G" value="提交按鈕(可以用Alt+g)"/>  
  11.         </form>  
  12.     </body>  
  13. </html>  


4、加入收藏夾

幾乎每個網(wǎng)站都有收藏本站的鏈接，只需要通過JavaScript的一條語句可以簡單的實現(xiàn)這種效果。通過window下的external屬性下的addFavorite方法就可實現(xiàn)這種操作。

  1. <html>  
  2.     <head>  
  3.         <title>加入收藏夾</title>  
  4.         <script type="text/javascript">   
  5.         function store()  
  6.         {  
  7.             window.external.addFavorite("http://blog.csdn.net/long2010yu2010","我的網(wǎng)站");  
  8.         }  
  9.     </script>  
  10.     </head>  
  11.     <body>  
  12.     <a href="#" onClick="store()"><center>收藏本站</center></a>  
  13.     </body>  
  14. </head>  


5、禁止復制和粘貼

有時為了需要，需要對某些文本進行禁止復制和粘貼的操作，我們可以用JavaScript的oncopy事件和onpaste事件對它進行設(shè)置。

  1. 事件<html>  
  2.     <head>  
  3.         <title>這個網(wǎng)頁不能復制和粘貼</title>  
  4.     </head>  
  5.     <body>  
  6.         <form name="form1" method="get">  
  7.             <textarea rows="6" cols="30" oncopy="document.selection.empty()"   
  8.             onpaste="return false">  
  9.             </textarea>  
  10.         </form>  
  11.     </body>  
  12. </html>  


6、改變元素的大小

某些元素具有contentediteable屬性，通過該屬性可以對其中的元素進行編輯，如在div中放入一個文本框和一個按鈕，當頁面執(zhí)行時會發(fā)現(xiàn)可以改變元素的大小等操作。

  1. <html>  
  2.     <head>  
  3.         <title>這個頁面文本框可改變大小</title>  
  4.     </head>  
  5.     <body>  
  6.         <div contenteditable="true">  
  7.             <input type="text" name="text" />  
  8.             <br/>  
  9.             <input type="button" name="button" value="這個可改變大小"/>  
  10.         </div>  
  11.         <input type="button" value="這個不能改變大小"/>  
  12.     </body>  
  13. </html>  


7、放大文本

放大文本有多種方法，如改變字體的字號等，這里我寫的是我新學習的方法，通過樣式表中的zoom屬性，這個屬性是設(shè)置或檢索對象的縮放比例。 通過縮放可以實現(xiàn)放大或縮小文本、圖片的效果。

  1. <html>  
  2.     <head>  
  3.         <title>文本放大效果</title>  
  4.     </head>  
  5.     <body>  
  6.         <font color="red" onmouseover="this.style.zoom='180%'"   
  7.         onmouseout="this.style.zoom='normal'">  
  8.             鼠標放到這個文本上面會被放大！  
  9.         </font>  
  10.     </body>  
  11. </html>  


8、用Enter鍵登錄

我們上網(wǎng)的時候，當輸入完某些信息后，習慣用Enter進入，如果此時該按鈕被設(shè)置了onclick方法，并且該按鈕處于焦點，那么直接用Enter鍵是好使的，如果沒在焦點上怎么辦呢？我們可以用下面的方法。

  1. <html>  
  2.     <head>  
  3.         <title>這個頁面的Enter能登錄</title>  
  4.         <script type="text/javascript">  
  5.             function Enter()  
  6.             {  
  7.                 if(event.keyCode == 13)//如果按下的鍵的碼是13，即回車鍵  
  8.                 {  
  9.                     document.getElementById("button1").click();//調(diào)用按鈕的點擊方法  
  10.                 }  
  11.             }  
  12.         </script>  
  13.     </head>  
  14.     <body onkeydown="Enter()">  
  15.         <input type="button" id="button1" value="登錄" onclick="alert('登錄按鈕被點擊了！')"/>  
  16.     </body>  
  17. </html>  


9、最后的更新時間

 在JavaScript中通過lastModified屬性可以知道頁面的最后更新時間。

  1. <script type="text/javascript">  
  2. document.write("<font color="red" size="7">本頁最后的更新日期: <br/>" + document.lastModified + "");  
  3. </script>  


 10、全選按鈕特效

在我們下載東西的時候，會發(fā)現(xiàn)選中了一個復選框全部的都選中，在單擊就都不選了，這個特效是十分簡單的只要設(shè)置選中時，遍歷每個下載鏈接將他們的checked屬性設(shè)為真，取消時將他們設(shè)為空即可。

  1. <html>  
  2.     <head>  
  3.         <title>復選框全選</title>  
  4.         <script type="text/javascript">  
  5.               
  6.               
  7.             function sall()  
  8.             {  
  9.                 var c = document.getElementsByName("check");    //得到名字為check的復選框?qū)ο髷?shù)組  
  10.                 var all = document.getElementsByName("all")[0];//得到全選復選框?qū)ο?nbsp; 
  11.                 if(all.checked == true)  
  12.                 {  
  13.                     for (var i = 0;i < c.length;i++ )  
  14.                     {  
  15.                         c[i].checked = "true";  
  16.                     }  
  17.                 }  
  18.                 else   
  19.                 {  
  20.                     for (var i = 0;i < c.length;i++ )  
  21.                     {  
  22.                         c[i].checked = "";  
  23.                     }  
  24.                 }  
  25.         }             
  26.         </script>  
  27.     </head>  
  28.     <body>  
  29.         <form name="form1" method="get">  
  30.             <input type="checkbox" name="check">選項一<br/>  
  31.             <input type="checkbox" name="check">選項二<br/>  
  32.             <input type="checkbox" name="check">選項三<br/>  
  33.             <input type="checkbox" name="check">選項四<br/>  
  34.             <input type="checkbox" name="check">選項五<br/>  
  35.             <input type="checkbox" name="check">選項六<br/>  
  36.             <input type="checkbox" name="check">選項七<br/>  
  37.             <input type="checkbox" name="check">選項八<br/>  
  38.         </form>  
  39.         <input type="checkbox" name="all" onclick="sall()">全選<br/>  
  40.     </body>  
  41. </html>  


這10個是我昨天和今天通過一些書和資料總結(jié)來的，希望對大家有所幫助，有手寫的，有改的，如果有不足之處希望大家理解。

本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
關(guān)于JavaScript中處理表單from提交的問題淺談
<br/>換行
javascript實現(xiàn)點擊按鈕彈出全屏的窗口
js按鈕改成連接跳轉(zhuǎn)
HTML模擬測試題
第五章 表單的制作
更多類似文章 >>
生活服務
熱點新聞
分享 收藏 導長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服