Javascript代码片段

来自tomtalk
Tom（讨论 | 贡献）2015年6月5日 (五) 06:05的版本 （→‎代码片断）

(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至： 导航、 搜索

替换空行

data.articles_content.replace(/\n[ \t]*\n/gm, "|");

扩展jquery，方便取href参数

(function($){
    $.getUrlParam = function(name) {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        return (r !== null ? decodeURI(r[2]) : null);
    }
})(jQuery);

检测页面上一个元素是否已经滚动到了屏幕的可视区域内

var top = obj.getBoundingClientRect().top //元素顶端到可见区域顶端的距离
var se = document.documentElement.clientHeight //浏览器可见区域高度。
if (top <= se ) {
  //code
}

如何通过js来改变input 的type类型

用户：<input type=text value="ayeah">

密码：<input type=password id=pw name="pw" value="www.ayeah.com"><INPUT TYPE="checkbox" id="showPass" onclick="var temp=document.getElementById('pw').value;if(this.checked){document.getElementById('pass').innerHTML='<input type=text id=pw name=pw>';}else{document.getElementById('pass').innerHTML='<input type=password id=pw name=pw>';} document.getElementById('pw').value=temp;">显示密码

为了安全起见，密码框不能选取，复制，粘贴

onselectstart="return false" 禁止选取、防止复制

onpaste="return false" 禁止粘贴

localstorage兼容ie8以下浏览器的问题

IE8下要么cookie，要么userData

敲了几个小时的键盘，反复调试后，这段代码终于可以用了。(代码在下面)

使用方法：

  1. 把这段代码放在第一个进行本地存储的语句之前的任何位置；
  2. 代码必须在<html>标签内；
  3. 不能将本地变量名设为"userdata_record"
  4. 不能以 userdataobj 命名变量
  5. 加入代码后，如果不使用localStorage.length和localStorage.key( i )，那么你就完全按照localStorage的使用方法进行本地存储就可以了。

如果有问题欢迎和我联系。

最后想发一声感慨：微软的东西真是烂呀，难怪有人说微软是信息时代的一场灾难。 

<script language="JavaScript" type="text/javascript">
  if (typeof (localStorage) == 'undefined') {
    var box = document.body || document.getElementsByTagName("head")[0] || document.documentElement;
    userdataobj = document.createElement('input');
    userdataobj.type = "hidden";
    userdataobj.addBehavior("#default#userData");
    box.appendChild(userdataobj);
    //设定对象 
 
    var localStorage = {
      setItem: function (nam, val) {
        userdataobj.load(nam);
        userdataobj.setAttribute(nam, val);
        var d = new Date();
        d.setDate(d.getDate() + 700);
        userdataobj.expires = d.toUTCString();
        userdataobj.save(nam);
        userdataobj.load("userdata_record");
        var dt = userdataobj.getAttribute("userdata_record");
        if (dt == null) dt = '';
        dt = dt + nam + ",";
        userdataobj.setAttribute("userdata_record", dt);
        userdataobj.save("userdata_record");
      },
      //模拟 setItem
 
      getItem: function (nam) {
        userdataobj.load(nam);
        return userdataobj.getAttribute(nam);
      },
      //模拟 getItem
 
      removeItem: function (nam) {
        userdataobj.load(nam);
        clear_userdata(nam)
        userdataobj.load("userdata_record");
        var dt = userdataobj.getAttribute("userdata_record");
        var reg = new RegExp(nam + ",", "g");
        dt = dt.replace(reg, '');
        var d = new Date();
        d.setDate(d.getDate() + 700);
        userdataobj.expires = d.toUTCString();
        userdataobj.setAttribute("userdata_record", dt);
        userdataobj.save("userdata_record");
      },
      //模拟 removeItem
 
      clear: function () {
        userdataobj.load("userdata_record");
        var dt = userdataobj.getAttribute("userdata_record")
          .split(",");
        for (var i in dt) {
          if (dt[i] != '') clear_userdata(dt[i])
        }
        clear_userdata("userdata_record")
      }
      //模拟 clear();
 
    }
 
      function clear_userdata(keyname) //将名字为keyname的变量消除
      {
        var keyname;
        var d = new Date();
        d.setDate(d.getDate() - 1);
        userdataobj.load(keyname);
        userdataobj.expires = d.toUTCString();
        userdataobj.save(keyname);
      }
  }
</script>

HTML5 LocalStorage 本地存储

说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示：

http://pic002.cnblogs.com/images/2011/219983/2011052411382518.jpg

最早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好像以前禁用javascript的用户不存在了一样。

userData是IE的东西，垃圾。现在用的最多的是Flash吧，空间是Cookie的25倍，基本够用。再之后Google推出了Gears，虽然没有限制，但不爽的地方就是要装额外的插件（没具体研究过）。到了HTML5把这些都统一了，官方建议是每个网站5MB，非常大了，就存些字符串，足够了。比较诡异的是居然所有支持的浏览器目前都采用的5MB，尽管有一些浏览器可以让用户设置，但对于网页制作者来说，目前的形势就5MB来考虑是比较妥当的。

http://pic002.cnblogs.com/images/2011/219983/2011052411384081.jpg

支持的情况如上图，IE在8.0的时候就支持了，非常出人意料。不过需要注意的是，IE、Firefox测试的时候需要把文件上传到服务器上（或者localhost），直接点开本地的HTML文件，是不行的。

首先自然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。 

if(window.localStorage){
    alert('This browser supports localStorage');
}else{
    alert('This browser does NOT support localStorage');
}

存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下： 

localStorage.a    = 3;             //设置a为"3"
localStorage["a"] = "sfsf";        //设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac"); //设置b为"isaac"
 
var a1 = localStorage["a"];         //获取a的值
var a2 = localStorage.a;            //获取a的值
var b  = localStorage.getItem("b"); //获取b的值
localStorage.removeItem("c");       //清除c的值

这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下： 

var storage = window.localStorage;
function showStorage(){
    for(var i=0;i<storage.length;i++){
        //key(i)获得相应的键，再用getItem()方法获得对应的值
        document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
    }
}

写一个最简单的，利用本地存储的计数器： 

var storage = window.localStorage;
if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换
document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount;
showStorage();

不断刷新就能看到数字在一点点上涨，如下图所示：

http://pic002.cnblogs.com/images/2011/219983/2011052411385178.jpg

需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。

另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。

HTML5的本地存储，还提供了一个storage事件，可以对键值对的改变进行监听，使用方法如下： 

if(window.addEventListener){
    window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);
}
 
function handle_storage(e){
    if(!e){e=window.event;}
    //showStorage();
}

对于事件变量e，是一个StorageEvent对象，提供了一些实用的属性，可以很好的观察键值对的变化。

js正则表达式

//邮箱验证正则
var email = 'jinshui.xie@163.com';
var re = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if ( ! re.test(email)) {
    $('#check_msg').html('您输入的邮箱错误'); 
    return false;
｝
 
//验证手机号
function validate_mobile(mobile) {
    var mobile_no = /^(((1[0-9]{2}))+\d{8})$/;
 
    return mobile_no.test(mobile);
}

利用正则表达式限制网页表单里的文本框输入内容：

2.用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^\d]/g,)

"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,))"

3.用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,)

"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,))"

4.计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}

使用jQuery判断获取到的页面元素是否为空

通过jQuery选择器获取到的永远是一个对象，即使页面上根本没有该元素。因此，如果要使用jQuery检查元素再给某个页面上是否存在的时候，不能使用以下代码：

if ($("#tt")) { //do sth. }

而应该通过获取到的元素的长度来判断，代码如下：

if ($("#tt").length > 0) { //do sth. }

或者通过转换成JavaScript对象的方式来进行处理：

if ($("#tt")[0]) { //do sth. }

js数组的in_array函数

PHP的数组函数in_array()非常方便，可JS就不是了。其实我很不喜欢JS的数组~

别说了，直接上方法

Array.prototype.in_array = function(e) { 

   for(i=0;i<this.length;i++)
   {
       if(this[i] == e)
       return true;
   }
   return false;

}


var f = Math.round(x*100)/100; //保留两位小数

http://jashkenas.github.com/coffee-script/

根据IP取城市新浪接口

<script>
$(function(){ 
    $(".ip2place").each(function(){
        var ip2place = $(this); 
        $.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip='+$(this).html(), function(){ 
            if (remote_ip_info.ret == 1) { 
                ip2place.html(remote_ip_info.province + ' ' + remote_ip_info.city); 
            }
        }); 
    }); 
});
</script>

javascript之数组操作

数组的创建

var arrayObj = new Array();　//创建一个数组 var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　创建一个数组并赋值 要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值 arrayObj[1]= "这是新值"; //给数组元素赋予新的值

数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度 arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度 arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值 arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移 arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素 arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向 arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向

数组元素的排序

arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址 arrayObj.sort(); //对数组元素排序，返回数组地址

数组元素的字符串化

arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。 toLocaleString 、toString 、valueOf：可以看作是join的特殊用法，不常用

数组对象的3个属性

length 属性

Length属性表示数组的长度，即其中元素的个数。因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。和其他大多数语言不同的是，JavaScript数组的length属性是可变的，这一点需要特别注意。当length属性被设置得更大时，整个数组的状态事实上不会发生变化，仅仅是length属性变大；当length属性被设置得比原来小时，则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子：

var arr=[12,23,5,3,25,98,76,54,56,76]; //定义了一个包含10个数字的数组 alert(arr.length); //显示数组的长度10 arr.length=12; //增大数组的长度 alert(arr.length); //显示数组的长度已经变为12 alert(arr[8]); //显示第9个元素的值，为56 arr.length=5; //将数组的长度减少到5，索引等于或超过5的元素被丢弃 alert(arr[8]); //显示第9个元素已经变为"undefined" arr.length=10; //将数组长度恢复为10 alert(arr[8]); //虽然长度被恢复为10，但第9个元素却无法收回，显示"undefined"

由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置，它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量，同样，也可以使用一个未定义的数组元素（指索引超过或等于length的元素），这时，length属性的值将被设置为所使用元素索引的值加1。例如下面的代码：

var arr=[12,23,5,3,25,98,76,54,56,76]; alert(arr.length); arr[15]=34; alert(arr.length);

代码中同样是先定义了一个包含10个数字的数组，通过alert语句可以看出其长度为10。随后使用了索引为15的元素，将其赋值为15，即arr[15]=34，这时再用alert语句输出数组的长度，得到的是16。无论如何，对于习惯于强类型编程的开发人员来说，这是一个很令人惊讶的特性。事实上，使用new Array()形式创建的数组，其初始长度就是为0，正是对其中未定义元素的操作，才使数组的长度发生变化。

由上面的介绍可以看到，length属性是如此的神奇，利用它可以方便的增加或者减少数组的容量。因此对length属性的深入了解，有助于在开发过程中灵活运用。

prototype 属性

返回对象类型原型的引用。prototype 属性是 object 共有的。 objectName.prototype objectName 参数是object对象的名称。 说明：用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。 对于数组对象，以以下例子说明prototype 属性的用途。 给数组对象添加返回数组中最大元素值的方法。要完成这一点，声明一个函数，将它加入 Array.prototype， 并使用它。 function array_max( ) { 

  var i, max = this[0];
  for (i = 1; i < this.length; i++)
  {
  if (max < this[i])
  max = this[i];
  }
  return max;

} Array.prototype.max = array_max; var x = new Array(1, 2, 3, 4, 5, 6); var y = x.max( ); 该代码执行后，y 保存数组 x 中的最大值，或说 6。

constructor 属性

表示创建对象的函数。

object.constructor //object是对象或函数的名称。 说明：constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。 例如： x = new String("Hi"); if (x.constructor == String) // 进行处理（条件为真）。 或 function MyFunc { // 函数体。 } y = new MyFunc; if (y.constructor == MyFunc) // 进行处理（条件为真）。

js去掉字符串中的最后一个字符

var str="aaaaaaaaaaaaaaaaaa|"; 
var texts=str.substr(0, str.length-1);  
alert(texts);

JS数组定义

数组有四种定义的方式： 

//使用构造函数 
var a = new Array(); 
var b = new Array(8); 
var c = new Array("first", "second", "third"); 
 
//数组直接量
var d = ["first", "second", "third"];

这些年，我收集的JavaScript代码

一、JavaScript跨平台事件

对于跨平台事件我们一般这么写(只例举添加事件)：

function addEventHandler(oTarget, sEventType, fnHandler){ if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); } else if(oTarget.attachEvent){ oTarget.attachEvent("on"+sEventType,fnHandler); } else{ oTarget["on"+sEventType]=fnHandler; }} 那么下面这段代码的效果是什么样的呢？

Test
...var oDiv=document.getElementById("test");addEventHandler(oDiv,"mouseover",function(){ alert("over "+this.id);});

由于IE的this问题，在IE中果断地弹出了 over undefined，所以跨平台的事件更好的写法是这样的：

function addEventHandler(oTarget, sEventType, fnHandler){ if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); } else if(oTarget.attachEvent){ oTarget.attachEvent("on"+sEventType,function(){ return fnHandler.call(oTarget,window.event); }); } else{ oTarget["on"+sEventType]=fnHandler; }}

二、合并两个Array并去掉重复项

Array.prototype.unique = function() { var a = this.concat(); for(var i=0; i<a.length; ++i) { for(var j=i+1; j<a.length; ++j) { if(a[i] === a[j]) a.splice(j, 1); } } return a;};//Demovar array1 = ["a","b"];var array2 = ["b", "c"];var array3 = array1.concat(array2).unique();// ["a","b","c"]

三、typeof === "undefined" vs. != null

if(typeof neverDeclared == "undefined") //no errorsif(neverDeclared == null) //throws ReferenceError: neverDeclared is not defined so，typeof === "undefined" is better!

四、setTimeout(fn, 0)的意义

浏览器同时要做很多事，这些事情以队列的方式存在，执行JavaScript只是其中之一，setTimeout(fn, 0)表面上看是立即执行的意思，但实际上只是在浏览器事件队列中添加了一个新的事件，由于队列是先进先出，所以fn会等等到当前队列中的事件执行完后再执行。由于JavaScript的定时器回调函数是异步执行的，所以产生的效果就是等页面上同步事件(包括页面渲染与同步JS代码)执行完之后再执行。

一个简单的示例：

<script type="text/javascript"> //one document.getElementById("imgTest").style.borderBottom="5px solid #000"; //two setTimeout(function(){ document.getElementById("imgTest").style.borderBottom="5px solid #000"; }, 0);</script><img src="http://jscode.chinacxy.com/img_lib/m_400_600_01.jpg" id="imgTest" alt=""/> one会报错，因为页面执行到这里时还没有img，但two却可以。

五、增强版取URL中的参数

function getQueryString() { var result = {}, queryString = location.search.substring(1), re = /([^&=]+)=([^&]*)/g, m; while (m = re.exec(queryString)) { result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); } return result;}// demovar myParam = getQueryString()["myParam"];

六、检查一个object是否是jQuery object

if(obj instanceof jQuery)

七、检查一个数是否为整数或浮点数

function isInt(n) { return typeof n === 'number' && n % 1 == 0;}// or ,this support ie3function isInt(n) { return typeof n === 'number' && parseFloat(n) == parseInt(n, 10) && !isNaN(n);}function isFloat (n) { return n===+n && n!==(n|0);}

八、用JavaScript添加style节点

var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement('style');style.type = 'text/css';if(style.styleSheet){ style.styleSheet.cssText = css;}else{ style.appendChild(document.createTextNode(css));}head.appendChild(style);

九、如何跳出双重循环

function foo (){ dance: for(var k = 0; k < 4; k++){ for(var m = 0; m < 4; m++){ if(m == 2){ break dance; } } }}

十、把一个Array追加到另一个Array上

var a=[1,2],b=[3,4,5];a.push.apply(a,b);/*a: [1, 2, 3, 4, 5]*/

十一、用jQuery把页面上的一个tag换成另一个tag

如把页面上所有的code换为pre：

A B C //change to
 A 
 A 
 A

jQuery代码：

$('code').contents().unwrap().wrap('
');//or$('code').replaceWith(function(){    return $("
").append($(this).contents());});

十二、取数组中的最小值和最大值

var arr = new Array();arr[0] = 100;arr[1] = 0;arr[2] = 50;var min = Math.min.apply(null, arr),    max = Math.max.apply(null, arr);

十三、取两个数组交集

/* finds the intersection of  * two arrays in a simple fashion.   * * PARAMS *  a - first array, must already be sorted *  b - second array, must already be sorted * * NOTES * *  Should have O(n) operations, where n is  *    n = MIN(a.length(), b.length()) */function arrayIntersection(a, b){  var ai=0, bi=0;  var result = new Array();  while( ai < a.length && bi < b.length )  {     if      (a[ai] < b[bi] ){ ai++; }     else if (a[ai] > b[bi] ){ bi++; }     else /* they're equal */     {       result.push(a[ai]);       ai++;       bi++;     }  }  return result;}console.log(arrayIntersection([1,2,3],[2,3,4,5,6]));//[2,3]
注释中已经说明了，传入的数组要已经排过序的。

十四、统计一个字符串中某段子串出现的次数

var temp = "This is a string.";var count = temp.match(/is/g);

十五、方法返回多个值

//Onevar mValues= function(){      var a ="a";     var b = "b";       return [a, b];  };var values= mValues();var valOne= values[0];var valTwo = values[1];//Twovar mValues= function(){      var a= "a";    var b = "b";        return {        'a': a,        'b': b    };  };var values= mValues();var valOne= values.a;var valTwo = values.b;

十六、Array迭代器

function createIterator(x) {    var i = 0;     return function(){       return x[i++];    };}var iterator=createIterator(['a','b','c','d','e','f','g']);var current;while(current=iterator()){    console.log(current);}
注意，如果数组中有0、false、""、null、NaN迭代器将会停止。

十七、根据日计算年龄

function getAge(dateString) {    var today = new Date();    var birthDate = new Date(dateString);    var age = today.getFullYear() - birthDate.getFullYear();    var m = today.getMonth() - birthDate.getMonth();    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {        age--;    }    return age;}
console.log(getAge("2005,8,1"));//6

十八、判断当前页面是否被放入了iframe中

if(self==top){      //not in iframe}else{      //in iframe}
这段代码可以用来防止网页被放入iframe中，不过如果别人定义了self和top变量覆盖了浏览器默认值可能会失效。

十九、把arguments转换为Array

var args = Array.prototype.slice.call(arguments, 0);

二十、日期格式化
来源：javascript日期格式化函数，跟C#中的使用方法类似

Date.prototype.toString=function(format,loc){    var time={};    time.Year=this.getFullYear();    time.TYear=(""+time.Year).substr(2);    time.Month=this.getMonth()+1;    time.TMonth=time.Month<10?"0"+time.Month:time.Month;    time.Day=this.getDate();    time.TDay=time.Day<10?"0"+time.Day:time.Day;    time.Hour=this.getHours();    time.THour=time.Hour<10?"0"+time.Hour:time.Hour;    time.hour=time.Hour<13?time.Hour:time.Hour-12;    time.Thour=time.hour<10?"0"+time.hour:time.hour;    time.Minute=this.getMinutes();    time.TMinute=time.Minute<10?"0"+time.Minute:time.Minute;    time.Second=this.getSeconds();    time.TSecond=time.Second<10?"0"+time.Second:time.Second;    time.Millisecond=this.getMilliseconds();    time.Week=this.getDay();    var MMMArrEn=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];    var MMMArr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];    var WeekArrEn=["Sun","Mon","Tue","Web","Thu","Fri","Sat"];    var WeekArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];    var oNumber=time.Millisecond/1000;    if(format!=undefined && format.replace(/\s/g,"").length>0){        if(loc!=undefined && loc =="en"){            MMMArr=MMMArrEn.slice(0);            WeekArr=WeekArrEn.slice(0);        }        format=format            .replace(/yyyy/ig,time.Year)            .replace(/yyy/ig,time.Year)            .replace(/yy/ig,time.TYear)            .replace(/y/ig,time.TYear)            .replace(/MMM/g,MMMArr[time.Month-1])            .replace(/MM/g,time.TMonth)            .replace(/M/g,time.Month)            .replace(/dd/ig,time.TDay)            .replace(/d/ig,time.Day)            .replace(/HH/g,time.THour)            .replace(/H/g,time.Hour)            .replace(/hh/g,time.Thour)            .replace(/h/g,time.hour)            .replace(/mm/g,time.TMinute)            .replace(/m/g,time.Minute)            .replace(/ss/ig,time.TSecond)            .replace(/s/ig,time.Second)            .replace(/fff/ig,time.Millisecond)            .replace(/ff/ig,oNumber.toFixed(2)*100)            .replace(/f/ig,oNumber.toFixed(1)*10)            .replace(/EEE/g,WeekArr[time.Week]);    }    else{        format=time.Year+"-"+time.Month+"-"+time.Day+" "+time.Hour+":"+time.Minute+":"+time.Second;    }    return format;}var d=new Date();console.log(d.toString());    //2012-7-27 9:26:52console.log(d.toString(""));    //2012-7-27 9:26:52console.log(d.toString("yyyy-MM-dd HH:mm:ss"));    //2012-07-27 09:26:52console.log(d.toString("yyyy年MM月dd日 HH:mm:ss"));    //2012年07月27日 09:26:52console.log(d.toString("yyyy-MM-dd HH:mm:ss fff"));    //2012-07-27 09:26:52 237console.log(d.toString("yyyy年 MMM dd EEE"));    //2012年 七月 27 星期五console.log(d.toString("yyyy MMM dd EEE","en"));    //2012 Jul 27 Fri



Js控制css-模仿视频网站关灯开灯


 
<head>
<style type="text/css">
    .day {
        background-color:White;
    }
 
    .night {
        background-color:Black;
    }
</style>
 
<script type="text/javascript">
function SwitchLight() {
    var btn = document.getElementByIdx_x("btnChange");
 
    if (document.body.className == "night") {
        document.body.className = "day";
        btn.value = "关灯";
    } else if (document.body.className == "day") {
        document.body.className = "night";
        btn.value = "开灯";
    }
} 
</script>
</head>
 
<body class="night">
<input id="btnChange" type="button" value="开灯" onclick="SwitchLight()" />
</body>


JS动态加载JavaScript和Css


<script language="javascript" type="text/javascript">
    function AddCSS(filePath) {
        var htmlHead = document.getElementsByTagName("head")[0];
        var css = document.createElement("link");
        css.setAttribute("type", "text/css");
        css.setAttribute("rel", "Stylesheet");
        css.setAttribute("href", filePath);
        htmlHead.appendChild(css);
 
        css.onreadystatechange = function () {
            if (css.readyState == "complete") {
                alert("css onreadystatechange");
            }
        }
 
        css.onload = function () {
            alert("cssonload");
        }
    }
 
    function AddJS(filePath) {
        var htmlHead = document.getElementsByTagName("head")[0];
        var js = document.createElement("script");
        js.setAttribute("type", "text/javascript");
        js.setAttribute("language", "javascript");
        js.setAttribute("src", filePath);
        htmlHead.appendChild(js);
 
        js.onreadystatechange = function () {
            if (js.readyState == "complete") {
                alert("js onreadystatechange");
            }
        }
 
        js.onload = function () {
            alert("jsonload");
        }
    }
</script>


怎样用js判断一个图片文件是否存在？


<img src="原图片" alt="图片" onerror="this.src='替换图片'">


Javascript返回上一页


  1. Javascript返回上一页 history.go(-1), 返回两个页面: history.go(-2);
    2. 

  2. history.back().
    3. 

  3. window.history.forward()返回下一页
    4. 

  4. window.history.go(返回第几页,也可以使用访问过的URL)


Javascript刷新页面的几种方法


  1. history.go(0)
    2. 

  2. location.reload()
    3. 

  3. location=location
    4. 

  4. location.assign(location)
    5. 

  5. document.execCommand('Refresh')
    6. 

  6. window.navigate(location)
    7. 

  7. location.replace(location)
    8. 

  8. document.URL=location.href







自动刷新页面的方法


1.页面自动刷新：把如下代码加入<head>区域中，其中20指每隔20秒刷新一次页面.

<meta http-equiv="refresh" content="20">

2.页面自动跳转：把如下代码加入<head>区域中， 其中20指隔20秒后跳转到http://www.wyxg.com页面

<meta http-equiv="refresh" content="20;url=http://www.wyxg.com">

3.页面自动刷新js版



<script language="JavaScript">
function myrefresh()
{
    window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>


JS跳转页面参考代码大全


假设当前的 URL 是: http://example.com:1234/test.htm#part2：

location.herf：得到的是完整的url：http://example.com:1234/test.htm#part2

document.URL;得到实际url：http://example.com:1234/test.htm

第一种：
<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href;
</script>

第二种：
<script language="javascript">
alert("返回");
window.history.back(-1);
</script>

第三种：
<script language="javascript">
window.navigate("top.jsp");
</script>

第四种：
<script language="JavaScript">
self.location=’top.htm’;
</script>

第五种：
<script language="javascript">
alert("非法访问！");
top.location=’xx.jsp’;
</script>

今天利用self.location自身页面跳转，实现页面锚点的自身定位，避免了a标签的二次点击，感觉真的很实用。



代码片断


$(".selector").find("option:selected").text(); //获取当前选中项的text 
 
parseFloat(rtime);           //字符转数字
var obj = JSON.parse(str);   //由JSON字符串转换为JSON对象
 
//渐隐删除
$('#tr_product_id_' + rec_id).fadeOut(1000, function () {
    //这三个操作，要放在回调函数中，不然没有动态效果。
    $('#tr_product_id_' + rec_id).remove();
    $('table tr').removeClass('dual');
    $('table tr:nth-child(even)').addClass('dual');
});
 
//渐隐变色
$('#plan_vote_' + plan_id).fadeOut(1000, function () {
    //这个操作，要放在回调函数中，不然没有动态效果。
    $('#plan_vote_' + plan_id).show();
    $('#plan_vote_' + plan_id).css('color', '#058EBB');
});
 
setTimeout("window.location.href ='"+ $(item).attr('_href')+"'", time_delay);


js判断输入是否为正整数、浮点数等数字的函数


1.下面列出了一些判读数值类型的正则表达式

"^\\d+$"　　//非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$"　　//正整数
"^((-\\d+)|(0+))$"　　//非正整数（负整数 + 0）
"^-[0-9]*[1-9][0-9]*$"　　//负整数
"^-?\\d+$"　　　　//整数
"^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0）
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0）
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数
"^(-?\\d+)(\\.\\d+)?$"　　//浮点数

2.在程序中的使用方法

var r = /^[0-9]*[1-9][0-9]*$/　　//正整数

r.test(str); //str为你要判断的字符 执行返回结果 true 或 false



3. 测试正则的一个函数，可以用来判断 数字 字符 日期 Email 的 js函数

function TestRgexp(re, s){ // 参数说明 re 为正则表达式 s 为要判断的字符

return re.test(s)

}

4. 函数应用

<script type="text/javascript">

function TestRgexp(re, s){ // 参数说明 re 为正则表达式 s 为要判断的字符

return re.test(s)

}

var re = /^[0-9]*[1-9][0-9]*$/ ;

//判断是否是正整数 注： 程序中正则表达式格式： /上面的正则表达式(不带双引号)/
var s = prompt("请输入要判断的字符" , 10) ;

var result = TestRgexp(re , s); //测试 返回true或false

alert(result);

</script>



js中document.all的含义


2008年09月21日 星期日 10:55document.all是IE 4.0及以上版本的专有属性，是一个表示当前文档的所有对象的娄组，不仅包括页面上可见的实体对象，还包括一些不可见的对象，比如html注释等等。在 document.all数组里面，元素不分层次，是按照其在文档中出现的先后顺序，平行地罗列的。所以可以用数字索引来引用到任何一个元素。但比较常用的是用对象id来引用一个特定的对象，比如document.all["element"]这样。

但是，也只有ie核心的浏览器才支持。

所以，可以用if(document.all)来对浏览器进行判别。

if(document.all)
判断是否使用的是ie内核,现在行业中使用的浏览器内核有好几种,每种浏览器又有自己的标准,所以有些时候,必须先判断浏览器,然后根据浏览器给出相应的处理方式,document.all一般只在ie内核的浏览器(如ie,myie,tt)中出现,document.layers在ns浏览器中使用。 

而if(!document.all)与上面相反，表示如果没有使用ie内核就return一个值。



如何用JS弹出“有输入框并带有是、否、取消按钮”的对话框


<script type="text/javascript">
function diag()
{
    var str = prompt("随便写点儿啥吧","比如我叫啥");
    if (str) {
        alert("您刚输入的是：" + str);
    }
}
</script>




									

						取自“http://wiki.tomtalk.net/index.php?title=Javascript代码片段&oldid=4145”