javascript 常用代码技巧大收集

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

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

　　window.resizeTo(300,283);

　　</script>

　　8.使文字上下滚动

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

　　height=60>

　　<tr>

　　<td>

　　共和国

</table>

　　</marquee>

　　9.状态栏显示该页状态

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

　　<br>

　　<label for="A03"> 情侣 : 一次注册两个帐户</label> <br>

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

　　12.打印

　　<a href='javascript:window.print ()'> </a>打印网页

　　13.线型输入框

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

　　class="line">

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

　　function hi(str)

　　{

　　document.write(document.lastModified)

　　alert("hi"+str+"!")

　　}

　　</script>

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

　　<html>

　　<head>

<!-- Hiding

　　function hello() {

　　alert("哈罗!");

　　}

　　</script>

　　</head>

　　<body>

　　</body>

　　</html>

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

　　<HTML>

　　<HEAD>

　　<TITLE>background.html</TITLE>

　　</HEAD>

<!--

　　function bgChange(selObj) {

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

　　document.bgColor = newColor;

　　selObj.selectedIndex = -1;

　　}

　　//-->

　　</SCRIPT>

　　<B>Changing Background Colors</B>

　　<BR>

　　<FORM>

　　<OPTION>Red

　　<OPTION>Orange

　　<OPTION>Yellow

　　<OPTION>Green

　　<OPTION>Blue

　　<OPTION>Indigo

　　<OPTION>Violet

　　<OPTION>White

　　<OPTION>pink

　　</SELECT>

　　</FORM>

　　</BODY>

　　</HTML>

　　17.将按钮的特征改变

<!--

　　.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.改变按钮的图片.

<!--

　　.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.打印页面

　　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://blog.csdn.net/lxs5i5j/archive/2007/01/22/"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中

<!--

　　function Addme(){

　　url = http://blog.csdn.net/lxs5i5j/archive/2007/01/22/"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>

　　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>

　　33.改变水平线的特征

　　34.传递参数的方式

　　35.页内跳转

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

　　36.两个按键一起按下

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

　　37.刷新页面

　　javascript:this.location.reload()//

　　38.将网页的按钮使能

　　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>

　　39.文字移动

　　40.双击网页自动跑

　　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.后退

　　42.前进

　　43.刷新

　　44.转向指定网页

　　document.location=http://blog.csdn.net/lxs5i5j/archive/2007/01/22/"http://ww"或者document.location.assign(http://blog.csdn.net/lxs5i5j/archive/2007/01/22/"http://guoguo.com")

　　45.在网页上显示实时时间

　　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”内写下所需内容

　　<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

　　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://blog.csdn.net/lxs5i5j/archive/2007/01/22/"http://bjpic.163.net/images/mail/button-help.gif"></a>

　　51.向文件中写内容

　　<%@ page import="java.io.*" %>

　　String str = "print me";

　　//always give the path from root. This way it almost always works.

　　String nameOfTextFile = "/usr/anil/imp.txt";

　　try

　　{

　　PrintWriter pw = new PrintWriter(new FileOutputStream(nameOfTextFile));

　　pw.println(str);

　　//clean up

　　pw.close();

　　}

　　catch(IOException e)

　　{

　　out.println(e.getMessage());

　　}

　　52.先读文件再写文件

　　<%@ page language = "java" %>

　　<%@ page contentType = "text/html; charSet=gb2312" %>

　　<%@ page import ="java.util.*" %>

　　<%@ page import ="java.lang.*" %>

　　<%@ page import ="javax.servlet.*" %>

　　<%@ page import ="javax.servlet.jsp.*" %>

　　<%@ page import ="javax.servlet.http.*" %>

　　<%@ page import="java.io.*" %>

　　eryrytry

　　int count=0;

　　FileInputStream fi =new FileInputStream ("count.txt");

　　ObjectInputStream si= new ObjectInputStream (fi);

　　count =si.readInt();

　　count++;

　　out.print(count);

　　si.close();

　　FileOutputStream fo =new FileOutputStream ("count.txt");

　　ObjectOutputStream so= new ObjectOutputStream (fo);

　　so.writeInt(count);

　　so.close();

　　53.直线型输入框

　　<INPUT name=Password size=10 type=password style="border-left-width: 0; border-right-width: 0;

　　border-top-width: 0; border-bottom-style: solid; border-bottom-width: 1; background-color: #9CEB9C">

　　54.可以将背景改为按钮性状，通过改变css改变属性

　　<td width="65" align="center" bgcolor="#E0E0E0" onmouseover=this.className='mouseoverbt';

　　onmouseout=this.className='mouseout';><a href="tm.asp?classid=76"><font

　　color="#000000">录音笔</font></a></td>

　　<style>

　　.mouseoverbt

　　{

　　background-image: url(file:///c|/"><input type="submit" value="c:\ drive"></form>//

　　85.当前屏幕的分辨率

　　screen.width、screen.height//

　　86.设置表格中的内容

　　tbl.rows[0].cells[1].innerText=document.form.text1.value;//

　　87.本地快捷键

　　<p><a href=http://blog.csdn.net/lxs5i5j/archive/2007/01/22/"file:///::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{21EC2020-3AEA-1069-A2DD-08002B30309D}"

　　target="_blank">控制面板</a></p>

　　<p><a href=http://blog.csdn.net/lxs5i5j/archive/2007/01/22/"file:///::{7007ACC7-3202-11D1-AAD2-00805FC1270E}">拨号网络</a>(windows 2000)</p>

　　88.IE菜单

　　<button onclick="min.Click()"><font face="webdings">0</font></button>//改变按钮上的图片

　　<input type=button onclick="document.execCommand('CreateLink','true','true')"> //创建新连接

　　<input type=button onclick="document.execCommand('print','true','true')"> //打印

　　<input type=button onclick="document.execCommand('saveas','true','网站制作.htm')">//另存为htm

　　<input type=button onclick="document.execCommand('saveas','true','网站制作.txt')">//另存为txt

　　document.execCommand("SaveAs")//保存为

　　document.execCommand('undo')//撤销上一次操作

　　89.web对话框

　　var contents='<style>body,td{font:menu}img{cursor:hand}</style>';

　　contents+='<title>你要关闭我吗</title>';

　　contents+='<body bgcolor=menu>';

　　contents+='<table width=100% height=100% border=0>';

　　contents+='<tr><td align=center>';

　　contents+='你要关闭我吗？<br>';

　　contents+='<img src=http://www.aspxclub.com/UploadFile/Material/1/1281.gif onclick=self.close() alt="...关闭">';

　　contents+='<img src=http://www.aspxclub.com/UploadFile/Material/1/1282.gif onclick=self.close() alt="全是关闭">';

　　contents+='</td></tr></table>';

　　showModalDialog("about:"+contents+"","","dialogHeight:50px;dialogWidth:250px;help:no;status:no")

　　document.write(contents);

　　</SCRIPT>//

　　90.取第x,y的值

　　<button onclick="t1.rows[x].cells[y].innerText='guoguo'"></button>//

　　91.向新打开的网页上写内容

　　newwin=window.open('about:blank','','top=10');

　　newwin.document.write('');//

　　93.返回

　　javascript:history.go(-2);//

　　94.将页面上选中的内容复制到剪贴板

　　abcdefg

　　<input type='button'

　　onclick="window.clipboardData.setData('text',document.selection.createRange().text);" value='复制页面选中

　　的字符'>//

　　95.将页面上选中的内容复制到剪贴板

　　<INPUT TYPE="text" NAME="">kjhkjhkhkj<INPUT TYPE="button" onclick="document.execCommand('Copy', 'false',

　　null);">////

　　96.鼠标移到下拉框时自动全部打开

　　<select onmouseover="javascript:this.size=this.length" onmouseout="javascript:this.size=1"></select>//

　　97.获得本机的文件

　　var fso = new ActiveXObject("Scripting.FileSystemObject");

　　var f1 = fso.GetFile("C:\\bsitcdata\\ejbhome.xml");

　　alert("File last modified: " + f1.DateLastModified); //

　　98.判断客户端是否是IE浏览器

　　因为 document.all 是 IE 的特有属性，所以通常用这个方法来判断客户端是否是IE浏览器 ,document.all?1:0;

　　99.创建新的下拉框选项

　　new Option(text,value)这样的函数//

　　100.在页面上画柱状图

　　<STYLE>

　　td{font-size:12px}

　　body{font-size:12px}

　　v\:*{behavior:url(#default#VML);} //这里声明了v作为VML公用变量

　　</STYLE>

　　mathstr=12;

　　document.write ("<v:rect fillcolor='red'

　　style='width:20;color:navy;height:"+5000/(1000/mathstr)+"'><br> %"+mathstr+"<br>4人<v:Extrusion

　　backdepth='15pt' on='true'/></v:rect>")

　　</SCRIPT>

　　<v:rect fillcolor='red' style='width:20;color:navy;height:200'><br>%12<br>4人<v:Extrusion

　　backdepth='15pt' on='true'/></v:rect>

　　<v:rect fillcolor='yellow' style='width:20;color:navy;height:100'><br>%12<br>4人<v:Extrusion

　　backdepth='15pt' on='true'/></v:rect>//

　　101.饼图

　　<style>

　　v\:* { behavior: url(#default#VML) }

　　o\:* { behavior: url(#default#VML) }

　　.shape { behavior: url(#default#VML) }

　　</style>

　　function show(pie)

　　{

　　pie.strokecolor=pie.fillcolor;

　　pie.strokeweight=10;

　　div1.innerHTML="<font size=2 color=red> " + pie.id +"</font> <font size=2>" + pie.title + "</font>";

　　}

　　function hide(pie)

　　{

　　pie.strokecolor="white";

　　pie.strokeweight=1;

　　div1.innerHTML="";

　　}

　　</script>

　　</head>

　　<body>

　　<v:group style='width: 5cm; height: 5cm' coordorigin='0,0' coordsize='250,250'>

　　<v:shape id='asp技术' style='width:10;height:10;top:10;left:0' title='得票数:6 比例:40.00%'