- 1.文本框焦點問題
- onBlur:當失去輸入焦點後產生該事件
- onFocus:當輸入獲得焦點後,產生該文件
- Onchange:當文字值改變時,產生該事件
- Onselect:當文字加亮後,產生該文件
- <input type="text" value="mm" onfocus="if(value=='mm) {value=''}" onblur="if
- (value=='') {value='mm'}">點擊時文字消失,失去焦點時文字再出現
- 2.網頁按鈕的特殊顏色
- <input type=button name="Submit1" value="郭強" size=10 class=s02
- style="background-color:rgb(235,207,22)">
- 3.鼠標移入移出時顏色變化
- <input type="submit" value="找吧" name="B1" onMouseOut=this.style.color="blue"
- onMouseOver=this.style.color="red" class="button">
- 4.平面按鈕
- <input type=submit value=訂閱 style="border:1px solid :#666666; height:17px; width:25pt; font-size:9pt;
- BACKGROUND-COLOR: #E8E8FF; color:#666666" name="submit">
- 5.按鈕顏色變化
- <input type=text name="nick" style="border:1px solid #666666; font-size:9pt; height:17px;
- BACKGROUND-COLOR: #F4F4FF; color:#ff6600" size="15" maxlength="16">
- 6.平面輸入框
- <input type="text" name="T1" size="20" style="border-style: solid; border-width: 1">
- 7.使窗口變成指定的大小
- <script>
- window.resizeTo(300,283);
- </script>
- 8.使文字上下滾動
- <marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()'
- height=60>
- <!-- head_scrolltext -->
- <tr>
- <td>
- 共和國
- </table> <!-- end head_scrolltext -->
- </marquee>
- 9.狀態欄顯示該頁狀態
- <base onmouseover="window.status='網站建設 http://www.webmake.cn/' ;return true">
- 10.可以點擊文字實現radio選項的選定
- <input type="radio" name="regtype" value="A03" id="A03">
- <label for="A03"> 情侶 : 一次註冊兩個帳戶</label>
- 11.可以在文字域的font寫onclick事件
- 12.打印</a>打印網頁
- <a href='javascript:window.print ()'>
- 13.線型輸入框
- <input type="text" name="key" size="12" value="關鍵字" onFocus=this.select() onMouseOver=this.focus()
- class="line">
- 14.顯示文檔最後修改日期
- <script language=javascript>
- function hi(str)
- {
- document.write(document.lastModified)
- alert("hi"+str+"!")
- }
- </script>
- 15.可以在鼠標移到文字上時就觸發事件
- <html>
- <head>
- <script language="LiveScript">
- <!-- Hiding
- function hello() {
- alert("哈羅!");
- }
- </script>
- </head>
- <body>
- <a href="" onMouseOver="hello()">link</a>
- </body>
- </html>
- 16.可以根據網頁上的選項來確定頁面顏色
- <HTML>
- <HEAD>
- <TITLE>background.html</TITLE>
- </HEAD>
- <SCRIPT>
- <!--
- function bgChange(selObj) {
- newColor = selObj.options[selObj.selectedIndex].text;
- document.bgColor = newColor;
- selObj.selectedIndex = -1;
- }
- //-->
- </SCRIPT>
- <BODY STYLE="font-family:Arial">
- <B>Changing Background Colors</B>
- <FORM>
- <SELECT SIZE="8" onChange="bgChange(this);">
- <OPTION>Red
- <OPTION>Orange
- <OPTION>Yellow
- <OPTION>Green
- <OPTION>Blue
- <OPTION>Indigo
- <OPTION>Violet
- <OPTION>White
- <OPTION>pink
- </SELECT>
- </FORM>
- </BODY>
- </HTML>
- 17.將按鈕的特徵改變
- <style type="text/css">
- <!--
- .style1 { font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF
- #CCCCCC #CCCCCC #CCCCFF}
- .style2 { font-size: 12px; font-weight: bold; background: #CCFFCC; border-width: thin medium medium thin;
- border-color: #CCFF99 #999999 #999999 #CCFF99}
- -->
- </style>
- 本例按鈕的代碼如下:
- <input type="submit" name="Submit" value="提 交" onmouseover="this.className='style2'"
- onmouseout="this.className='style1'" class="style1">
- 18.改變按鈕的圖片.
- <style type="text/css">
- <!--
- .style3 { font-size: 12px; background: url(image/buttonbg1.gif); border: 0px; width: 60px; height: 22px}
- .style4 { font-size: 12px; font-weight: bold; background: url(image/buttonbg2.gif); border: 0px 0; width:
- 60px; height: 22px}
- -->
- </style>
- 本例的按鈕代碼如下:
- <input type="submit" name="Submit2" value="提 交" onmouseover="this.className='style4'"
- onmouseout="this.className='style3'" class="style3">
- 19.打印頁面
- <div align="center"><a class=content href="javascript:doPrint();">打印本稿</a></div>
- 20.可以直接寫html語言
- document.write("");
- 21.改變下拉框的顏色
- <select name="classid"
- onChange="changelocation(document.myform.classid.options[document.myform.classid.selectedIndex].value)"
- size="1" style="color:#008080;font-size: 9pt">
- 22.轉至目標URL
- window.location="http://guoguo"
- 23.傳遞該object的form
- UpdateSN('guoqiang99267',this.form)
- function UpdateSN(strValue,strForm)
- {
- strForm.SignInName.value = strValue;
- return false;
- }
- 24.文字標籤
- <label for="AltName4"><input name="AltName" type="RADIO" tabindex="931" id="AltName4"
- >guoqiang99859</label>
- 25.layer2爲組件的ID,可以控制組件是否可見
- document.all.item('Layer2').style.display = "block";
- document.all.item('Layer2').style.display = "none";//
- 26.將頁面加入favorite中
- <script language=javascript>
- <!--
- function Addme(){
- url = "http://your.site.address"; //你自己的主頁地址
- title = "Your Site Name"; //你自己的主頁名稱
- window.external.AddFavorite(url,title);
- -->
- </script>//
- 27.過10秒自動關閉頁面
- < script language="JavaScript" >
- function closeit() {
- setTimeout("self.close()",10000)
- }
- < /script >
- 28.可以比較字符的大小
- char=post.charAt(i);
- if(!('0'<=char&&char<='9'))
- 29.將字符轉化爲數字
- month = parseInt(char)
- 30.點擊value非空的選項時轉向指定連接
- <select onchange='if(this.value!="")window.open(this.value)' class="textinput">
- <option selected>主辦單位</option>
- <option>-----------------</option>
- <option value="http://www.bjd.com.cn/">北京日報</option>
- <option value="http://www.ben.com.cn/">北京晚報</option>
- </select>
- 31.改變背景顏色
- <td width=* class=dp bgColor=#FAFBFC onmouseover="this.bgColor='#FFFFFF';"
- onmouseout="this.bgColor='#FAFBFC';">
- 32.改變文字輸入框的背景顏色
- <style>
- .input2 {background-image: url('../images/inputbg.gif'); font-size: 12px; background-color:
- #D0DABB;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
- </style>
- <input name=content type=text size="47" class="input2" maxlength="50">
- 33.改變水平線的特徵
- <hr size="0" noshade color="#C0C0C0">
- 34.傳遞參數的方式
- <a href="vote.asp?CurPage=8&id=3488">8</a>
- 35.頁內跳轉
- <a href="#1">1</a>
- <a href="#2">2</a>
- <a href="#3">3</a>
- <a href="#4">4</a>
- <a href="#5">5</a>
- <a href="#6">6</a>
- <a href="#7">7</a>
- <a name="1">dfdf</a>
- <a name="2">dfdf</a>//
- 36.兩個按鍵一起按下
- if(event.ctrlKey && window.event.keyCode==13)//
- 37.刷新頁面
- javascript:this.location.reload()//
- 38.將網頁的按鈕使能
- <SCRIPT LANGUAGE="JavaScript">
- function haha()
- {
- for(var i=0;i<document.form1.elements.length;i++)
- {
- if(document.form1.elements[i].name.indexOf("bb")!=-1)
- document.form1.elements[i].disabled=!document.form1.elements[i].disabled;
- }
- }
- </SCRIPT>
- <BODY><form name=form1>
- <INPUT TYPE="button" NAME="aa " value=cindy onclick=haha()>
- <INPUT TYPE="button" NAME="bb " value=guoguo>
- <INPUT TYPE="button" NAME="bb " value=guoguo>
- 39.文字移動
- <marquee scrollamount=3 onmouseover=this.stop(); onmouseout=this.start();>
- 40.雙擊網頁自動跑
- <SCRIPT LANGUAGE="JavaScript">
- var currentpos,timer;
- function initialize()
- {
- timer=setInterval("scrollwindow()",1);
- }
- function sc()
- {
- clearInterval(timer);
- }
- function scrollwindow()
- {
- currentpos=document.body.scrollTop;
- window.scroll(0,++currentpos);
- if (currentpos != document.body.scrollTop)
- sc();
- }
- document.onmousedown=sc
- document.ondblclick=initialize
- </SCRIPT>//
- 41.後退
- <INPUT TYPE="button" onclick=window.history.back() value=back>
- 42.前進
- <INPUT TYPE="button" onclick=window.history.forward() value=forward>
- 43.刷新
- <INPUT TYPE="button" onclick=document.location.reload() value=reload>
- 44.轉向指定網頁
- document.location="http://ww"或者document.location.assign("http://guoguo.com")
- 45.在網頁上顯示實時時間
- <SCRIPT LANGUAGE="JavaScript">
- var clock_id;
- window.onload=function()
- {
- clock_id=setInterval("document.form1.txtclock.value=(new Date);",1000)
- }
- </SCRIPT>//
- 46.可以下載文件
- document.location.href="目標文件"//
- 47.連接數據庫
- import java.sql.*;
- String myDBDriver="sun.jdbc.odbc.JdbcOdbcDriver";
- Class.forName(myDBDriver);
- Connection conn=DriverManager.getConnection("jdbc:odbc:firm","username","password");
- Statement stmt=conn.createStatement();
- ResultSet rs=stmt.executeQuery(sql);
- rs.getString("column1");//
- 48.可以直接在頁面“div”內寫下所需內容
- <INPUT TYPE="button" onclick="a1.innerHTML='<font color=red>*</font>'">
- <div id=a1></div>//
- 49.可以改變頁面上的連接的格式,使其爲雙線
- <style>
- A:link {text-decoration: none; color:#0000FF; font-family: 宋體}
- A:visited {text-decoration: none; color: #0000FF; font-family: 宋體}
- A:hover {text-decoration: underline overline; color: FF0000}
- </style>
- <style>
- A:link {text-decoration: none; color:#0000FF; font-family: 宋體}
- A:visited {text-decoration: none; color: #0000FF; font-family: 宋體}
- A:hover {text-decoration: underline overline line-through; color: FF0000}
- TH{FONT-SIZE: 9pt}
- TD{FONT-SIZE: 9pt}
- body {SCROLLBAR-FACE-COLOR: #A9D46D; SCROLLBAR-HIGHLIGHT-COLOR: #e7e7e7;SCROLLBAR-SHADOW-COLOR:#e7e7e7;
- SCROLLBAR-3DLIGHT-COLOR: #000000; LINE-HEIGHT: 15pt; SCROLLBAR-ARROW-COLOR: #ffffff;
- SCROLLBAR-TRACK-COLOR: #e7e7e7;}
- INPUT{BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE:
- 9pt; BORDER-LEFT-COLOR: #cccccc;
- BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #cccccc; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #cccccc;
- PADDING-TOP: 1px; HEIGHT: 18px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc}
- DIV,form ,OPTION,P,TD,BR{FONT-FAMILY: 宋體; FONT-SIZE: 9pt}
- textarea, select {border-width: 1; border-color: #000000; background-color: #efefef; font-family: 宋體;
- font-size: 9pt; font-style: bold;}
- .text { font-family: "宋體"; font-size: 9pt; color: #003300; border: #006600 solid; border-width: 1px 1px
- 1px 1px}
- </style>完整的css
- 50.新建frame
- <a
- href="javascript:newframe('http://www.163.net/help/a_little/index.html','http://www.163.net/help/a_little
- /a_13.html')"><img alt=幫助 border=0 src="http://bjpic.163.net/images/mail/button-help.gif"></a>
JS技巧
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.