js技巧收集(30个)

1 .文本框焦点问题
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件

< input type = " text "  value = " 郭强 "  onfocus = " if(value=='郭强') {value=''} "  onblur = " if 
(value=='') {value='郭强'} " > 点击时文字消失，失去焦点时文字再出现


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 >