`
liss
  • 浏览: 823812 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

收集项目中常用的js函数和封装代码

阅读更多

/*
此项目由cssrain发起,群里的朋友完善。
收集了项目中常用的js函数和封装代码。
为项目提供方便。希望能在项目中发挥作用。
v1.0 2008.06.03
v1.1 2008.06.04
v1.2 2008.06.05
v1.3 2008.06.05
v1.4 2008.06.06
v1.5 2008.06.08
v1.6 2008.06.15
v1.7 2008.06.16
v1.8 2008.06.17
v1.9 2008.06.18
v2.0 2008.06.19
如果你也有好的函数和封装代码,可以给我联系.
email : cssrain@gmail.com
一起完善这个js。
*/


/**************
简化document.getElementById
用法:
$id("d").innerHTML;
(HTMLcode:<div id="d">cssrain</div>)
**************/
function $id(id) {
return document.getElementById(id);
}


/**************
函数:getElementsByClassName
使用方法:
获取document内的超链接class是“info-links”的。
getElementsByClassName(document, "a", "info-links");
获取container内的div的class是col的.
getElementsByClassName(document.getElementById("container"), "div", "col");
获取document内的所有class是“click-me”的。
getElementsByClassName(document, "*", "click-me");
例子:
HTML code:
<a class="a">ccc</a>
<a class="info-links">aaa</a>
<a class="info-links">bbb</a>
<br/><br/>
<div class="co">dddd</div>
<div class="col">dddd</div>
<div id="container">
<div class="co">dddd</div>
<div class="col">dddd</div>
<div class="co">dddd</div>
<div class="col">dddd</div>
<a class="a">ccc</a>
</div>

JS code:
test 1 :
var a = getElementsByClassName(document,"a","info-links");
alert(a[0].innerHTML +"   "+a[1].innerHTML);
for(var i=0;i<a.length;i++){
a[i].style.color="red";
}
//test 2 :
var b = getElementsByClassName(document.getElementById("container"), "div", "col");
for(var m=0;m<b.length;m++){
b[m].style.color="red";
}
**************/
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}

 


/**************
replaceAll:
替换字符串中的字符。
用法:
yourstring.replaceAll("要替换的字符", "替换成什么");
例子:
"cssrain".replaceAll("s", "a");
"   cs   sr   ai   n".replaceAll(" ", "");
**************/
String.prototype.replaceAll = function (AFindText,ARepText){
                raRegExp = new RegExp(AFindText,"g");
                return this.replace(raRegExp,ARepText);
}


/**************
* 字符串前后空格处理。
* 如果想替换中间的空格,请用replaceAll方法。
* 用法:
* " cssrain   ".trim();
**************/
String.prototype.trim=function()
{
          return this.replace(/(^\s*)|(\s*$)/g,"");//将字符串前后空格,用空字符串替代。
}


/**************
* 计算字符串的真正长度
//String有个属性length,但是它不能区分英文字符,
//计算中文字符和全角字符。但是在数据存储的时候中文和全角都是用两个字节来存储的,
//所有需要额外处理一下。自己写了个函数,返回String正真的长度.
用法:
<input type="text" name="rain" id="rain" />
<input type="button" id="test" value="test" onclick="alert( document.getElementById('rain').value.codeLength() )"/>
**************/
String.prototype.codeLength=function(){
var len=0;
if(this==null||this.length==0)
   return 0;
var str=this.replace(/(^\s*)|(\s*$)/g,"");//去掉空格
for(i=0;i<str.length;i++)
   if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128)
    len++;
   else
    len+=2;
return len;
}


//JS获取字符串的实际长度,用来代替 String的length属性
String.prototype.length = function(){
        return this.replace.(/[\u4e00-\u9fa5]+/g,"**").length;
}

 

/**************
//编码HTML 和 解码Html。
//在评论的时候为了防止用户提交带有恶意的脚本,可以先过滤HTML标签,过滤掉双引号,单引号,符号&,符号<,符号
用法:
<input type="text" name="rain" id="rain" />
<input type="button" value="test" onclick=" document.getElementById('rain2').value= document.getElementById('rain').value.htmlEncode() "/>
<input type="text" name="rain2" id="rain2" />
<input type="button" value="test" onclick=" document.getElementById('rain').value= document.getElementById('rain2').value.htmlDecode() "/>
**************/

String.prototype.htmlEncode=function(){
    return this.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&#34;").replace(/\'/g,"&#39;");
}
String.prototype.htmlDecode=function(){
    return this.replace(/\&amp\;/g, '\&').replace(/\&gt\;/g, '\>').replace(/\&lt\;/g, '\<').replace(/\&quot\;/g, '\'').replace(/\&\#39\;/g, '\'');
}


/**************
用来window.load 多个函数。
window.onload是不能同时加载多个函数的;
比如:
function t(){
alert("t")
}
function b(){
alert("b")
}
window.onload =t ;
window.onload =b ;
这样做 ,只会输出 b ;

addLoadEvent()这个函数 就是解决这个问题的。
用法:
addLoadEvent(t);
addLoadEvent(b);
**************/

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
    window.onload = func;
} else {
    window.onload = function() {
      oldonload();
      func();
    }
}
}


//DOM没有提供insertAfter(),只提供了一个insertBefore()方法。
//在这里,我们自己编写一个 insertAfter().
/**************
用法:
//插入到 div   b 的后面
window.onload=function(){
   var a =document.createElement("span");
   var b =document.createTextNode("cssrain");
   a.appendChild(b);
  
   var mubiao = document.getElementById("b");
   insertAfter(a,mubiao);
}

<div id="b">bbbbbbbbb</div>
<div>dddddd</div>
**************/
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {// 如果最后的节点是目标元素,则直接添加。因为默认是最后
    parent.appendChild(newElement);
} else {
    parent.insertBefore(newElement,targetElement.nextSibling);//如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
}
}


/**************
解决 style 外嵌样式 用js 获取不到 的问题。
用法:
window.onload = function(){
var e1 = document.getElementById("exep1");
alert(getStyle(e1,"fontSize"));
alert(getStyle(e1,"backgroundColor"));
}

<!--
currentStyle 对象返回了元素上的样式表,但是 style 对象只返回通过 STYLE 标签属性应用到元素的内嵌样式。
因此,通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。
例如,如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red ),
而不是内嵌的话,对象.currentStyle.color 将返回正确的颜色,
而对象 style.color 不能返回值。
但是,如果用户指定了 <P STYLE="color:'red'">,currentStyle 和 STYLE 对象都将返回值 red。
-->
</head>

<body>
<div id="exep1">c</div>
</body>
**************/
function getStyle(elem, name){
if(elem.style[name])
   return elem.style[name];
else if(elem.currentStyle)//ie
   return elem.currentStyle[name];
else if(document.defaultView && document.defaultView.getComputedStyle){//w3c
   name = name.replace(/([A-Z])/g,"-$1");
   name = name.toLowerCase();
  
   var s = document.defaultView.getComputedStyle(elem,"");
   return s && s.getPropertyValue(name);
} else
   return null
}

/**************
//获取当前元素的 元素节点
如果想获取当前元素的下一个节点。
那么可以扩展下:
比如:
var elem = getNextElement( node.nextSibling );
用法;
var elem = getNextElement( node );
**************/
function getNextElement(node) {//获取当前元素的元素节点
if(node.nodeType == 1) {
return node;
}
if (node.nextSibling) {
    return getNextElement(node.nextSibling);//如果不是,继续查询下一个,直到 if(node.nodeType == 1) .
}
return null;
}


/**************
默认的 element.className = "" ;是 替换样式。
如果我们是想追加样式, 那么使用下面的方法
用法;
addClass(element,"classname");
用了这个函数后:
那么将追加成 :
<p class=”b classname”>aaaaaaaaaaaaaaaaaaa</p>
**************/
function addClass(element,value) { //追加样式,而不是替换样式
if (!element.className) {
    element.className = value;
} else {
    element.className+= " ";
    element.className+= value;
}
}


/**************
表格隔行变色。
注意:引入 我们自己写的 addClass()函数。
**************/
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
    var odd = false;
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j<rows.length; j++) {
      if (odd == true) {
        addClass(rows[j],"odd");//odd为样式名
        odd = false;
      } else {
        odd = true;
      }
    }
}
}

/**************
表格滑过变色.
注意:引入 我们自己写的 addClass()函数。
**************/
function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
    rows[i].oldClassName = rows[i].className
    rows[i].onmouseover = function() {
      addClass(this,"highlight");//highlight为样式名
    }
    rows[i].onmouseout = function() {
      this.className = this.oldClassName
    }
}
}

 

/********************
隔行变色 + 滑过变色
参数设置:
id 为表格的id
class1为奇数行的颜色
class2为偶数行的颜色
class3为鼠标滑过颜色
用法:
sti_table("cssrain" , "c" , "a" ,"d" );
<style>
.a{
background-color : #eee;
}

.c{
background-color : #96dd33;
}

.d{
background-color : #456577;
}
</style>
<TABLE id="cssrain" >
<TR>
<TD>1</TD>
</TR>
</table>
*********************/
function sti_table( id , class1 , class2 , class3 ){
var para = document.getElementById(id);
var tr = para.getElementsByTagName("tr");
var odd = false;
for(var i=0 ; i < tr.length ; i++ ){
        if(odd==true){
         tr[i].className = class1;     
   odd=false;

   tr[i].onmouseover =function(){
      this.className = class3;
   }
    tr[i].onmouseout =function(){
      this.className = class1;
   }
   }
   else{
   tr[i].className = class2;  
         odd=true;

    tr[i].onmouseover =function(){
      this.className = class3;
   }
    tr[i].onmouseout =function(){
      this.className = class2;
   }
   }
}

}

//除法函数,用来得到精确的除法结果
//说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
//调用:accDiv(arg1,arg2)
//返回值:arg1除以arg2的精确结果
function accDiv(arg1,arg2){
var t1=0,t2=0,r1,r2;
try{t1=arg1.toString().split(".")[1].length}catch(e){}
try{t2=arg2.toString().split(".")[1].length}catch(e){}
with(Math){
r1=Number(arg1.toString().replace(".",""))
r2=Number(arg2.toString().replace(".",""))
return (r1/r2)*pow(10,t2-t1);
}
}
//给Number类型增加一个div方法
//用法: (37).div(3);
Number.prototype.div = function (arg){
return accDiv(this, arg);
}

//乘法函数,用来得到精确的乘法结果
//说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
//调用:accMul(arg1,arg2)
//返回值:arg1乘以arg2的精确结果
function accMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
//给Number类型增加一个mul方法
//用法: (37).mul(3);
Number.prototype.mul = function (arg){
return accMul(arg, this);
}

//加法函数,用来得到精确的加法结果
//说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
//调用:accAdd(arg1,arg2)
//返回值:arg1加上arg2的精确结果
function accAdd(arg1,arg2){
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}
//给Number类型增加一个add方法
//用法: (37).add(3);
Number.prototype.add = function (arg){
return accAdd(arg,this);
}

//减法函数,用来得到精确的减法结果
function Subtr(arg1,arg2){
     var r1,r2,m,n;
     try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
     try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
     m=Math.pow(10,Math.max(r1,r2));
     //last modify by deeka
     //动态控制精度长度
     n=(r1>=r2)?r1:r2;
     return ((arg1*m-arg2*m)/m).toFixed(n);
}
//给Number类型增加一个add方法
//用法: (5.5).sub(37.5)
Number.prototype.sub = function (arg){
return Subtr(arg,this);
}


//格式化字符串
/*
用法:
var cls="redclass";
var text="My name is ";
var str='<div class="{0}">{1} {2}</div>'.diy_format(cls, text,"cssrain");
alert(str);
*/
String.prototype.diy_format=function(){
        var args=arguments;
        return this.replace(/\{(\d+)\}/g, function(m, i){
                return args[i];}
     );}


//去掉数组中重复的元素
//用法:
//var arr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
//alert( arr.strip() );
Array.prototype.strip=function(){
if(this.length<2) return [this[0]]||[];
var arr=[];
for(var i=0;i<this.length;i++){
   arr.push(this.splice(i--,1));
   for(var j=0;j<this.length;j++){
    if(this[j]==arr[arr.length-1]){
     this.splice(j--,1);}}}
return arr;
}

 

//得到l-h下标的数组
//用法:
//var arr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
//alert( arr.limit(2,4) ); //输出 abc , 85 ,8
Array.prototype.limit = function(l, h) {
var _a = this; var ret = [];
l = l<0?0:l; h = h>_a.length?_a.length:h;
for (var i=0; i<_a.length; i++) {
if (i>=l && i<=h) ret[ret.length] = _a[i];
if (i>h) break;
}; return ret;
}

 

//获取某月有几天 ,月份是从 0开始
//用法:alert( jscomGetMonthDays(2008 , 4)   )
function jscomGetMonthDays(year,month)
{
if(month<0 || month>11)
{
   return 30;
}
var arrMon = new Array(12);
arrMon[0] = 31;
if(year % 4 == 0)
{
   arrMon[ 1] =29;
}else{
   arrMon[ 1] =28;
}
arrMon[ 2] = 31; arrMon[ 3] = 30;
arrMon[ 4] = 31; arrMon[ 5] = 30;
arrMon[ 6] = 31; arrMon[ 7] = 31;
arrMon[ 8] = 30; arrMon[ 9] = 31;
arrMon[10] = 30; arrMon[11] = 31;
return arrMon[month];
}

/**
* 以document.write的方式向页面中写入js
* 参数 :
o {
   id : id of the created tag,
   url : String,
   script : String
}
用法: dwScript({id : 'cssrain' , url : 'js/fl.js' });
*/
function dwScript(o){
o.id = o.id || "";
o.charset = o.charset || "utf-8";
if (o.script && o.script != ""){
    document.write("<script id='" + o.id + "'>" + o.script + "<\/script>");
} else if (o.url && o.url != ""){
    document.write("<script id='" + o.id + "' src='" + o.url + "' charset='" + o.charset + "'><\/script>");
} else throw new Error("no script content or url specified");
}


/**
* 以document.write的方式向页面中写入css
* @param o {
*    id : id of the created tag,
*    url : String,
*    styles : styles text
* }
用法:dwCSS({ id : 'cssrain' , url:'css/default.template.css?'});
*/
function dwCSS(o){
o.id = o.id || "";
if (o.url){
    document.write('<link id="' + o.id + '" rel="stylesheet" type="text/css" href="' + o.url + '" />');
} else if (o.styles){
    document.write('<style id="' + o.id + '" >'+o.styles+'<\/style>');
}
}


/**
* 把字符串中 的 半角 转换为全角。
用法:
var a = "d'd'd'd()%[]";
alert(toSafe(a));

当然可以用于表单的值转换。
*/
function toSafe(str)
{
var re;
re = /'/g;
str = str.replace(re,"'");
re =/\)/g;
str = str.replace(re,")");
re = /\(/g;
str = str.replace(re,"(");
re = /%/g;
str = str.replace(re,"%");
re = /\[/;
str = str.replace(re,"[");
re = /\]/;
str = str.replace(re,"]");
return str;
}
function makeToSafe(formName)
{
var i,form;
form = eval(formName);
for(i=0;i<form.elements.length;i++)
{
   if(form.elements[i].type=="text" || form.elements[i].type=="textarea")
   {
    form.elements[i].value = toSafe(form.elements[i].value);
   }
}
}


/*
   小数   四舍五入
//Dight 为要转换的数据
//How 要保留的小数位数
用法:
var k = ForDight( 222.5 , 0 ) ;
*/
function ForDight(Dight,How)
{
   Dight = Math.round (Dight*Math.pow(10,How))/Math.pow(10,How);
   return Dight;
}

/**************
format:
格式化时间。
用法:
yourdate.format("你的日期格式");
例子:
obj0 = new Date("Sun May 04 2008").format("yyyy-MM-dd");
obj1 = new Date().format("yyyy-MM-dd hh:mm:ss");
obj2 = new Date().format("yyyy-MM-dd");
obj3 = new Date().format("yyyy/MM/dd");
obj4 = new Date().format("MM/dd/yyyy");
**************/
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;  
}

/**************
日期减去天数 得到 第二个日期 。
例子:
data_sub_day("12/23/2002",30)
**************/
function data_sub_day(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}


/**************
format:
格式化数字.
例子:
var n = format_number( 123456.45656 , 2 ); // .toFixed(2)也可以实现,不过不兼容FF.
alert(n);
**************/
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);
}

 

/**************
* 得到单选框选中的值。
* 用法:
*<input type="radio" value="1" name="cssrain"/>
*<input type="radio" value="2" name="cssrain" checked/>
*<input type="radio" value="3" name="cssrain"/>
*<input type="button" onclick="alert(getRadioValue('cssrain'))" value="test"/>
**************/
function getRadioValue(radioName){
var obj=document.getElementsByName(radioName);
for(var i=0;i<obj.length;i++){
   if(obj[i].checked){
    return obj[i].value;
   }
}
}

/**************
* 复选框全选/不选/反选
* 用法:
<form id="form_a">
<input type="checkbox" value="1" name="a"/>
<input type="checkbox" value="2" name="a" checked/>
<input type="checkbox" value="3" name="a"/>
<input type="button" value="全选" onclick="checkAll(document.getElementById('form_a'),'all')"/>
<input type="button" value="不选" onclick="checkAll(document.getElementById('form_a'),'none')"/>
<input type="button" value="反选" onclick="checkAll(document.getElementById('form_a'),'')"/>
</form>
**************/
function checkAll(form, sel) {
for (i = 0, n = form.elements.length; i < n; i++) {
   if(form.elements[i].type == "checkbox") {
    if(form.elements[i].checked == true) {
     form.elements[i].checked = (sel == "all" ? true : false);
    } else {
     form.elements[i].checked = (sel == "none" ? false : true);
    }
   }
}
}


/**************
* 复选框检查是否选中。
* 如果没一个选中,会返回false.
* 用法:
<form id="form_a" name="form_a">
<input type="checkbox" value="1" name="a"/>
<input type="checkbox" value="2" name="a" checked/>
<input type="checkbox" value="3" name="a"/>
<input type="button" value="全选" onclick="alert( SCheckBox('form_a','a') )"/>
</form>
**************/
function SCheckBox(_formName,_checkboxName){
var selflag = {'checked':0,'cvalues':[]};
_scheckbox = eval('document.'+_formName+'.'+_checkboxName);
if(_scheckbox){
   if(eval(_scheckbox.length)){
    for(i=0;i<_scheckbox.length;i++){
     if(_scheckbox[i].checked){
      selflag.checked++;
      selflag.cvalues.push(_scheckbox[i].value);
     }
    };
   }else if(_scheckbox.checked){
    selflag.checked++;
    selflag.cvalues.push(_scheckbox.value);
   }
   if(selflag.checked){
    return selflag;
   }
}
return false;
}


/**************
收藏到书签.(兼容IE和FF)。
用法:
<input type="button" value="收藏" onclick="addBookmark('cssrain(前端开发)','http://www.cssrain.cn')"/>
**************/
function addBookmark(title,url) {
if (window.sidebar) {
   window.sidebar.addPanel(title, url,"");
} else if( document.all ) {
   window.external.AddFavorite( url, title);
} else if( window.opera && window.print ) {
   return true;
}
}

/**************
函数 : 文本框得到与失去焦点 操作。
这个方法经常在文本框搜索的时候出现。
文本里显示 “ 搜索 ”,然后当用户鼠标点击此文本,
文本框内容清空。如果用户没填写内容,那么文本的值又复原。
如果填写了,就显示用户填写的。
用法:
<input type="" value="关键字搜索" name="a" onfocus="clearTxt('a','关键字搜索')" onblur="fillTxt('a','关键字搜索')"/>
<input type="text" value="test" name="test" />
**************/
function clearTxt(id,txt) {
if (document.getElementById(id).value == txt)
    document.getElementById(id).value="" ;
return ;
}
function fillTxt(id,txt) {
if ( document.getElementById(id).value == "" )
    document.getElementById(id).value=txt;
return ;
}
//也可以使用 defaultValue属性 来做:
//例子:
/*
<input type="text" value="搜索"/>
<input type="text" value="请输入名称"/>
<SCRIPT LANGUAGE="JavaScript">
var inputs =document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
     if (inputs[i].type == "submit") continue;
     if (!inputs[i].defaultValue) continue;
      inputs[i].onfocus = function(){
       if(this.value == this.defaultValue )
    {
                 this.value = "";
    }
   }   //end of onfocus
     inputs[i].onblur = function(){
       if(this.value == "" )
    {
                this.value = this.defaultValue;
    }
   }   //end of onblur
}
</SCRIPT>
*/

 

 

====================================================================

/**************
函数 : 用来判断鼠标按的是左键还是右键。(兼容IE和ff)
用法:
onmousedown="mouse_keycode(event)"
**************/
function mouse_keycode(event){
    var event=event||window.event;
    var nav=window.navigator.userAgent;
    if (nav.indexOf("MSIE")>=1) //如果浏览器为IE.解释:因为 document.all 是 IE 的特有属性,所以通常用这个方法来判断客户端是否是IE浏览器 ,document.all?1:0;
{
   if(event.button==1){alert("左键")}
   else if(event.button==2){alert("右键")}
}
else if(nav.indexOf("Firefox")>=1) ////如果浏览器为Firefox
{
   if(event.button==0){alert("左键");}
   else if(event.button==2){alert("右键");}
}
   else{ //如果浏览器为其他
    alert("other");
   }
}


/**************
函数 :触发某个对象的onclick事件。(兼容IE和FF)
用法:
<input type="button" value="aaa" id="a" onclick=" alert('cssrain') " />
<input type="button" value="触发ID为a的onclick事件" onclick=" handerToClick('a') " />
**************/
function handerToClick(objid){
var obj=document.getElementById(objid);
if(document.all){
   obj.fireEvent("onclick");
}else{
   var e=document.createEvent('MouseEvent');
   e.initEvent('click',false,false);
   obj.dispatchEvent(e);
}
}


/**************
回车提交。
用法:
<input   type=text   onkeydown="keysubmit()">  
**************/
function keysubmit()
{
    if(event.keyCode==13)
   {
    form.submit();
   }
}

/**************
实现Ctrl+Enter 提交的效果.(兼容IE和FF)
在做这个效果时,发现一个问题,
当表单中如果只有一个文本框时,
回车会默认提交。(没有提交按钮也一样。)
用法:
<form action="#" name="a">
<input   type="text" />  
<input   type="text"   onkeydown="QuickPost( event , document.a )" />  
</form>
**************/
function QuickPost(event,form){
    var event=event||window.event;
if((event.ctrlKey && event.keyCode == 13)||(event.altKey && event.keyCode == 83)){
   // event.srcElement.form.submit();
   form.submit();
}
}


/**************
回车自动跳到下一个文本框。
注;此方法不兼容FF,
因为在FF下,event.keycode是只读属性,不能赋值。
用法:
<form action="#" name="a" onkeydown="QuickNext()">
<input   type="text" />  
<input   type="text"   />  
<input   type="button" value="test" />
</form>
**************/
function   QuickNext()  
{
//判断是否为button, 是因为在HTML上会有type="button"
//判断是否为submit,是因为HTML上会有type="submit"
//判断是否为reset,是因为HTML上的"重置"应该要被执行
//判断是否为空,是因为对于HTML上的"<a>链接"也应该被执行,
//这种情况发生的情况不多,可以使用"tabindex=-1"的方式来取消链接获得焦点.
      if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event.srcElement.type!='textarea' && event.srcElement.type!='')
           {   event.keyCode = 9; }
}  


/**************
按TAB键移动到下一个输入框时,光标停在文本框文字的最后,方便用户继续输入.
IE默认是全部选中。此方法不兼容FF。
用法:
<input type='text' value='0592' onfocus="moveEnd()">
**************/
function moveEnd()
{
var e=event.srcElement;
var r=e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}

 

/**************
TEXTAREA自适应文字的行数 .
注;此方法不兼容FF,(onpropertychange)
参数:当前对象 和 最小高度
用法:
<textarea rows=5 name=s1 cols=27 onpropertychange="textarea_scroll(this,60)" style="overflow-y:hidden">
</textarea>
**************/
function textarea_scroll(obj,min)
{
   if(obj.scrollHeight<min){
          obj.style.posHeight=min
   }else{
          obj.style.posHeight=obj.scrollHeight
   }
}


/**************
改变下拉框选项后,根据选项的不同弹出不同的窗口.
用法:
<select onchange="return select_pop(this);" >
<option selected="selected">--分公司--</option>
<option value="http://www.bj.chinaunicom.com">北京</option>
<option value="http://www.sh.chinaunicom.com">上海</option>
</select>
**************/
function select_pop(fileurl){
    if (fileurl.options[fileurl.selectedIndex].value != "")
   window.open(fileurl.options[fileurl.selectedIndex].value,"_blank","toolbar=yes,location=yes,menubar=yes,scrollbars=yes,resizable=yes,left=50,height=500,width=700");
return true;
}

 

/**************
得到字符串的字节数。
用法:
<input   type="text" name="a" />  
<input   type="button" value="test" onclick="alert( strlen(document.getElementById('a').value ) )" />
**************/
//
function strlen(string){
      var str="";
      str=string;
      str=str.replace(/[^\x00-\xff]/g,"**");
      return str.length;
}
//或者
function ByteLength(string){
return string.replace(/[^\x00-\xff]/g,"00").length;
}


/**************
文本框输入字符控制。
只能输入数字。
用法:
<input onkeyup="input_shuzi(this)" onbeforepaste="input_shuzi_before()" />
**************/
function input_shuzi(obj)
{
obj.value=obj.value.replace(/[^\d]/g,'');
}
function input_shuzi_before(){
clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''));
}

/**************
文本框输入字符控制。
只能输入数字和英文。
用法:
<input onkeyup="input_shuziyinwen(this)" onbeforepaste="input_shuziyinwen_before()" />
**************/
function input_shuziyinwen(obj)
{
obj.value=obj.value.replace(/[\W]/g,'');
}
function input_shuziyinwen_before(){
clipboardData.setData('text',clipboardData.getData('text').replace(/[\W]/g,''));
}

/**************
文本框输入字符控制。
只能输入汉字。
用法:
<input onkeyup="input_hanzi(this)" onbeforepaste="input_hanzi_before()" />
**************/
function input_hanzi(obj)
{
obj.value=obj.value.replace(/[^\u4E00-\u9FA5]/g,'');
}
function input_hanzi_before(){
clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''));
}

/**************
文本框输入字符控制。
只能输入全角。
用法:
<input onkeyup="input_quanjiao(this)" onbeforepaste="input_quanjiao_before()" />
**************/
function input_quanjiao(obj)
{
obj.value=obj.value.replace(/[^\uFF00-\uFFFF]/g,'');
}
function input_quanjiao_before(){
clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''));
}


/**************
*只允许输入数字和小数点。
*用法:
*<input type=text onkeyup="clearNoNum(this)"/>
**************/
function clearNoNum(obj)
{
//先把非数字的都替换掉,除了数字和.
obj.value = obj.value.replace(/[^\d.]/g,"");
//必须保证第一个为数字而不是.
obj.value = obj.value.replace(/^\./g,"");
//保证只有出现一个.而没有多个.
obj.value = obj.value.replace(/\.{2,}/g,".");
//保证.只出现一次,而不能出现两次以上
obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
}

/**************
*把输入的字母转成大写。
*用法:
*<input type="text" name="d" onkeyup="input_to_uppercase(this)" />
**************/
function input_to_uppercase(obj)
{
obj.value=obj.value.toUpperCase();
}
/**************
*把输入的字母转成小写。
*用法:
*<input type="text" name="e" onkeyup="input_to_lowercase(this)" />
**************/
function input_to_lowercase(obj)
{
obj.value=obj.value.toLowerCase();
}


/**************
*判断字符中是否包含有 http:// .
*用法:
<input type="text" name="a" />
<input type="button" value="test" onclick=" alert( urlcheck(document.getElementById('a').value) )" />
**************/
function urlcheck(string){
var re;
re=new RegExp("http://");
return re.test(string.toLowerCase());
}


/**************
从URL地址中提取文件名
*用法:
var a =url_filename("http://www.cssrain.cn/abc.rar");
alert( a ) ;// "abc"
**************/
function url_filename(string){
string=string.replace(/(.*\/){0,}([^\.]+).*/ig,"$2")
return string
}

/**************
*实时检测输入框的字数
*用法:
<input type="text" name="explain" id="explain" onkeyup="check_input_Length(this)" >
<small>文字最大长度: 20. 还剩: <span id="chLeft">20</span>.</small>
**************/
function check_input_Length(which)
{
var maxChars = 20;
if (which.value.length > maxChars)
   which.value = which.value.substring(0,maxChars);
   var curr = maxChars - which.value.length;
   document.getElementById("chLeft").innerHTML = curr.toString();
}


/**************
*判断电子邮箱是否符合规范
*用法:
<input type="text" name="a" />
<input type="button" value="test" onclick=" alert( emailcheck(document.getElementById('a').value) )" />
**************/
function emailcheck(string){
var re;
re=new RegExp("^[\\w-_\\.]+@([a-z|0-9|-]+\\.)+[a-z]{2,5}$");
return re.test(string.toLowerCase());
}

====================================================================

/*插入Flash文件在你要插入的位置 。 <script> document.write( GetFlashStr("pro.swf","400px","100px",true) ); </script>*/function GetFlashStr(Path,Width,Height,Transparent){ var Temp,T=""; Temp='<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="FlashH" codebase="" border="0" width="'+Width+'" height="'+Height+'">' Temp+='<param name="movie" value="'+Path+'"/>' Temp+='<param name="quality" value="High"/>' Temp+='<param name="scale" value="ExactFit"/>' if (Transparent) {Temp+=' <param name="wmode" value="transparent"/>';T='wmode="transparent"'} Temp+='<embed src="'+Path+'" pluginspage="" type="application/x-shockwave-flash" name="FlashH" width="'+Width+'" height="'+Height+'" quality="High"'+T+' scale="ExactFit"/>' Temp+='</object>' return Temp;}
分享到:
评论

相关推荐

    JAVA上百实例源码以及开源项目源代码

     Java实现HTTP连接与浏览,Java源码下载,输入html文件地址或网址,显示页面和HTML源文件,一步步的实现过程请下载本实例的Java源码,代码中包括丰富的注释,对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...

    微信小程序-线上推广活动小游戏带排行榜-挑战游戏赢奖品-裂变营销现成代码

    后台有两个微信云函数,已经包含在代码中,数据库使用的也是微信云开发数据库,需要稍微看下云函数文档再下载使用。 【指引】将项目文件修改为APPJS环境ENV的云开发实例名称,上传云函数,修改4个页面JS所有数据库db...

    JAVA上百实例源码以及开源项目

     Java实现HTTP连接与浏览,Java源码下载,输入html文件地址或网址,显示页面和HTML源文件,一步步的实现过程请下载本实例的Java源码,代码中包括丰富的注释,对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...

    黑马程序员 安卓学院 万元哥项目经理 分享220个代码实例

    |--Json读js资源文件 |--layout布局样式之style配置 |--listview 页面 图片加文字 |--ListView之CursorAdapter异步查询框架之短信 |--ListView之动态添加子view |--ListView优化之分页加载 |--ListView优化之动态...

    webtools:模仿outils,自己造轮子,前端业务代码工具库,重点是学习,明白一些问题

    业务开发过程中,会经常用到日期格式化、url参数转对象、浏览器类型判断、节流函数等常用函数,为避免不同项目多次复制粘贴的麻烦,这里统一封装,并发布到npm,以提高开发效率。如果你也有常用的代码,欢迎为本项目...

    asp.net知识库

    Oracle中PL/SQL单行函数和组函数详解 mssql+oracle Oracle编程的编码规范及命名规则 Oracle数据库字典介绍 0RACLE的字段类型 事务 CMT DEMO(容器管理事务演示) 事务隔离性的一些基础知识 在组件之间实现事务和异步...

    vc++ 应用源码包_6

    代码里用了备份dll的方法,因此在自定义的函数中可以直接调用在内存中备份的dll代码,而不需要再把函数头部改来改去。 IOCP反弹远控客户端模型,外加上线服务端,全部代码注释! 如题。这个是IOCP远程控制软件的...

    vc++ 应用源码包_5

    代码里用了备份dll的方法,因此在自定义的函数中可以直接调用在内存中备份的dll代码,而不需要再把函数头部改来改去。 IOCP反弹远控客户端模型,外加上线服务端,全部代码注释! 如题。这个是IOCP远程控制软件的...

    java开源包8

    Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型。这是一个可靠、容错的服务。 彩信发送开发包 apimms apimms 提供了各种语言用来发送彩信...

    java开源包10

    Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型。这是一个可靠、容错的服务。 彩信发送开发包 apimms apimms 提供了各种语言用来发送彩信...

    jquery插件使用方法大全

     在编写js库代码时候,你一定经常和“$”美元符号打交道吧?无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了,但是,它的功能远非如此,瞧瞧以下的jQuery代码,你就会...

    vc++ 开发实例源码包

    代码里用了备份dll的方法,因此在自定义的函数中可以直接调用在内存中备份的dll代码,而不需要再把函数头部改来改去。 IOCP反弹远控客户端模型,外加上线服务端,全部代码注释! 如题。这个是IOCP远程控制软件的...

    AspBox-v1.3.2工具API

    封装严谨,层层嵌套,提高了代码重复利用多次利用。 可以说AspBox是一个比较成型的可应用于开发人员快速开发的ASP开发框架。 AspBox核心主要包含了这么些核心: A处理Array数组 C通用函数类 Cookie操作类 Catch缓存...

    java开源包1

    Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型。这是一个可靠、容错的服务。 彩信发送开发包 apimms apimms 提供了各种语言用来发送彩信...

    java开源包11

    Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型。这是一个可靠、容错的服务。 彩信发送开发包 apimms apimms 提供了各种语言用来发送彩信...

    java开源包2

    Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型。这是一个可靠、容错的服务。 彩信发送开发包 apimms apimms 提供了各种语言用来发送彩信...

    java开源包3

    Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型。这是一个可靠、容错的服务。 彩信发送开发包 apimms apimms 提供了各种语言用来发送彩信...

    java开源包6

    Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型。这是一个可靠、容错的服务。 彩信发送开发包 apimms apimms 提供了各种语言用来发送彩信...

    java开源包5

    Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型。这是一个可靠、容错的服务。 彩信发送开发包 apimms apimms 提供了各种语言用来发送彩信...

Global site tag (gtag.js) - Google Analytics