JS常用小例子
2012-10-22 23:26
190 查看
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=s02style="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> <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.转至目标URLwindow.location="http://guoguo"23.传递该object的formUpdateSN('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=scdocument.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 1px1px 1px}</style>完整的css50.新建frame<ahref="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>
type="text" value="mm" onfocus="if(value=='mm)
{value=''}" onblur="if(value=='') {value='mm'}">点击时文字消失，失去焦点时文字再出现2.网页按钮的特殊颜色<input
type=button
name="Submit1" value="郭强" size=10
class=s02style="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> <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.转至目标URLwindow.location="http://guoguo"23.传递该object的formUpdateSN('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=scdocument.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 1px1px 1px}</style>完整的css50.新建frame<ahref="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数组常用的方法例子-结果在下方
- 常用到的JS 验证(包括例子)
- 使用js中常用的鼠标事件实现一个拖拽的例子
- 【转】常用到的JS 验证(包括例子)
- 工作中常用到的JS表单验证代码(包括例子)
- js判断手机访问或者PC的几个例子(常用于手机跳转)
- 工作中常用到的JS表单验证代码(包括例子)
- js判断手机访问或者PC的几个例子(常用于手机跳转)
- 自己工作中 整理的常用到的JS 验证(包括例子)
- 工作中常用到的JS表单验证代码(包括例子)
- 卡特兰数定义及其几个常用的应用（附例子"括号匹配"代码）+应用总结
- 常用查询的例子
- 微信js-sdk，分享接口常用逻辑分装
- js 常用页面刷新
- js常用校验
- JS 对输入框进行限制(常用的都有)
- js 常用写法笔记
- AngularJS Step by Step (2) : 一个数据绑定的例子
- php curl常用的5个例子
- 收集的JS常用正则表达式等