实用前端技巧集锦-优快云博客

Ctrl+Enter发表帖子
以下是代码：
<body onkeydown="if(event.keyCode==13 && event.ctrlKey)messager.submit()"> <form action="1.htm" method=post name=messager>按Ctrl+Enter试试</form> </body>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

浏览者自己控制字体大小
以下是代码：
【<A href="javascript:doZoom(16)">大</A> <A href="javascript:doZoom(14)">中</A> <A href="javascript:doZoom(12)">小</A>】 <SCRIPT language=javascript> function doZoom(size){ document.getElementById('zoom').style.fontSize=size+'px' } </script> <br><br> <div id=zoom>测试</div>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

检测文本框中字符串的长度，汉字算2个，英文算1个
以下是代码：
<script> function checkstr(str) { num=str.length var arr=str.match(/[^////////////////x00-////////////////x80]/ig) if(arr!=null)num+=arr.length alert(num) } </script> <input id="msg" value="在线goaler.xicp.net"><input type=button onclick=checkstr(msg.value) value="检查">
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

不刷新的写屏
以下是代码：
<html> <head> <title></title> <script language="javascript"> step=0; function flash_title(){ step++; if (step==3) {step=1}; if (step==1) {document.title='☆☆☆☆☆☆☆☆☆☆'}; if (step==2) {document.title='★★★★★★★★★★'}; setTimeout("flash_title()",600);}; flash_title() </script> </head> </html>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]
以下是代码：
<html> <head> <title></title> <script language="javascript">  </script> </head> <body onload="flash_title()"> <span id="strText">刷新一下</span> </body> </html>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

取得键盘的KeyCode
以下是代码：
<html>  <head> <script language="javascript"> ns4 = (document.layers) ? true : false; ie4 = (document.all) ? true : false; function keyDown(e){ if(ns4){ var nkey=e.which; var iekey='现在是ns浏览器'; var realkey=String.fromCharCode(e.which); } if(ie4){ var iekey=event.keyCode; var nkey='现在是ie浏览器'; var realkey=String.fromCharCode(event.keyCode); if(event.keyCode==32){realkey='/' 空格/''} if(event.keyCode==13){realkey='/' 回车/''} if(event.keyCode==27){realkey='/' Esc/''} if(event.keyCode==16){realkey='/' Shift/''} if(event.keyCode==17){realkey='/' Ctrl/''} if(event.keyCode==18){realkey='/' Alt/''} } alert('ns浏览器中键值:'+nkey+'/n'+'ie浏览器中键值:'+iekey+'/n'+'实际键为'+realkey); } document.onkeydown = keyDown; if(ns4){ document.captureEvents(Event.KEYDOWN);} </script> </head> <body> //javascript Document <hr> <center> <h3>请按任意一个键。。。。</h3> </center> </body> </html>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

得到当前网页名字的两种方法
以下是代码：
<script> var str=location.pathname; a=str.substr(str.lastIndexOf("/")+1) alert(a) a=location.pathname.replace(/(.+)[///]/,"") alert(a) </script>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

图片上传前图片大小及尺寸的判定的简单程序
以下是代码：
<script> var img=null; function s() { if(img)img.removeNode(true); img=document.createElement("img"); img.style.position="absolute"; img.style.visibility="hidden"; img.attachEvent("onreadystatechange",orsc); img.attachEvent("onerror",oe); document.body.insertAdjacentElement("beforeend",img); img.src=inp.value; } function oe() { alert("cant load img"); } function orsc() { if(img.readyState!="complete")return false; alert("图片大小："+img.offsetWidth+"X"+img.offsetHeight); alert("图片尺寸："+img.fileSize); btn.disabled=false; } </script> <input id=inp type="file"> <br> <button onclick="s()">Test</button><button id=btn disabled>UpLoad</button>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

节日倒计时
以下是代码：
<Script Language="javascript"> 　　var timedate= new Date("October 1,2008"); 　　var times="国庆节"; 　　var now = new Date(); 　　var date = timedate.getTime() - now.getTime(); 　　var time = Math.floor(date / (1000 * 60 * 60 * 24)); 　　if (time >= 0) 　　document.write("现在离"+times+"还有: "+time +"天") </Script>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

屏蔽主窗口滚动条

在body标签里加上 style=overflow-y:hidden

屏蔽网站的打印功能

屏蔽F5键

屏蔽浏览器右上角“最小化”“最大化”“关闭”键

使用全屏打开页面

日期选择器
以下是代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<script language=javascript>
var DS_x,DS_y;
function dateSelector()  //构造dateSelector对象，用来实现一个日历形式的日期输入框。
{
var myDate=new Date();
this.year=myDate.getFullYear();  //定义year属性，年份，默认值为当前系统年份。
this.month=myDate.getMonth()+1;  //定义month属性，月份，默认值为当前系统月份。
this.date=myDate.getDate();  //定义date属性，日，默认值为当前系统的日。
this.inputName='';  //定义inputName属性，即输入框的name，默认值为空。注意：在同一页中出现多个日期输入框，不能有重复的name！
this.display=display;  //定义display方法，用来显示日期输入框。
}
function display()  //定义dateSelector的display方法，它将实现一个日历形式的日期选择框。
{
var week=new Array('日','一','二','三','四','五','六');
document.write("<style type=text/css>");
document.write("  .ds_font td,span  { font: normal 12px 宋体; color: #000000; }");
document.write("  .ds_border  { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");
document.write("  .ds_border2  { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");
document.write("</style>");
var M=new String(this.month);
var d=new String(this.date);
if(M.length==1&&d.length==1){
document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-0"+this.month+"-0"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");}
else if(M.length==1&&d.length==2){
document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-0"+this.month+"-"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");}
else if(M.length==2&&d.length==1){
document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-"+this.month+"-0"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");}
else if(M.length==2&&d.length==2){
document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-"+this.month+"-"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");}
document.write("<button style='width:60px;height:18px;font-size:12px;margin:1px;border:1px solid #A4B3C8;background-color:#DFE7EF;' type=button onclick=this.nextSibling.style.display='block' onfocus=this.blur()>选择日期</button>");
document.write("<div style='position:absolute;display:none;text-align:center;width:0px;height:0px;overflow:visible' onselectstart='return false;'>");
document.write("  <div style='position:absolute;left:-60px;top:20px;width:142px;height:165px;background-color:#F6F6F6;border:1px solid #245B7D;' class=ds_font>");
document.write("    <table cellpadding=0 cellspacing=1 width=140 height=20 bgcolor=#CEDAE7 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>");
document.write("      <tr align=center>");
document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subYear(this) title='减小年份'>&lt;&lt;</td>");
document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subMonth(this) title='减小月份'>&lt;</td>");
document.write("        <td width=52%><b>"+this.year+"</b><b>年</b><b>"+this.month+"</b><b>月</b></td>");
document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addMonth(this) title='增加月份'>&gt;</td>");
document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addYear(this) title='增加年份'>&gt;&gt;</td>");
document.write("      </tr>");
document.write("    </table>");
document.write("    <table cellpadding=0 cellspacing=0 width=140 height=20 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>");
document.write("      <tr align=center>");
for(i=0;i<7;i++)
document.write("      <td>"+week[i]+"</td>");
document.write("      </tr>");
document.write("    </table>");
document.write("    <table cellpadding=0 cellspacing=2 width=140 bgcolor=#EEEEEE>");
for(i=0;i<6;i++)
{
document.write("    <tr align=center>");
for(j=0;j<7;j++)
document.write("    <td width=10% height=16 onmouseover=if(this.innerText!=''&&this.className!='ds_border2')this.className='ds_border' onmouseout=if(this.className!='ds_border2')this.className='' onclick=getValue(this,document.all('DS_"+this.inputName+"'))></td>");
document.write("    </tr>");
}
document.write("    </table>");
document.write("    <span style=cursor:hand onclick=this.parentNode.parentNode.style.display='none'>【关闭】</span>");
document.write("  </div>");
document.write("</div>");
dateShow(document.all("DS_"+this.inputName).nextSibling.nextSibling.childNodes[0].childNodes[2],this.year,this.month)
}
function subYear(obj)  //减小年份
{
var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
myObj[0].innerHTML=eval(myObj[0].innerHTML)-1;
dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}
function addYear(obj)  //增加年份
{
var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
myObj[0].innerHTML=eval(myObj[0].innerHTML)+1;
dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}
function subMonth(obj)  //减小月份
{
var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
var month=eval(myObj[2].innerHTML)-1;
if(month==0)
{
month=12;
subYear(obj);
}
myObj[2].innerHTML=month;
dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}
function addMonth(obj)  //增加月份
{
var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
var month=eval(myObj[2].innerHTML)+1;
if(month==13)
{
month=1;
addYear(obj);
}
myObj[2].innerHTML=month;
dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}
function dateShow(obj,year,month)  //显示各月份的日
{
var myDate=new Date(year,month-1,1);
var today=new Date();
var day=myDate.getDay();
var selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-');
var length;
switch(month)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
length=31;
break;
case 4:
case 6:
case 9:
case 11:
length=30;
break;
case 2:
if((year%4==0)&&(year%100!=0)||(year%400==0))
length=29;
else
length=28;
}
for(i=0;i<obj.cells.length;i++)
{
obj.cells[i].innerHTML='';
obj.cells[i].style.color='';
obj.cells[i].className='';
}
for(i=0;i<length;i++)
{
obj.cells[i+day].innerHTML=(i+1);
if(year==today.getFullYear()&&(month-1)==today.getMonth()&&(i+1)==today.getDate())
obj.cells[i+day].style.color='red';
if(year==eval(selectDate[0])&&month==eval(selectDate[1])&&(i+1)==eval(selectDate[2]))
obj.cells[i+day].className='ds_border2';
}
}
function getValue(obj,inputObj)  //把选择的日期传给输入框
{
var myObj=inputObj.nextSibling.nextSibling.childNodes[0].childNodes[0].cells[2].childNodes;
if(obj.innerHTML)
if(obj.innerHTML.length==1&&myObj[2].innerHTML.length==1)
inputObj.value=myObj[0].innerHTML+"-0"+myObj[2].innerHTML+"-0"+obj.innerHTML;
else  if(obj.innerHTML.length==1&&myObj[2].innerHTML.length==2)
inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-0"+obj.innerHTML;
else  if(obj.innerHTML.length==2&&myObj[2].innerHTML.length==1)
inputObj.value=myObj[0].innerHTML+"-0"+myObj[2].innerHTML+"-"+obj.innerHTML;
else  if(obj.innerHTML.length==2&&myObj[2].innerHTML.length==2)
inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj.innerHTML;
inputObj.nextSibling.nextSibling.style.display='none';
for(i=0;i<obj.parentNode.parentNode.parentNode.cells.length;i++)
obj.parentNode.parentNode.parentNode.cells[i].className='';
obj.className='ds_border2'
}
function dsMove(obj)  //实现层的拖移
{
if(event.button==1)
{
var X=obj.clientLeft;
var Y=obj.clientTop;
obj.style.pixelLeft=X+(event.x-DS_x);
obj.style.pixelTop=Y+(event.y-DS_y);
}
}
</script>
</head>
<body>
从
<script language=javascript>
var myDate=new dateSelector();
myDate.year--;
myDate.inputName='start_date';  //注意这里设置输入框的name，同一页中日期输入框，不能出现重复的name。
myDate.display();
</script>
到
<script language=javascript>
myDate.year++;
myDate.inputName='end_date';  //注意这里设置输入框的name，同一页中的日期输入框，不能出现重复的name。
myDate.display();
</script>
</body>
</html>

[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

位于页面两侧的广告[新浪网的那种]
以下是代码：
<Script language="javascript"> var rightbar; var coupletcode; rightbar = window.screen.width-140; coupletcode = "<DIV id=sidebar style='LEFT: 0px; POSITION: absolute; TOP: 100px; VISIBILITY: hidden;' width=117>32</div><DIV id=sidebar2 style='LEFT: " + rightbar + "px; POSITION: absolute; TOP: 100px; VISIBILITY: hidden' width=117>32</div>"; if (window.screen.width>=1024) { document.write(coupletcode); } function InsertCouplet() { if (window.screen.width>=1024){ document.all.sidebar.style.visibility = "visible"; document.all.sidebar2.style.visibility = "visible"; document.all.sidebar.innerHTML = "<OBJECT classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 WIDTH=117 HEIGHT=270 id=leftFF ALIGN=> <PARAM NAME=movie VALUE=http://images.sohu.com/cs/button/youpai/120270812b.swf?clickthru=http://goto.sohu.com/goto.php3?code=youpai-sh47-frduilian> <PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE=transparent> <EMBED id=leftFFG src=http://images.sohu.com/cs/button/youpai/120270812b.swf?clickthru=http://goto.sohu.com/goto.php3?code=youpai-sh47-frduilian quality=high wmode=transparent WIDTH=117 HEIGHT=270 NAME=you ALIGN= TYPE=application/x-shockwave-flash PLUGINSPAGE=http://www.macromedia.com/go/getflashplayer></EMBED></OBJECT>"; document.all.sidebar2.innerHTML = "<OBJECT classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 WIDTH=117 HEIGHT=270 id=youFF ALIGN=> <PARAM NAME=movie VALUE=http://images.sohu.com/cs/button/youpai/120270812b.swf?clickthru=http://goto.sohu.com/goto.php3?code=youpai-sh47-frduilian> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=transparent><EMBED id=youFFG src=http://images.sohu.com/cs/button/youpai/120270812b.swf?clickthru=http://goto.sohu.com/goto.php3?code=youpai-sh47-frduilian quality=high wmode=transparent WIDTH=117 HEIGHT=270 NAME=you ALIGN= TYPE=application/x-shockwave-flash PLUGINSPAGE=http://www.macromedia.com/go/getflashplayer></EMBED></OBJECT>"; } } InsertCouplet(); function leftFFG_DoFSCommand(command,args){ if ((command == "SohuCLFS")&&(args =="hidecouplet")){ document.all.sidebar.style.visibility = "hidden"; document.all.sidebar2.style.visibility = "hidden"; } } function youFFG_DoFSCommand(command,args){ leftFFG_DoFSCommand(command,args); }  </script>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

网页屏保效果
以下是代码：
<script language="javascript"> function screensave(){ test.value++; if(test.value==5){ test.style.display='none'; document.all[4].bgColor='black'; } } function screenopen(){ test.value=0; test.style.display=''; document.all[4].bgColor=''; } </script> <body onkeydown="screenopen()" onmousemove="screenopen()" onload="setInterval('screensave()',1000)">如不能正常显示请刷新一下<br> 5 秒屏保<input id="test">
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

表格复选、复选变色、以及行的间隔行
以下是代码：
<style type="text/css">  </style> <script language="javascript" type="text/javascript"> //复选 function selectAll(chk) { var chk = document.form1.chkAll.checked; for (i=0;i<document.all.length;i++) { if (document.all[i].name=="id[]") { document.all[i].checked=chk; chkRow(document.all[i]); }}} //复选后单元格变色 function chkRow(obj){ var r = obj.parentElement.parentElement; if(obj.checked){ r.style.backgroundColor="#E6E9F2";} else {if(r.rowIndex%2==1)r.style.backgroundColor="";else r.style.backgroundColor="#F5F5F5";} } </script> <table width="50%" border="1" cellpadding="3" cellspacing="0" bordercolor="#333333" class="tb"> <form name="form1" method="post" action=""> <tr class="row"> <td width="5%"> </td> <td width="33%" align="center"><strong>论坛名称</strong></td> <td width="62%" align="center"><strong>网址</strong></td> </tr> <tr class="row"> <td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td> <td align="center">织梦乱弹</td> <td align="center"><a href="http://www.it365cn.com/bbs" target="_blank"><img align=absmiddle src=/pic/url.gif border=0><a target=_blank href=http://www.it365cn.com/bbs<>http://www.it365cn.com/bbs<</a><a href=http://www.mmkey.com><font color=#ffffff>mmkey.com</font></a>;/a></td> </tr> <tr class="row"> <td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td> <td align="center">经典论坛</td> <td align="center"><a href="http://www.blueidea.com/bbs" target="_blank"><img align=absmiddle src=/pic/url.gif border=0><a target=_blank href=http://www.blueidea.com/bbs<>http://www.blueidea.com/bbs<</a><a href=http://www.mmkey.com><font color=#ffffff>mmkey.com</font></a>;/a></td> </tr> <tr class="row"> <td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td> <td align="center">点燃灵感</td> <td align="center"><a href="http://www.fwcn.com/bbs" target="_blank"><img align=absmiddle src=/pic/url.gif border=0><a target=_blank href=http://www.fwcn.com/bbs<>http://www.fwcn.com/bbs<</a><a href=http://www.mmkey.com><font color=#ffffff>mmkey.com</font></a>;/a></td> </tr> <tr class="row"> <td colspan="3"><input type="checkbox" name="chkAll" title="全选/取消" onclick="selectAll()"> <strong>全选/取消</strong></td> </tr> </form> </table>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

以下是代码：
<style type="text/css">  </style> <script> function bgChange(obj){ obj.bgColor=obj.bgColor==""?"#ffcc00":""; } </script> <table width="100%" border="0" cellspacing="1" bgcolor=#66ccee> <tr onclick="bgChange(this)" bgcolor=#ffffff> <td><img align=absmiddle src=/pic/url.gif border=0><a target=_blank href=http://www.goaler.com<>http://www.goaler.com<</a><a href=http://www.mmkey.com><font color=#ffffff>mmkey.com</font></a>;/td> </tr> <tr onclick="bgChange(this)" bgcolor=#ffffff> <td><img align=absmiddle src=/pic/url.gif border=0><a target=_blank href=http://www.goaler.com<>http://www.goaler.com<</a><a href=http://www.mmkey.com><font color=#ffffff>mmkey.com</font></a>;/td> </tr> <tr onclick="bgChange(this)" bgcolor=#ffffff> <td><img align=absmiddle src=/pic/url.gif border=0><a target=_blank href=http://www.goaler.com<>http://www.goaler.com<</a><a href=http://www.mmkey.com><font color=#ffffff>mmkey.com</font></a>;/td> </tr> </table>
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

只能输入汉字
以下是代码：
<input onkeyup="value=value.replace(/[^/u4E00-/u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/u4E00-/u9FA5]/g,''))">
[Ctrl+A 全选 Ctrl+C 复制，如不能正常显示请刷新一下]

一些常用的JS代码