当前位置:主页 > 网页教程 > 网络编程 > JavaScript > 内容欢迎大家投稿

50个JavaScript的最常用网页技巧

时间:2009-10-11 08:48来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

1。文本框焦点问题
的onblur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
的OnChange:当文字值改变时,产生该事件
Onselect:当文字加亮后,产生该文件
“输入型=”文本“值=”郭强“onfocus =”如果(价值=='郭强')(价值=''}"的onblur =“如果
(价值=='')(值='郭强')“”点击时文字消失,失去焦点时文字再出现

2。网页按钮的特殊颜色
<input type=button name="Submit1"value="郭强"size=10 class=s02 style="background-color:#ebcf16">

3。鼠标移入移出时颜色变化
<input type="submit"value="找吧"name="B1" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" class="button">

4。平面按钮
“输入型=提交值=订阅风格=”边界:1px固体:#666666;高度:17px;宽度:25pt;字体大小:小五号,背景,颜色:#E8E8FF;颜色:#666666“名称=”提交“ “

5。按钮颜色变化
“输入型=文字名称=”尼克“样式=”边界:1px固体#666666;字体大小:小五号,身高:17px;背景,颜色:#F4F4FF;颜色:#ff6600“规模=”15“最大长度=” 16“”

6。平面输入框
<input type="text" name="T1" size="20" style="border-style: solid; border-width: 1">

7。使窗口变成指定的大小
的<SCRIPT>
window.resizeTo(三十○万○二百八十三);
“/脚本”

8。使文字上下滚动
<marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()' height=60>
“! - head_scrolltext - ”
<tr>
<td>
共和国
“/表”“! -结束head_scrolltext - ”
“/选取框”

9。状态栏显示该页状态
“基地通过鼠标=”window.status ='网站建设 http://www.ke8.cn/' ;返回true“”

10。可以点击文字实现无线选项的选定
<br>
<input type="radio" name="regtype" value="A03" id="A03">
<label for="A03">情侣:一次注册两个帐户“/标签”<br>

11。可以在文字域的字体写的OnClick事件

12。打印“/ 1”打印网页
<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>
功能嗨(海峡)

document.write(document.lastModified)

警报(“嗨”+海峡+“!”

“/脚本”

15。可以在鼠标移到文字上时就触发事件
<html>
的<head>
<script language="LiveScript">
“! -隐藏
函数您好()(
警报(“哈罗!”;

“/脚本”
“/头”
的<Body>
的<a href="" onMouseOver="hello()">“链接</ 1”
“/体”
“/的HTML”

16。可以根据网页上的选项来确定页面颜色
<HTML>
的<head>
<标题> background.html“/标题”
“/头”
的<SCRIPT>
“! -

功能bgChange(selObj)(
newColor = selObj.options [selObj.selectedIndex]。文本;
document.bgColor = newColor;
selObj.selectedIndex = -1;


//-->
“/脚本”
<BODY STYLE="font-family:Arial">
一下<B>更改背景颜色“/乙”
<BR>
的<FORM>
<选择SIZE="8" onChange="bgChange(this);">
<选项红
<选项橙
<选项黄色
<选项绿
<选项蓝
<选项靛蓝
<选项紫罗兰
<选项白
<选项粉红
“/选择”>
“/表格”
“/体”
“/的HTML”

17。将按钮的特征改变
<style type="text/CSS">
“! -
。缤纷(字体大小:12px;背景:#CCCCFF;边框宽度:薄薄的薄薄的,边框颜色:#CCCCFF

#CCCCCC#CCCCCC#CCCCFF)
。蓝紫魅力(字体大小:12px;字体体重:粗体;背景:#CCFFCC,边框的宽度:薄介质中薄;

边框颜色:#CCFF99#999999#999999#CCFF99)
- “
“/样式”
本例按钮的代码如下:
“输入型=”提交“名称=”提交“值=”提交“通过鼠标=”this.className ='蓝紫魅力'“

鼠标移开=“this.className ='缤纷'”阶级=“缤纷世界”“

18。改变按钮的图片。
<style type="text/css">
“! -
。节日礼物(字体大小:12px;背景:网址(image/buttonbg1.gif);边界:0px;宽度:60px;高度:22px)
。都市风情(字体大小:12px;字体体重:粗体;背景:网址(image/buttonbg2.gif);边界:0px 0;宽度:

60px;高度:22px)
- “
“/样式”
本例的按钮代码如下:
“输入型=”提交“名称=”Submit2“值=”提交“通过鼠标=”this.className ='都市风情'“

鼠标移开=“this.className ='节日礼物'”阶级=“节日礼物”“


19。打印页面
<div align="center"> <a class=time>文章href="javascript:doPrint();">打印本稿“/ 1”“/分区”

20。可以直接写的HTML语言
document.write(“”;


21。改变下拉框的颜色
“选择名称=”的classid“


的OnChange =“changelocation(document.myform.classid.options [document.myform.classid.selectedIndex]。价值)”

大小=“1”样式=“颜色:#008080;字体大小:小五号”“

22。转至目标网址
window.location =“http://www.soke8.com“

23。传递该对象的形式
UpdateSN('guoqiang99267',this.form)
功能UpdateSN(strValue,strForm)

strForm.SignInName.value = strValue;
返回false;

24。文字标签
<label for="AltName4">“输入名称=”AltName“类型=”无线电“的tabindex =”931“编号=”AltName4“

“guoqiang99859”/标签“


25.layer2为组件的身份证,可以控制组件是否可见
document.all.item('2层')。style.display =“块”;
document.all.item('2层')。style.display =“没有”; / /

26。将页面加入最爱中
<script language=javascript>
“! -
功能Addme()(
网址=“http://your.site.address“; / /你自己的主页地址
标题=“您的网站名称”,/ /你自己的主页名称
window.external.AddFavorite(网址,标题);
- “
“/脚本”/ /


27。过10秒自动关闭页面
“脚本语言=”JavaScript的“”
功能closeit()(
setTimeout(“self.close()”,10000)

“/脚本”


28。可以比较字符的大小
字符= post.charAt(一);
如果(!('0“<=字符&字符”= '9'))

29。将字符转化为数字
月= parseInt(字符)

30。点击价值的非空的选项时转向指定连接
<选择onchange='if(this.value!=""window.open(this.value)' class="textinput">
<option selected>主办单位“/选项”>
<选项-----------------</选项“>
“选项值=”http://www.bjd.com.cn/“”北京日报“/选项”>
“选项值=”http://www.ben.com.cn/“”北京晚报“/选项”>
“/选择”>

31。改变背景颜色
“运输署宽度=*框中的民主党类= =#FAFBFC通过鼠标=”this.bgColor ='#000000';“

鼠标移开=“this.bgColor ='#FAFBFC';”“


32。改变文字输入框的背景颜色
<style>
。input2(背景图片:网址('../图像/ inputbg.gif');字体大小:12px,背景色:

#D0DABB,边境顶宽度:1px;边界右宽度:1px;边框底部宽度:1px;边界左宽度:1px)
“/样式”
<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“/ 1”

35。页内跳转
<a href="#1"> 1“/ 1”
<a href="#2">第2“/ 1”
<a href="#3"> 3“/ 1”
<a href="#4"> 4“/ 1”
<a href="#5"> 5“/ 1”
<a href="#6"> 6“/ 1”
<a href="#7"> 7“/ 1”
<a name="1"> dfdf“/ 1”
<a name="2"> dfdf“/ 1”/ /

36。两个按键一起按下
如果(event.ctrlKey&&window.event.keyCode == 13)/ /

37。刷新页面
JavaScript的:this.location.reload()/ /

38。将网页的按钮使能
<SCRIPT LANGUAGE="JavaScript">
功能哈哈()

对(无功= 0;我“document.form1.elements.length,我+ +)

如果(document.form1.elements.name.indexOf(“BB”的!=- 1)
document.form1.elements.disabled =!document.form1.elements.disabled;


“/脚本”
的<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">
无功currentpos,定时器;
函数初始化()

计时器= setInterval(“滚动的窗口()”,1);

功能资深大律师()

clearInterval(定时器);

功能滚动的窗口()

currentpos = document.body.scrollTop;
window.scroll(0,+ + currentpos);
如果(currentpos = document.body.scrollTop)
资深大律师();

document.onmousedown =资深大律师
document.ondblclick =初始化
“/脚本”/ /

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://www.0051.com“或者document.location.assign(”http://www.666c.com“

45。在网页上显示实时时间
<SCRIPT LANGUAGE="JavaScript">
无功clock_id;
window.onload =功能()

clock_id = setInterval(“document.form1.txtclock.value =(新的日期);”,1000)

“/脚本”/ /


46。可以下载文件
document.location.href =“目标文件”/ /

47。连接数据库
进口java.sql中.*;
字符串myDBDriver =“sun.jdbc.odbc.JdbcOdbcDriver”;
Class.forName(myDBDriver);
连接康恩= DriverManager.getConnection(“jdbcdbc:企业”,“用户名”,“密码”;
声明stmt = conn.createStatement();
ResultSet的卢比= stmt.executeQuery(SQL)的;
rs.getString(“栏位”; / /

48。可以直接在页面“分区”内写下所需内容
“输入类型=”按钮“的OnClick =”a1.innerHTML ='<font color=red> *“/字体>”“”
<div id=a1>“/分区”/ /


49。可以改变页面上的连接的格式,使其为双线
<style>
答:连接(文字装饰:无;颜色:#宋体,字体- family:宋体)
答:访问(文字装饰:无;颜色:#宋体,字体- family:宋体)
答:悬停(文字装饰:下划线上划线,颜色:FF0000)
“/样式”

<style>
答:连接(文字装饰:无;颜色:#宋体,字体- family:宋体)
答:访问(文字装饰:无;颜色:#宋体,字体- family:宋体)
答:悬停(文字装饰:下划线上划线线通过;颜色:FF0000)
第(字体大小:小五号)
运输署(字体大小:小五号)
体(滚动条面,颜色:#A9D46D,滚动条,亮点颜色:#e7e7e7,滚动条,阴影的颜色:#e7e7e7;滚动条- 3DLIGHT -颜色:#000000;线高度:15pt;滚动条箭头,颜色: #000;滚动条轨颜色:#e7e7e7;)
输入(边境机上宽:1px;填充右:1px;填充左:1px;边境左,宽度:1px;字体大小:小五号,边境左-颜色:#cccccc;边境底,宽:1px;边境底,颜色:#cccccc;填充底:1px;边境机上颜色:#cccccc;填充,顶部:1px;高度:18px;边境右-宽度:1px;边境右双色:#cccccc)
DIV的,形式,股权,磷,运输署,商业登记(字体家庭:宋体;字体大小:小五号)
多行文本,选择(边框宽度:1;边框颜色:#000000;背景颜色:#efefef;字体- family:宋体;字体大小:小五号,字体风格:大胆;)
。文本(字体家庭:“宋体”,字体大小:小五号;颜色:#003300;边界:#006600固体;边框宽度:1px 1px 1px 1px)
“/样式”完整的的CSS

50。新建框架
“1的HREF =”JavaScript的:newframe('http://www.163.net/help/a_little/index.html','http://www.163.net/help/a_little/a_13.html')“ “<imgalt=帮助border=0 src="/upimg/allimg/070206/0926040.gif">”/ 1“

(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接