我们爱分享----200多个js技巧代码(1)----学习用

  
  
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选项的选定 < br > &nbsp;&nbsp;&nbsp;&nbsp; < input type ="radio" name ="regtype" value ="A03" id ="A03" > < label for ="A03" > 情侣 : 一次注册两个帐户 </ label > < br > 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 > < BR > < 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 >
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值