一個題目包括70種網頁製作常用技巧

 

1. 將徹底屏蔽鼠標右鍵
2. 取消選取、防止複製
3. 不準粘貼
4. 防止複製
5.  IE地址欄前換成自己的圖標
6. 可以在收藏夾中顯示出你的圖標
7. 關閉輸入法
8. 永遠都會帶着框架
9. 防止被人frame
10. 網頁將不能被另存爲
11. 查看網頁源代碼
12.刪除時確認
13. 取得控件的絕對位置
14. 光標是停在文本框文字的最後
15. 判斷上一頁的來源
16. 最小化、最大化、關閉窗口
17.屏蔽功能鍵Shift,Alt,Ctrl
18. 網頁不會被緩存
19.怎樣讓表單沒有凹凸感?
20.<div><span>&<layer>的區別? 
21.讓彈出窗口總是在最上面:
22.不要滾動條? 
23.怎樣去掉圖片鏈接點擊後,圖片周圍的虛線?
24.電子郵件處理提交表單
25.在打開的子窗口刷新父窗口的代碼裏如何寫?
26.如何設定打開頁面的大小
27.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動 
28. 檢查一段字符串是否全由數字組成
29. 獲得一個窗口的大小
30. 怎麼判斷是否是字符
31.TEXTAREA自適應文字行數的多少
字串6

32. 日期減去天數等於第二個日期
33. 選擇了哪一個Radio
34.腳本永不出錯
35.ENTER鍵可以讓光標移到下一個輸入框
36. 檢測某個網站的鏈接速度:
37. 各種樣式的光標
38.頁面進入和退出的特效
39.在規定時間內跳轉
40.網頁是否被檢索
41. 設置iframe scrolling="no"
42. 被包含頁body應用overflow:hidden
43. 被包含頁的body標籤加scroll="no"
44 盒狀收縮 1 盒狀放射
45 圓形收縮 3 圓形放射
46 由下往上 5 由上往下
47 從左至右 7 從右至左
48 垂直百葉窗 9 水平百葉窗
49 水平格狀百葉窗 11垂直格狀百葉窗
50 隨意溶解 13從左右兩端向中間展開
51從中間向左右兩端展開 15從上下兩端向中間展開
52從中間向上下兩端展開 17 從右上角向左下角展開
53 從右下角向左上角展開 19 從左上角向右下角展開
54 從左下角向右上角展開 21 水平線狀展開
55 垂直線狀展開 23 隨機產生一種過渡方式
56 忽視右鍵 
57 加入背景音樂 
58 簡單的window.open方法 
59 簡單的頁面加密 
60 拉動頁面時背景圖不動 
61 讓瀏覽器在保存頁面時保存失敗字串7 
62 隨機替換圖片 
63 窗口定時關閉 
64 網頁自動關閉 
65 網頁自動刷新 
66 網頁自動轉頁 
67 保持layer在最前面,而不被Iframe、Object所覆蓋 
68 返回上一頁 
69 關閉窗口 
70 關於iframe的透明背景
1。忽視右鍵 
 <body οncοntextmenu="return false">
 或
 <body style="overflow-y:hidden"> 
2。加入背景音樂 
 IE:<bgsound src="*.mid" loop=infinite>
 NS:<embed src="*.mid" autostart=true hidden=true loop=true>
 </embed>
 *.mid你的背景音樂的midi格式文件 
3。簡單的window.open方法 
 <a href="#" 
 οnclick="javascript:window.open(文件路徑/文件名,newwindow,
 toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,
 width=400,height=300);">文字或圖片
 參數解釋:
 <SCRIPT LANGUAGE="javascript"> js腳本開始;
 window.open 彈出新窗口的命令;
 文件路徑/文件名彈出窗口的文件名;
字串7

 newwindow 彈出窗口的名字(不是文件名),非必須,可用空代替;
 width=400 窗口寬度;
 height=300 窗口高度;
 top=0 窗口距離屏幕上方的象素值;
 left=0 窗口距離屏幕左側的象素值;
 toolbar=no 是否顯示工具欄,yes爲顯示;
 menubar,scrollbars 表示菜單欄和滾動欄。
 resizable=no 是否允許改變窗口大小,yes爲允許;
 location=no 是否顯示地址欄,yes爲允許;
 status=no 是否顯示狀態欄內的信息(通常是文件已經打開),yes爲允許;
 </SCRIPT> js腳本結束 
4。簡單的頁面加密 
 <script LANGUAGE="javascript">
 <!--
 function loopy(){
  var sWord ="";
  while(sWord!="login"){sWord=prompt("請輸入你的登陸密碼");}
  alert("登陸成功!");
 }
 loopy()
 //-->
 </script> 
5。拉動頁面時背景圖不動 
 <style>
 body{background-image:url(logo.gif);
 background-repeat:no-repeat;background-position:center}
 </style> 字串7 
6。讓瀏覽器在保存頁面時保存失敗 
 <NOSCRIPT><iframe src="*.html"></iframe></NOSCRIPT> 
7。隨機替換圖片 
 <script>
 document.write(<img src="img/+parseInt(Math.random()*(5))
 +.gif"height="40" width="50">)
 </script>

 圖片文件名爲0.gif 1.gif 2.gif 3.gif 4.gif 
8。窗口定時關閉 
 先將如下代碼網頁文件的區:
 <script language="javascript">
 function closeit() { setTimeout("self.close()",10000) //毫秒 }
 </script>
 然後再在<body>標內加入如:<body οnlοad="closeit()"> 
9。網頁自動關閉 
 <html>
 <head>
 <object id=closes type="application/x-oleobject"
 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
 <param name="Command" value="Close">
 </object>
 </head>
 <body οnlοad="window.setTimeout(closes.Click(),10000)"> 
字串4

 這個窗口會在10秒過後自動關閉,而且不會出現提示.
 </body>
 </html> 
10。網頁自動刷新 
 在head部記入
 <META HTTP-EQUIV="Refresh" content="20">
 其中20爲20秒後自動刷新,你可以更改爲任意值。 
11。網頁自動轉頁 
 <META HTTP-EQUIV="Refresh" CONTENT="時間(秒);URL=地址"> 
12。保持layer在最前面,而不被Iframe、Object所覆蓋 
 在Layer中再插Iframe 或 Object 設z-Index值
 <div z-Index:2><object xxx></object> #前面
 <div z-Index:1><object xxx></object> #後面
 <div id="Layer2" style="position:absolute; top:40;width:400px;
 height:95px;z-index:2"> height=100% width=100%>
 <iframe width=0 height=0></iframe>
 </div>
 <div id="Layer1" style="position:absolute; top:50;width:200px;
 height:115px;z-index:1">
 <iframe height=100% width=100%></iframe> 字串6 
 </div> 
13。返回上一頁 
 <a href=javascript:history.back(1)>『返回上一頁』 
14。關閉窗口 
 <a href=javascript:self.close()>『關閉窗口』 
15。關於iframe的透明背景 
 <IFRAME ID="iFrame1" SRC="iframe.htm" 
 allowTransparency="true" 
 style="background-color: green"></IFRAME>
讓你的網頁無法另存爲
<noscript><iframe src=*></iframe></noscript>

讓IFRAME框架內的文檔的背景透明
<iframe src="about:<body style='background:transparent'>"

allowtransparency></iframe>

禁止右鍵:
<body οncοntextmenu="return false" οndragstart="return false"

onselectstart ="return false" οnselect="document.selection.empty()"

οncοpy="document.selection.empty()" onbeforecopy="return 
false"οnmοuseup="document.selection.empty()"> 
字串6


進入頁面後立即自動刷新?
<meta http-equiv="refresh"

content="120;url=http://www.wodutom.com/cn083">
http://www.wodutom.com/cn083,這是你自己的網址。

打開窗口即最大化
<script language="javascript"> 
<!-- Begin 
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End --> 
</script>

能隱藏IFRAME的滾動條嗎?我知道的三種方法:
1. 設置iframe scrolling="no"
2. 被包含頁body應用overflow:hidden
3. 被包含頁的body標籤加scroll="no"

加入背景音樂
<bgsound src="mid/windblue[1].mid" loop="-1"> 只適用於IE

<embed src="music.mid" autostart="true" loop="true" hidden="true">

對Netscape ,IE 都適用

嵌入網頁
<iframe name="tt" src="01a.html" width="450" height="287"

scrolling="Auto" frameborder="0"></iframe> 
字串5


跳轉
<meta http-equiv="refresh" content="3;URL=list.htm">

滾動
<MARQUEE direction=up height=146 οnmοuseοut=start()

οnmοuseοver=stop() 
scrollAmount=4></marquee>

細線分隔線
<hr noshade size=0 color=#C0C0C0>

過度方式
<meta http-equiv="Page-Exit"

content="revealTrans(Duration=3,Transition=5)">
Duration的值爲網頁動態過渡的時間,單位爲秒。
Transition是過渡方式,它的值爲0到23,分別對應24種過渡方式。如下表:
0 盒狀收縮 1 盒狀放射
2 圓形收縮 3 圓形放射
4 由下往上 5 由上往下
6 從左至右 7 從右至左
8 垂直百葉窗 9 水平百葉窗
10 水平格狀百葉窗 11垂直格狀百葉窗
12 隨意溶解 13從左右兩端向中間展開
14從中間向左右兩端展開 15從上下兩端向中間展開
16從中間向上下兩端展開 17 從右上角向左下角展開
18 從右下角向左上角展開 19 從左上角向右下角展開
20 從左下角向右上角展開 21 水平線狀展開
22 垂直線狀展開 23 隨機產生一種過渡方式
字串1

 

如何控制橫向和縱向滾動條的顯隱?
<body style="overflow-y:hidden"> 去掉x軸
<body style="overflow-x:hidden"> 去掉y軸
<body scroll="no">不顯

怎樣在 FrontPage2000 中加入 Flash 動畫? 
在 FrontPage2000 中,點擊[插入]->[高級]->[插件],在彈出的窗口中,設置

一下 Flash 文件的大小及其它信息,確定即可。

加入註釋的格式是:   
<!-[註釋內容…]-->


怎樣在網頁中加入 E-mail 鏈接並顯示預定的主題? 
……


定義本網頁關鍵字,可以在〈Head〉〈/Head〉中加入如下代碼:  
<meta name="Keywords" content="china,enterprise,business,net">   
Content 中所包含的就是關鍵字,你可以自行設置。   
這裏有個技巧,你可以重複某一個單詞,這樣可以提高自己網站的排行位置,如: 
<meta name="Keywords" content="china,china,china,china">

IE5.0 的部分快捷鍵: 
A:打開查找功能:Ctrl+F 
字串6

關閉瀏覽器窗口:Ctrl+W 
打開地址欄下拉列表框:F4 
刷新:F5 
將當前Web頁保存到收藏夾列表:Ctrl+D 
打開當前 IE 窗口的一個拷貝:Ctrl+N 
停止下載當前網頁:Esc 
光標迅速移動到網頁的開頭:Home 
光標迅速移動到網頁的尾部:End 
打開新的地址鍵入窗口:Ctrl+O 
打開收藏夾:Ctrl+I 
打開歷史記錄文件夾:Ctrl+H 
打開瀏覽器設定的默認主頁:Alt+HOME


添加到收藏夾:
<a href="javascript:window.external.addFavorite('http://鏈接','說明

');">添加到收藏夾

設爲首頁:
<a href=#

οnclick=this.style.behavior='url(#default#homepage)';this.setHomePage

('http://鏈接');>設爲首頁

定製瀏覽器地址欄前的小圖標:
A:在網頁的<head></head>間加入以下語句:<link rel="shortcuticon"

href="http://…/icon.ico">即可。其中 icon.ico 爲 16x16 的圖標文件,

顏色不要超過 16 色。

把滾動條放在瀏覽器窗口的左邊
A:在 <body> 中加 dir=RTL,即 <body dir=RTL>。
字串1


讓背景圖不滾動
IE瀏覽器支持一個 Body 屬性 bgproperties,它可以讓背景不滾動: 
<Body Background="圖片文件" bgproperties="fixed">
1. οncοntextmenu="window.event.returnvalue=false" 將徹底屏蔽鼠標右鍵
<table border οncοntextmenu=return(false)><td>no</table> 可用於Table

2. <body onselectstart="return false"> 取消選取、防止複製

3. οnpaste="return false" 不準粘貼

4. οncοpy="return false;" oncut="return false;" 防止複製

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標

7. <input style="ime-mode:disabled"> 關閉輸入法

8. 永遠都會帶着框架
<script language="javascript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm爲框架網頁字串4 
// --></script>

9. 防止被人frame
<SCRIPT LANGUAGE=javascript><!-- 
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>

10. 網頁將不能被另存爲
<noscript><iframe src=*.html></iframe></noscript>

11. <input type=button value=查看網頁源代碼 
οnclick="window.location = 'view-source:'+ 'http://www.51js.com/'">

12.刪除時確認
<a href='javascript:if(confirm("確實要刪除嗎?"))location="boos.asp?&areyou=刪除&page=1"'>刪除

13. 取得控件的絕對位置
//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"><!-- 字串8 
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"
end function
--></script>

14. 光標是停在文本框文字的最後
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" οnfοcus="cc()">

15. 判斷上一頁的來源
javascript:
document.referrer

16. 最小化、最大化、關閉窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
<param name="Command" value="Minimize"></object> 字串4 
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>

<input type=button value=最小化 οnclick=hh1.Click()>
<input type=button value=最大化 οnclick=hh2.Click()>
<input type=button value=關閉 οnclick=hh3.Click()>
本例適用於IE

17.屏蔽功能鍵Shift,Alt,Ctrl
<script>
function look(){ 
if(event.shiftKey) 
alert("禁止按Shift鍵!"); //可以換成ALT CTRL
} 
document.οnkeydοwn=look; 
</script>

18. 網頁不會被緩存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
字串2

或者<META HTTP-EQUIV="expires" CONTENT="0">

19.怎樣讓表單沒有凹凸感?
<input type=text style="border:1 solid #000000"> 

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 1 solid #000000"></textarea>

20.<div><span>&<layer>的區別? 
<div>(division)用來定義大段的頁面元素,會產生轉行 
<span>用來定義同一行內的元素,跟<div>的唯一區別是不產生轉行 
<layer>是ns的標記,ie不支持,相當於<div>


21.讓彈出窗口總是在最上面:
<body οnblur="this.focus();">

22.不要滾動條? 
讓豎條沒有: 
<body style='overflow:scroll;overflow-y:hidden'> 
</body> 
讓橫條沒有: 
<body style='overflow:scroll;overflow-x:hidden'> 
</body> 
兩個都去掉?更簡單了 
<body scroll="no"> 
</body>

23.怎樣去掉圖片鏈接點擊後,圖片周圍的虛線?字串6 
<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0>

24.電子郵件處理提交表單
<form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain"> 
<input type=submit>
</form>

25.在打開的子窗口刷新父窗口的代碼裏如何寫?
window.opener.location.reload()

26.如何設定打開頁面的大小
<body οnlοad="top.resizeTo(300,200);">
打開頁面的位置<body οnlοad="top.moveBy(300,200);">

27.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動 
<STYLE> 
body 
{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed} 
</STYLE>

28. 檢查一段字符串是否全由數字組成
<script language="javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141")) 
字串3

alert(checkNum("123214214a1"))
// --></script>

29. 獲得一個窗口的大小
document.body.clientWidth; document.body.clientHeight

30. 怎麼判斷是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");
else alert("全是字符");

31.TEXTAREA自適應文字行數的多少
<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea>

32. 日期減去天數等於第二個日期
<script language=javascript>
function cc(dd,dadd)
{
//可以加上錯誤處理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("12/23/2002",2)
</script>

33. 選擇了哪一個Radio
<HTML><script language="vbscript">
function checkme() 字串1 
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="style" checked>Style
<INPUT name="radio1" type="radio" value="barcode">Barcode
<INPUT type="button" value="check" οnclick="checkme()">
</BODY></HTML>

34.腳本永不出錯
<SCRIPT LANGUAGE="javascript"> 
<!-- Hide 
function killErrors() { 
return true; 
} 
window.onerror = killErrors; 
// --> 
</SCRIPT>

35.ENTER鍵可以讓光標移到下一個輸入框
<input οnkeydοwn="if(event.keyCode==13)event.keyCode=9">

36. 檢測某個網站的鏈接速度:
把如下代碼加入<body>區域中:
<script language=javascript>
tim=1
setInterval("tim++",100)
b=1

var autourl=new Array() 字串7 
autourl[1]="www.njcatv.net"
autourl[2]="javacool.3322.net"
autourl[3]="www.sina.com.cn"
autourl[4]="www.nuaa.edu.cn"
autourl[5]="www.cctv.com"

function butt(){
document.write("<form name=autof>")
for(var i=1;i<autourl.length;i++)
document.write("<input type=text name=txt"+i+" size=10 value=測試中……> =》<input type=text

name=url"+i+" size=40> =》<input type=button value=GO

οnclick=window.open(this.form.url"+i+".value)><br>")
document.write("<input type=submit value=刷新></form>")
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0]["txt"+b].value="鏈接超時"}
else
{document.forms[0]["txt"+b].value="時間"+tim/10+"秒"}
b++ 
字串9

}
function run(){for(var i=1;i<autourl.length;i++)document.write("<img

src=http://"+autourl+"/"+Math.random()+" width=1 height=1

οnerrοr=auto('http://";;;;+autourl+"')>")}
run()</script>

37. 各種樣式的光標
auto :標準光標
default :標準箭頭
hand :手形光標
wait :等待光標
text :I形光標
vertical-text :水平I形光標
no-drop :不可拖動光標
not-allowed :無效光標
help :?幫助光標
all-scroll :三角方向標
move :移動標
crosshair :十字標
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize

38.頁面進入和退出的特效
進入頁面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出頁面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)"> 
這個是頁面被載入和調出時的一些特效。duration表示特效的持續時間,以秒爲單位。transition表示使
字串7


用哪種特效,取值爲1-23:
  0 矩形縮小 
  1 矩形擴大 
  2 圓形縮小
  3 圓形擴大 
  4 下到上刷新 
  5 上到下刷新
  6 左到右刷新 
  7 右到左刷新 
  8 豎百葉窗
  9 橫百葉窗 
  10 錯位橫百葉窗 
  11 錯位豎百葉窗
  12 點擴散 
  13 左右到中間刷新 
  14 中間到左右刷新
  15 中間到上下
  16 上下到中間 
  17 右下到左上
  18 右上到左下 
  19 左上到右下 
  20 左下到右上
  21 橫條 
  22 豎條 
  23 以上22種隨機選擇一種

39.在規定時間內跳轉
<META http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">

40.網頁是否被檢索
<meta name="ROBOTS" content="屬性值">
  其中屬性值有以下一些:
  屬性值爲"all": 文件將被檢索,且頁上鍊接可被查詢;
  屬性值爲"none": 文件不被檢索,而且不查詢頁上的鏈接;
  屬性值爲"index": 文件將被檢索;
字串6

  屬性值爲"follow": 查詢頁上的鏈接;
  屬性值爲"noindex": 文件不檢索,但可被查詢鏈接;
  屬性值爲"nofollow": 文件不被檢索,但可查詢頁上的鏈接。
字串7

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章