Javascript_初学第1天

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

`1`	`<input type="text"` `value="无忧之源"` `onfocus="if(value=='无忧之源') {value=''}"` `onblur="if (value=='') {value='无忧之源'}">`

点击时文字消失，失去焦点时文字再出现

2.网页按钮的特殊颜色

`1`	`<input type=button name="Submit1"` `value="无忧之源"` `size=10 class="s02"` `style="background-color:rgb(235,207,22)">`

3.鼠标移入移出时颜色变化

`1`	`<input type="submit"` `value="找吧"` `name="B1"` `onMouseOut=this.style.color="blue"` `onMouseOver=this.style.color="red"` `class="button">`

4.平面按钮

`1`	`<input type=submit value=订阅 style="border:1px solid :#666666; height:17px; width:25pt; font-size:9pt; BACKGROUND-COLOR: #E8E8FF; color:#666666"` `name="submit">`

5.按钮颜色变化

`1`	`<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.平面输入框

`1`	`<input type="text"` `name="T1"` `size="20"` `style="border-style: solid; border-width: 1">`

7.使窗口变成指定的大小

1
<script> 

2
window.resizeTo(300,283); 

3
</script>

8.使文字上下滚动

01
<marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()' height=60> 

02
<!-- head_scrolltext -->

03
<tr> 

04
<td> 

05
Asp.net源码下载专业站 

06
</td> 

07
</tr> 

08
</table> 

09
        <!-- end head_scrolltext -->

10
</marquee>

9.状态栏显示该页状态

`1`	`<base` `onmouseover="window.status='网站建设 http://www.51aspx.com/' ;return true">`

10.可以点击文字实现radio选项的选定

1
<br> 

2
<input type="radio" name="regtype" value="A03" id="A03"> 

3
<label for="A03"> Asp.net源码下载专业站 : 一次注册两个帐户</label> <br>

11.可以在文字域的font写onclick事件

12.打印</a>打印网页

`1`	`<a href='javascript:window.print ()'>`

13.线型输入框

`1`	`<input type="text"` `name="key"` `size="12"` `value="关键字"` `onFocus=this.select() onMouseOver=this.focus() class="line">`

14.显示文档最后修改日期

15.可以在鼠标移到文字上时就触发事件

01
<html> 

02
<head> 

03
<script language="LiveScript"> 

04
<!-- Hiding 

05
    function hello() { 

06
      alert("哈罗!"); 

07
    } 

08
</script> 

09
</head> 

10
<body> 

11
<a href="" onMouseOver="hello()">link</a> 

12
</body> 

13
</html>

16.可以根据网页上的选项来确定页面颜色

01
<HTML> 

02
<HEAD> 

03
<TITLE>background.html</TITLE> 

04
</HEAD> 

05
<SCRIPT> 

06
<!--  

07
function bgChange(selObj) { 

08
newColor = selObj.options[selObj.selectedIndex].text; 

09
document.bgColor = newColor; 

10
selObj.selectedIndex = -1; 

11
}  

12
//--> 

13
</SCRIPT> 

14
<BODY STYLE="font-family:Arial"> 

15
<B>Changing Background Colors</B> 

16
<BR> 

17
<FORM> 

18
  <SELECT SIZE="8" onChange="bgChange(this);"> 

19
  <OPTION>Red 

20
  <OPTION>Orange 

21
  <OPTION>Yellow 

22
  <OPTION>Green 

23
  <OPTION>Blue 

24
  <OPTION>Indigo 

25
  <OPTION>Violet 

26
  <OPTION>White 

27
<OPTION>pink 

28
  </SELECT> 

29
</FORM> 

30
</BODY> 

31
</HTML>

17.将按钮的特征改变

1
<style type="text/CSS"> 

2
<!-- 

3
.style1 { font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF  

4
#CCCCCC #CCCCCC #CCCCFF} 

5
.style2 { font-size: 12px; font-weight: bold; background: #CCFFCC; border-width: thin medium medium thin;  

6
border-color: #CCFF99 #999999 #999999 #CCFF99} 

7
--> 

8
</style>

`1`	`<input` `type="submit"` `name="Submit"` `value="提交"` `onmouseover="this.className='style2'"` `onmouseout="this.className='style1'"` `class="style1">`

18.改变按钮的图片.

1
<style type="text/css"> 

2
<!-- 

3
.style3 { font-size: 12px; background: url(image/buttonbg1.gif); border: 0px; width: 60px; height: 22px} 

4
.style4 { font-size: 12px; font-weight: bold; background: url(image/buttonbg2.gif); border: 0px 0; width:  

5
60px; height: 22px} 

6
--> 

7
</style>  

8

`1`	`<input type="submit"` `name="Submit2"` `value="提交"` `onmouseover="this.className='style4'"`

`2`	`onmouseout="this.className='style3'"` `class="style3">`

19.打印页面

`1`	`<div` `align="center"><a` `class="content"` `href="javascript:doPrint();">打印本稿</a></div>`

20.可以直接写html语言

`1`	`document.write("");`

21.改变下拉框的颜色

`1`	`<select name="classid"` `onChange="changelocation(document.myform.classid.options[document.myform.classid.selectedIndex].value)"`

`2`	`size="1"` `style="color:#008080;font-size: 9pt">`

22.转至目标URL

`1`	`window.location="http://www.51aspx.com"`

23.传递该object的form

1
UpdateSN('51aspx99267',this.form)  

2
function UpdateSN(strValue,strForm) 

3
{ 

4
  strForm.SignInName.value = strValue; 

5
  return false; 

6
}

24.文字标签

`1`	`<label` `for="AltName4"><input` `name="AltName"` `type="RADIO"` `tabindex="931"` `id="AltName4"` `>51aspx</label>`

25.layer2为组件的ID，可以控制组件是否可见

`1`	`document.all.item('Layer2').style.display =` `"block";`

`2`	`document.all.item('Layer2').style.display =` `"none";//`

26.将页面加入favorite中

1
<script language=javascript>  

2
<!--  

3
function Addme(){  

4
url = "http://www.51aspx.com"; //你自己的主页地址  

5
title = "Your Site Name"; //你自己的主页名称  

6
window.external.AddFavorite(url,title);  

7
-->  

8
</script>//

27.过10秒自动关闭页面

1
< script language="JavaScript" > 

2
function closeit() { 

3
setTimeout("self.close()"，10000) 

4
} 

5
< /script >

28.可以比较字符的大小

`1`	`char=post.charAt(i);`

`2`	`if(!('0'<=char&&char<='9'))`

29.将字符转化为数字

`1`	`month = parseInt(char)`

30.点击value非空的选项时转向指定连接

1
<select onchange='if(this.value!="")window.open(this.value)' class="textinput"> 

2
    <option selected>主办单位</option> 

3
    <option>-----------------</option> 

4
    <option value="http://bbs.51aspx.com">无忧之源</option> 

5
    <option value="http://www.ben.com.cn/">北京晚报</option> 

6
</select>

31.改变背景颜色

`1`	`<td width=*` `class="dp"` `bgColor=#FAFBFC onmouseover="this.bgColor='#FFFFFF';"` `onmouseout="this.bgColor='#FAFBFC';">`

32.改变文字输入框的背景颜色

1
<style> 

2
.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} 

3
</style> 

4
<input name=content type=text size="47" class="input2" maxlength="50">

33.改变水平线的特征

`1`	`<hr` `size="0"` `noshade` `color="#C0C0C0">`

34.传递参数的方式

`1`	`<a href="51aspx.aspx?CurPage=8&id=3488">8</a>`

35.页内跳转

1
<a href="#1">1</a> 

2
<a href="#2">2</a> 

3
<a href="#3">3</a> 

4
<a href="#4">4</a> 

5
<a href="#5">5</a> 

6
<a href="#6">6</a> 

7
<a href="#7">7</a> 

8
<a name="1">dfdf</a> 

9
<a name="2">dfdf</a>//

36.两个按键一起按下

`1`	`if(event.ctrlKey && window.event.keyCode==13)//`

37.刷新页面

`1`	`javascript:this.location.reload()//`

38.将网页的按钮使能

01
<SCRIPT LANGUAGE="JavaScript"> 

02
function haha() 

03
{ 

04
for(var i=0;i<document.form1.elements.length;i++) 

05
{ 

06
  if(document.form1.elements[i].name.indexOf("bb")!=-1) 

07
  document.form1.elements[i].disabled=!document.form1.elements[i].disabled; 

08
} 

09
} 

10
</SCRIPT> 

11
<BODY><form name=form1> 

12
<INPUT TYPE="button" NAME="aa "  value=cindy onclick=haha()> 

13
<INPUT TYPE="button" NAME="bb " value=51aspx> 

14
<INPUT TYPE="button" NAME="bb " value=51aspx>

posted @ 2011-03-28 19:37 DotNet-ChangTseng 阅读(248) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

DotNet-ChangTseng

Javascript_初学第1天

公告