JAVASCRIPT的常用技术

JAVASCRIPT的常用技术(一)

function setCookie(name,value)
{
  var Days = 30; //此 cookie 将被保存 30 天
  var exp  = new Date();    //new Date("December 31, 9998");
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  document.cookie = name + "="+ escape(value) +";expires="+ exp.toGMTString();
}
function getCookie(name)
{
  var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
  if(arr != null) return unescape(arr[2]); return null;
}
function delCookie(name)
{
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval=getCookie(name);
  if(cval!=null) document.cookie=name +"="+cval+";expires="+exp.toGMTString();
}

<script type="text/javascript">
var _st = window.setTimeout;

/*重载window.setTimeout函数,引用的函数可以带参数*/
window.setTimeout = function(fRef, mDelay) {
if(typeof fRef == 'function'){
  var argu = Array.prototype.slice.call(arguments,2);
alert(typeof(argu));
  var f = (function(){ fRef.apply(null, argu); });
  return _st(f, mDelay);
}
return _st(fRef,mDelay);
}

function test(x){
alert(x);
}
window.setTimeout(test,3000,'fason');
</script>

<script language=javascript>

</script>

//两端去空格函数
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g,"");
}

<script>
//为Number增加length方法
Number.prototype.length = function()
{
return String(this).length;
}

alert((11).length())
</script>

Ms XmlDom 异步装载Xml文件
放在这里，算作是资源备份吧。

<script>
var xmldoc;
function Load(){
  xmldoc = new ActiveXObject("Msxml2.DOMDocument");
  xmldoc.onreadystatechange = CheckState;
  xmldoc.resolveExternals = false;
  xmldoc.load(URL.value);
}
function CheckState(){
  var state = xmldoc.readyState;
  RESULTS.innerHTML += "加载状态 = " + state + "<BR>"
  if (state == 4){
    var err = xmldoc.parseError;
    if (err.errorCode != 0)
      RESULTS.innerHTML += err.reason +  "<BR>"
    else
    {
     RESULTS.innerHTML += "加载成功。" +  "<BR>"
     alert(xmldoc.xml)
     }
  }
}
</script>
URL: <input type=text size=60 id=URL value="http://dotnet.aspx.cc/Rss.aspx">
<input type=button value="正在XML" onclick="Load()">
<div id=RESULTS style="color:red; font-weight:bold;"></div></script>

//带中文字符串长度,一个中文字长度为2
String.prototype.lenB = function(){return this.replace(/[^\x00-\xff]/g,"**").length;}
document.all.tes1.value.lenB();

预判断一下链接URL是否可用

<script language="javascript">
function getURL(url)
{
    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.open("GET",url,false);
    xmlhttp.send();
    if (xmlhttp.readyState==4)
      alert((xmlhttp.Status==200)?"存在":"不存在");
}
//user like this:
getURL("http://localhost/1.asp")
</script>

//将数字转换成三位逗号分隔的样式
function formatNum(s)
{
  if(!/^(\+|-)?\d+(\.\d+)?$/.test(num)){alert("wrong!"); return num;}
  var re = new RegExp().compile("(\\d)(\\d{3})(,|\\.|$)");
  num += ""; while(re.test(num))
    num = num.replace(re, "$1,$2$3")
  return num;
}
alert(formatNum(-12345678.123));
alert(formatNum("12345678.123"));
alert(formatNum("10000000000000000000000000000000000000000"));

格式化日期:yyyy-m-d to yyyy-mm-dd

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

表格中的行删除功能,用checkbox选择的
<script language="JavaScript">

</script>
<div align="center" style="overflow:auto; width:400; height:300px " id="divVector">
<table id="tbContent" border=1 width="300">
<script language="JavaScript">

</script>
</table>
</div>
<input type="button" value=" 删除选中的行 " onclick="delTr()">

yyyy-mm-dd格式日期完整校验加提示
<script language="JavaScript">

</script>

<script language="JavaScript">

</script>

类似CSDN感兴趣社区配置页面中的checkbox选择的功能
<script language="JavaScript">

</script>

<input type="checkbox" onclick="chkClk(this)" name="type1" flag="main">typetext
<li><input type="checkbox" onclick="chkClk(this)" name="type1">typetext</li>
<li><input type="checkbox" onclick="chkClk(this)" name="type1">typetext</li>
<br/><br/>
<input type="checkbox" onclick="chkClk(this)" name="type2" flag="main">typetext
<li><input type="checkbox" onclick="chkClk(this)" name="type2">typetext</li>
<li><input type="checkbox" onclick="chkClk(this)" name="type2">typetext</li>

==========================================================
JAVASCRIPT的常用技术(二)

1、事件类
1.1 屏蔽右键
在body标签里加上oncontextmenu=self.event.returnValue=false
1.2 屏蔽所有功能键

1.3 --> 和<-- F5 F11,F9,F1

1.4 屏蔽组合键ctrl+N

一、验证类
1、数字验证内
1.1 整数
      /^(-|\+)?\d+$/.test(str)
1.2 大于0的整数（用于传来的ID的验证)
      /^\d+$/.test(str)
1.3 负整数的验证
      /^-\d+$/.test(str)
2、时间类
2.1 短时间，形如 (13:04:06)
      function isTime(str)
      {
        var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
        if (a == null) {alert('输入的参数不是时间格式'); return false;}
        if (a[1]>24 || a[3]>60 || a[4]>60)
        {
          alert("时间格式不对");
          return false
        }
        return true;
      }
2.2 短日期，形如 (2003-12-05)
      function strDateTime(str)
      {
         var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
         if(r==null)return false;
         var d= new Date(r[1], r[3]-1, r[4]);
         return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
      }
2.3 长时间，形如 (2003-12-05 13:04:06)
      function strDateTime(str)
      {
        var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
        var r = str.match(reg);
        if(r==null)return false;
        var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
        return

(d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&
d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==

r[7]);
      }
2.4 只有年和月。形如(2003-05,或者2003-5)
2.5 只有小时和分钟,形如(12:03)
3、表单类
3.1 所有的表单的值都不能为空
      <input onblur="if(this.value.replace(/^\s+|\s+$/g,'')=='')alert('不能为空!')">
3.2 多行文本框的值不能为空。
3.3 多行文本框的值不能超过sMaxStrleng
3.4 多行文本框的值不能少于sMixStrleng
3.5 判断单选框是否选择。
3.6 判断复选框是否选择.
3.7 复选框的全选，多选，全不选，反选
3.8 文件上传过程中判断文件类型
4、字符类
4.1 判断字符全部由a-Z或者是A-Z的字字母组成
      <input onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">
4.2 判断字符由字母和数字组成。
      <input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有错')">
4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母
      /^([a-zA-z_]{1})([\w]*)$/g.test(str)
4.4 字符串替换函数.Replace();
5、浏览器类
5.1 判断浏览器的类型
      window.navigator.appName
5.2 判断ie的版本
      window.navigator.appVersion
5.3 判断客户端的分辨率
      window.screen.height; window.screen.width;

6、结合类
6.1 email的判断。
      function ismail(mail)
      {
        return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)
[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(mail));
      }
6.2 手机号码的验证
6.3 身份证的验证
      function isIdCardNo(num)
      {
        if (isNaN(num)) {alert("输入的不是数字！"); return false;}
        var len = num.length, re;
        if (len == 15)
          re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
        else if (len == 18)
          re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);
        else {alert("输入的数字位数不对！"); return false;}
        var a = num.match(re);
        if (a != null)
        {
          if (len==15)
          {
            var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
            var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&
D.getDate()==a[5];
          }
          else
          {
            var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
            var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&
D.getDate()==a[5];
          }
          if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;}
        }
        return true;
      }

3.7 复选框的全选，多选，全不选，反选
<form name=hrong>
<input type=checkbox name=All onclick="checkAll('mm')">全选<br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/><br/>

</form>

<SCRIPT LANGUAGE="javascript">
function checkAll(str)
{
var a = document.getElementsByName(str);
var n = a.length;
for (var i=0; i<n; i++)
a[i].checked = window.event.srcElement.checked;
}
function checkItem(str)
{
var e = window.event.srcElement;
var all = eval("document.hrong."+ str);
if (e.checked)
{
    var a = document.getElementsByName(e.name);
    all.checked = true;
    for (var i=0; i<a.length; i++)
    {
      if (!a[i].checked){ all.checked = false; break;}
    }
}
else all.checked = false;
}
</SCRIPT>

3.8 文件上传过程中判断文件类型
<input type=file onchange="alert(this.value.match(/^(.*)(\.)(.{1,8})$/)[3])">

不断地清空剪贴板:
<body onload="setInterval('clipboardData.setData(\'Text\',\'\')',100)">

真正的全屏页面解决之道！（全代码）
真正全屏解决之道：
1.htm
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body onload="window.open('fullscreen.htm','','fullscreen=1,scroll=no');">
</body>
</html>

fullscreen.htm
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript1.2">


</script>
</head>
<body scroll="no">
<div align="right"><a href="javascript:" onclick="window.close()">关闭
</a> </div>
<p></P>
<div align="right"><a href="javascript:" onclick="opensmallwin('login.htm')">登录
</a> </div>
<p></P>
<div align="center"><a href="javascript:"
onclick="modelesswin('login.htm',300,160)">用模态登录窗口</a> </div>
</body>
</html>

login.htm
<html>
<head>
<title>用户登录</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0"
cellspacing="14" bgcolor="#CCCCCC">
<tr valign="top">
    <td width="10%" nowrap align="right"><b>用户名：</b></td>
    <td width="90%"><input name="textfield1" type="text" size="25"
class="whiteline"></td>
</tr>
<tr valign="top">
    <td nowrap align="right"><b>密　码：</b></td>
    <td><input name="textfield12" type="password" size="25"
class="whiteline"></td>
</tr>
<tr valign="top">
    <td> </td>
    <td><input type="submit" name="Submit" value="登　　录"
class="boxline"></td>
</tr>
</table>
</body>
</html>

自动关掉原窗口：

<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
</head>
<body onload="window.open('fullscreen.htm','','fullscreen=1,scroll=no');
window.opener=null;window.close()">
<input type=button value=关闭 onclick="window.opener=null;window.close()">

<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2
height=0 width=0></OBJECT>
<input type=button value=关闭窗口 onclick=document.all.WebBrowser.ExecWB(45,1)>
</body>
</html>
关键是在onload事件中加入：
window.opener=null;window.close()

预读图片：
<SCRIPT LANGUAGE="javascript">



</script>

关于两个网页刷新交互的问题
JS处理方法：
a.htm
<a href="b.htm" target=blank>发表留言</a>
<script>
alert("wwwwwwwwwwwwwwwwwwwwwwwwww");
</script>
b.htm
<script language="javascript">
file://window.opener.location.reload();刷新父窗口
file://window.opener.location="2.htm"//重定向父窗口到2.htm页
function closewindow()
{
window.opener.location.reload();
self.close();
window.opener.document.write("sssssssssssssssssss");
}
</script>
<a href="b.htm" target=blank onclick="closewindow();">关闭</a>

后台处理方法：
private btnForSubmit(Object sender,EventArgs e)
{
.............
Response.Write("<script>window.opener.document.execCommand('refresh');
window.opener='';window.close();</script>");
file://string str="<script>window.opener.document.execCommand('refresh');
window.opener='';window.close();</script>";
file://this.RegisterStartupScript("mycode",str);
------------
以上转自梅花雪兄在CSDN贴的代码

posted on 2007-12-17 15:46 lk 阅读(601) 评论(0) 编辑收藏所属分类: ajax&js

常用链接

留言簿(3)

随笔分类(148)

随笔档案(143)

收藏夹(2)

其他

学习（技术）

观察思考（非技术）

搜索

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: [JS]Cookie精通之路 [转]40种网页常用小技巧----Ajax中国如何使用Javascript格式化数字显示 javascript函数（格式化数字，日期比较，光标处插入或修改文字，JS图片动画效果）让你的网页更精彩 - Javascript 调用MSAgent zoom.js 使用事例 [转]js日期时间函数(经典＋完善＋实用) js获取日期星期时间 JAVASCRIPT的常用技术 close window