JavaScript常用技巧

    技术2022-05-11  14

    1.文本框只能输入数字

    <input name="test" value="" onKeypress="CheckInt()" style="ime-mode:disabled" οnpaste="return false;"><script language="JavaScript">  function CheckInt(){    if (!(((event.keyCode >= 48) && (event.keyCode <= 57)) || (event.keyCode == 45))){      event.keyCode = 0 ;    }  }</script>

    2.光标总停留在文本框的末尾

    <input type='text' name='text1' value='这里是' οnfοcus='fcs()'><script language="javascript">  function fcs(){    obj = event.srcElement;    Rng = obj.createTextRange();    Rng.moveStart("character",obj.value.length);     Rng.collapse(true);    Rng.select();  }</script>

    3.取自定义标签内的文本

    <?xml version="1.0" encoding="gb2312" standalone="yes"?><html xmlns:my="html"><head><script>function getElement(){   obj = document.getElementById('tag');   alert(obj.childNodes[0].nodeValue);}</script></head><body><my:tag id='tag'>Hello JavaScript</my:tag><br/><button οnclick='getElement()'>test</button></body></html>

    4.一个右键菜单控件

    <OBJECT id=menu type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> <PARAM name="Command" value="Related Topics,menu"> <PARAM name="Item1" value=";http://www.csdn.net"><PARAM name="Item2" value="搜狐;http://www.sohu.com"> <PARAM name="Item3" value="新浪;http://www.sina.com"> <PARAM name="Item4" value="网易;http://www.163.com"></OBJECT> <script>  if (document.all) document.body.οnmοusedοwn=new Function("if (event.button==2) menu.Click();") </script>

    5.用层模拟select边框

    <span style="border:1px solid #7FFF00; position:absolute; overflow:hidden">  <select style="margin:-1px">    <option>aaa</option>    <option>bbb</option>    <option>ccc</option>  </select></span>

    6.常用正则:

    reg = /^(/w)*$/g; //只可输入半角字符(字母,数字)

    reg = /^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$/   //Email验证

    reg = /^13+[0-9]{9}$/;   //手机号码验证

    reg = /[/u4E00-/u9FA5]/gi; //判断字符串是否包含中文

    reg = /(^/s*)|(/s*$)/g;         //字符串两端去空格

    7.判断iframe是否已完全下载:

    <iframe id="theframe" src="http://www.baidu.com" onreadystatechange="test_load()" width="100%" height="100%"></iframe><script>function test_load(){  if (document.all.theframe.readyState=="complete")  alert("iframe已经下载完毕...");}</script>

    8. 返回本地时间,精确到毫秒function GetTime(){   var n, now_time='';   n = new Date();   now_time += n.getYear();   now_time += '年'+(n.getMonth()+1);   now_time += '月'+n.getDate();   now_time += '日'+n.getHours();   now_time += '时'+n.getMinutes();   now_time += '分'+n.getSeconds();   now_time += '秒'+n.getMilliseconds();   now_time += '微秒';   return( now_time );}

    9.格式化日期(转)

    Date.prototype.Format = function(format){  var o = {    "M+" : this.getMonth()+1, //month    "d+" : this.getDate(),    //day    "h+" : this.getHours(),   //hour    "m+" : this.getMinutes(), //minute    "s+" : this.getSeconds(), //second    "q+" : Math.floor((this.getMonth()+3)/3),  //quarter    "S" : this.getMilliseconds() //millisecond  }  if(/(y+)/.test(format))      format = format.replace(RegExp.$1,       (this.getFullYear()+"").substr(4 - RegExp.$1.length));     for(var k in o)      if(new RegExp("("+ k +")").test(format))        format = format.replace(RegExp.$1,          RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));     return format;};

    10. $函数 function $() {   var elements = new Array();

      for (var i = 0; i < arguments.length; i++) {     var element = arguments[i];     if (typeof element == 'string')       element = document.getElementById(element);

        if (arguments.length == 1)       return element;

        elements.push(element);   }

      return elements; }  

     

    11. 当鼠标在热字上时就显示层 当鼠标移开时就隐藏 <Script   language="javascript">             function   showdiv(divname,divstatus)                   {                                             if   (divstatus   ==1)                               {                                   divname.style.display   =   "block";                                                                 }                       else                               {                                   divname.style.display   =   "none";                               }                   }     </Script>             <body>     <a   href="#"   onMouseOver   =   "javascript:showdiv(stefli_1,1);"   onMouseOut   =  

    "javascript:showdiv(stefli_1,0);">       鼠标移动到上面就显示,离开就隐藏   </a>       <div   id="stefli_1"   style="display:none;">   鼠标移动到上面就显示,离开就隐藏</div>     <br>     <br>     <br>     <a   href="#"   onclick   =   "javascript:showdiv(stefli_2,1);">       鼠标单击就显示,离开不隐藏   </a>       <div   id="stefli_2"   style="display:none;">鼠标单击就显示,离开不隐藏</div>         </body> 

    12.单击显示/再单击隐藏层

    <div id="mylayer" 

    style="position:absolute;visibility:hidden;width:100px;height:100px;top:100px;left:100px;bor

    der:1px #000000 solid">这是个层</div><script type="text/javascript">function showlayer() { if (mylayer.style.visibility=="hidden") mylayer.style.visibility="visible"; else mylayer.style.visibility="hidden";}</script><a href="javascript:showlayer()">显示或关闭层</a>

     

    13.<script>

    var formFlag = 1;function changeTab1(){tab1.style.display="block";tab2.style.display="none";formFlag = 1;}function changeTab2(){tab2.style.display="";tab1.style.display="none";formFlag = 2;}</script>


    最新回复(0)