⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 javascript 技巧大全.htm

📁 web开发常用的帮助文档
💻 HTM
📖 第 1 页 / 共 4 页
字号:
🔍
1234 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS技巧大全 </title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<br>1.文本框焦点问题
<input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if(value=='') {value='郭强'}" ID="Text1" NAME="Text1">点击时文字消失，失去焦点时文字再出现

<br>4.平面按钮
<input type=submit value=订阅 style="border:1px solid :#666666; height:17px; width:25pt; font-size:9pt; BACKGROUND-COLOR: #E8E8FF; color:#666666" name="submit" ID="Submit2">

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

<br>10.可以点击文字实现radio选项的选定
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="regtype" value="A03" id="A03">
<label for="A03"> 情侣 : 一次注册两个帐户</label> <br>
<br>11.可以在文字域的font写onclick事件
<br>14.显示文档最后修改日期
<script language=javascript>
document.write(document.lastModified)
</script>
<br>24.文字标签
<label for="AltName4"><input name="AltName" type="RADIO" tabindex="931"  id="AltName4" VALUE="AltName4">guoqiang99859</label>

<br>27.过10秒自动关闭页面
<script language="JavaScript" >
function closeit() {
setTimeout("self.close()"，100000)
}
</script >

<br>35.页内跳转
<br><a href="#1">1</a>
<br><a href="#2">2</a>
<br><a href="#3">3</a>
<br><a href="#4">4</a>
<br><a href="#5">5</a>
<br><a href="#6">6</a>
<br><a href="#7">7</a>
<br><a name="1">dfdf</a>
<br><a name="2">dfdf</a>//

<br>36.两个按键一起按下
if(event.ctrlKey && window.event.keyCode==13)//

<br>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=sc
document.ondblclick=initialize
</SCRIPT>//

<br>41.后退
<INPUT TYPE="button" onclick=window.history.back() value=back ID="Button2" NAME="Button2">

<br>42.前进
<INPUT TYPE="button" onclick=window.history.forward() value=forward ID="Button3" NAME="Button3">

<br>43.刷新
<INPUT TYPE="button" onclick=document.location.reload() value=reload ID="Button4" NAME="Button4">

<br>45.在网页上显示实时时间
<SCRIPT LANGUAGE="JavaScript">
var clock_id;
window.onload=function()
{
 clock_id=setInterval("document.form1.txtclock.value=(new Date);",1000)
}
</SCRIPT>//


<br>50.新建frame
<a 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://bjpic.163.net/images/mail/button-help.gif"></a>

<br>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" ID="Password1">

<br>61.复制内容到剪切板
<script language="javascript">
function JM_cc(bb)
{
    var ob=eval("document.form1."+bb);
    ob.select();
    js=ob.createTextRange();
    js.execCommand("Copy");
}//
</script>

<br>63.最小化窗口
window.blur()//

<br>64.文档的路径
document.URL//

<br>66.设置为主页
<script language="javascript">
function makeHome(){
  netscape.security.PrivilegeManager.enablePrivilege("UniversalPreferencesWrite");
  navigator.preference("browser.startup.homepage", location.href);
}//
</script>
67.设置为收藏
<script language="javascript">
function addFav(){
  if(ie)
    window.external.AddFavorite(location.href,'WWW.OGRISH.COM : GROTESQUE MOVIES AND PICTURES');
  if(ns)
    alert("Thanks for the bookmark!\n\nNetscape users click OK then press CTRL-D");
}//
</script>
<br>68.判断cookie是否可用
navigator.cookieEnabled;//
<br>69.显示有模式的有页面的弹出窗口
<script language="javascript">
function setbgcolor_onclick()
{
 var color = showModalDialog("/mailpage/compose/colorsel.html",0,"help=0");
 if (color != null)
 {
  document.compose.bgcolor.value = color;
 }
}//
</script>


<br>70.截取小数点后两位
var a=3454545.4454545;
alert(a.toFixed(2));//

<br>71.禁止选择页面上的文字来拷贝
<script>
function noEffect() {
  with (event) {
    returnValue = false;
    cancelBubble = true;
  }
  return;
}
</script>
<!--<body onselectstart="noEffect()" oncontextmenu="noEffect()">-->

<br>72.屏蔽右键菜单
oncontextmenu="event.returnValue = false"//

<br>73.事件禁止起泡
event.cancelBubble = true//

<br>74.禁止在输入框打开输入法
<input style="ime-mode: disabled" ID="Text5" NAME="Text5">//

<br>75.屏蔽汉字和空格
<input name="txt" ID="Text6"><input type="submit" onClick="alert(!/[^ -}]|\s/.test(txt.value))" ID="Submit4" NAME="Submit4">//


<br>77.获得当前的文本框选中的文字
<input onmouseup="alert(document.selection.createRange().text)" value=123 ID="Text7" NAME="Text7">

<br>78.跳转至目标页面，同时不可返回
<a href="javascript:location.replace('http://www.sohu.com/')">sohu.com</a>
 
<br>79.获得当前的行是表格的第几行
<script>
function getrow(obj)
{
   if(event.srcElement.tagName=="TD"){
   curRow=event.srcElement.parentElement;
   alert("这是第"+(curRow.rowIndex+1)+"行");

   }
}
</script>

<table border="1" width="100%" onclick=getrow(this) ID="Table1">
  <tr>
    <td width="20%">　</td>
    <td width="20%">　</td>
    <td width="20%">　</td>
    <td width="20%">　</td>
    <td width="20%">　</td>
  </tr>
  <tr>
    <td width="20%">　</td>
    <td width="20%">　</td>
    <td width="20%">　</td>
    <td width="20%">　</td>
    <td width="20%">　</td>
  </tr>
</table>

<br>80.删除表格某行，xx表示某行，下标从0开始计算
document.all.myTable.deleteRow(xx)//

<br>81.动态的向表格中添加行
<table id="t1" border="1">
</table>
<script language="JavaScript">
function add()
{
   t1.insertRow().insertCell().innerHTML = '<input name="test'+t1.rows.length+'">';
}//
</script> 

<br>82.event.x,event.clientX,event.offsetX区别：
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。 clientX:相对于客户区域的x坐标位置，不

包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 
screenX:相对于用户屏幕。 
<br>85.当前屏幕的分辨率
screen.width、screen.height//

<br>86.设置表格中的内容
tbl.rows[0].cells[1].innerText=document.form.text1.value;//
  
<br>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')//撤销上一次操作

<br>91.向新打开的网页上写内容
<br>newwin=window.open('about:blank','','top=10');
<br>newwin.document.write('');//

<br>94.将页面上选中的内容复制到剪贴板
<br>abcdefg
<br><input type='button' onclick="window.clipboardData.setData('text',document.selection.createRange().text);" value='复制页面选中字符' ID="Button6" NAME="Button6">
<br>95.将页面上选中的内容复制到剪贴板
<br><INPUT TYPE="text" NAME="" ID="Text8">kjhkjhkhkj<INPUT TYPE="button" onclick="document.execCommand('Copy', 'false', null);" ID="Button7" NAME="Button7">

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

<br>100.在页面上画柱状图
<STYLE>
td{font-size:12px}
body{font-size:12px}
v\:*{behavior:url(#default#VML);} //这里声明了v作为VML公用变量
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
mathstr=12;
document.write ("<v:rect fillcolor='red' style='width:20;color:navy;height:"+5000/(1000/mathstr)+"'><br>&nbsp;%"+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>//

<br>101.饼图
<style>
v\:*     { behavior: url(#default#VML) }
o\:*     { behavior: url(#default#VML) }
.shape    { behavior: url(#default#VML) }
</style>
<script language="javascript">
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%' onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com' CoordSize='10,10' strokecolor='white' fillcolor='#ffff33'><v:path v='m 300,200 ae 300,200,200,150,0,9437184 xe'/></v:shape>
<v:shape id='php' style='width:10;height:10;top:10;left:0' title='得票数:1 比例:6.67%'onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com' CoordSize='10,10' strokecolor='white' fillcolor='#ff9933'><v:path v='m 300,200 ae 300,200,200,150,9437184,1572864 xe'/></v:shape>
<v:shape id='jsp' style='width:10;height:10;top:10;left:0' title='得票数:2 比例:13.33%' onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com' CoordSize='10,10' strokecolor='white' fillcolor='#3399ff'><v:path v='m 300,200 ae 300,200,200,150,11010048,3145728 xe'/></v:shape>
<v:shape id='c#写的.netWEB程序' style='width:10;height:10;top:10;left:0' title='得票数:3 比例:20.00%' onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com' CoordSize='10,10' strokecolor='white' fillcolor='#99ff33'><v:path v='m 300,200 ae 300,200,200,150,14155776,4718592 xe'/></v:shape>
<v:shape id='vb.net写的.netWEB程序' style='width:10;height:10;top:10;left:0' title='得票数:2 比例:13.33%' onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com' CoordSize='10,10' strokecolor='white' fillcolor='#ff6600'><v:path v='m 300,200 ae 300,200,200,150,18874368,3145728 xe'/></v:shape>
<v:shape id='xml技术' style='width:10;height:10;top:10;left:0' title='得票数:1 比例:6.67%' onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com' CoordSize='10,10' strokecolor='white' fillcolor='#ff99ff'><v:path v='m 300,200 ae 300,200,200,150,22020096,1572864 xe'/></v:shape>
</v:group>

<v:group style='width: 6cm; height: 6cm' coordorigin='0,0' coordsize='250,250'>
<v:rect style='height:10;width:15;top:0;left:10' fillcolor='#ffff33'/>
<v:rect style='height:28;width:100;top:0;left:30' stroked='false'><v:textbox style='fontsize:2'>asp技术</v:textbox/></v:rect>
<v:rect style='height:10;width:15;top:30;left:10' fillcolor='#ff9933'/>
<v:rect style='height:28;width:100;top:30;left:30' stroked='false'><v:textbox style='fontsize:2'>php</v:textbox/></v:rect>
<v:rect style='height:10;width:15;top:60;left:10' fillcolor='#3399ff'/>
<v:rect style='height:28;width:100;top:60;left:30' stroked='false'><v:textbox style='fontsize:2'>jsp</v:textbox/></v:rect>
<v:rect style='height:10;width:15;top:90;left:10' fillcolor='#99ff33'/>
<v:rect style='height:28;width:300;top:90;left:30' stroked='false'><v:textbox style='fontsize:2'>c#写的.netWEB程序</v:textbox/></v:rect>
<v:rect style='height:10;width:15;top:120;left:10' fillcolor='#ff6600'/>
<v:rect style='height:28;width:300;top:120;left:30' stroked='false'><v:textbox style='fontsize:2'>vb.net写的.netWEB程序</v:textbox/></v:rect>
<v:rect style='height:10;width:15;top:150;left:10' fillcolor='#ff99ff'/>
<v:rect style='height:28;width:100;top:150;left:30' stroked='false'><v:textbox style='fontsize:2'>xml技术

</v:textbox/></v:rect>
</v:group>

<div style="position: absolute; left: 10; top: 10; width: 760; height:16">
 <table border="1" cellpadding="2" cellspacing="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#CCCCCC" width="100%" ID="Table2">
  <tr>
   <td width="100%" id=div1>　</td>
  </tr>
 </table>
</div>

<br>102.是一个特殊的容器，想装个网页都行
<!--<button ID="Button8"><iframe src="http://www.google.com/"></iframe></button> -->


<br>104.标识当前的IE事件的触发器
event.srcElement和event.keyCode//

<br>105.事件类型
event.type//

<br>107.页面翻转
<!--<html dir=rtl></html>//-->

<br>108.滚屏
parent.scroll(x,y);//
<body onload="s=0" onDblClick="s=setInterval('scrollBy(0, 1)',10)" onClick="clearInterval(s)">//

<br>114.调用父窗口的函数
opener.fucntion1();//

<br>117.交换节点
<table  width=200  height=200  border ID="Table3">
<tr><td  id=c1>CELL_1</td></tr>
<tr><td  id=c2>CELL_2</td></tr>
</table>
<br>
<input  type="button"  value="swap  row"  onclick="c1.swapNode(c2)" ID="Button13" NAME="Button13">//

<br>118.删除节点
<table  width=200  height=200  border ID="Table4">
<tr id=trall><td  id=c3>CELL_1</td></tr>
<tr><td  id=c4>CELL_2</td></tr>
</table>
<br>
<input  type="button"  value="swap  row"  onclick="trall.removeNode(c4)" ID="Button14" NAME="Button14">//

<br>120.获得事件的父与子标签
event.srcElement.children[0]和event.srcElement.parentElement //
 
121.集中为按钮改变颜色
<style>
button{benc:expression(this.onfocus = function(){this.style.backgroundColor='#E5F0FF';})}
</style>
<button ID="Button15">New</button>//

<!--
122.判断是左键还是右键被按下
<body onmousedown=if(event.button==1)alert("左键");if(event.button==2)alert("右键")>//
-->
 
<br>124.alt/ctrl/shift键按下
<br>event.altKey //按下alt键
<br>event.ctrlKey //按下ctrl键
<br>event.shiftKey //按下shift键

<br>125.将当前位置定位为C盘。
<br>{window.location="c:"}//

<br>126.返回输入框的类型
<script>
alert(event.srcElement.type);//
</script>


<br>129.格式化数字
function format_number(str,digit)
{
 if(isNaN(str))
 {
  alert("您传入的值不是数字！");
  return 0;
 }
 else if(Math.round(digit)!=digit)
 {
  alert("您输入的小数位数不是整数！");
  return 0;
 }
 else 
  return Math.round(parseFloat(str)*Math.pow(10,digit))/Math.pow(10,digit);
}
1234

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -