来自snipplr的10个最实用的javascript代码片段

作者：Ei Sabai
翻译：Terry li - GBin1.com
英文： 10 most useful Javascript snippets from snipplr

下面的代码片段来自snipplr，一个代码片段库。他们都是用纯javascript书写的，没有实用任何javascript类库，比如，jQuery，Mootools，或者Dojo。

1. Email验证 Source

function checkMail(email){
  var filter  = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
  if (filter.test(email)) {
    return true;
  }
  return false;
} 

 

2.多选框的选项开关 Source

     1

     2

     3


    

    

 

3. 图片预加载 Source

var images = new Array();

function preloadImages(){
    for (i=0; i < preloadImages.arguments.length; i++){
         images[i] = new Image();
        images[i].src = preloadImages.arguments[i];
    }
}

preloadImages("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");

 

4. javascript cookies设置 Source

/**
 * Sets a Cookie with the given name and value.
 *
 * name       Name of the cookie
 * value      Value of the cookie
 * [expires]  Expiration date of the cookie (default: end of current session)
 * [path]     Path where the cookie is valid (default: path of calling document)
 * [domain]   Domain where the cookie is valid
 *              (default: domain of calling document)
 * [secure]   Boolean value indicating if the cookie transmission requires a
 *              secure transmission
 */
function setCookie(name, value, expires, path, domain, secure) {
    document.cookie= name + "=" + escape(value) +
        ((expires) ? "; expires=" + expires.toGMTString() : "") +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        ((secure) ? "; secure" : "");
}

/**
 * Gets the value of the specified cookie.
 *
 * name  Name of the desired cookie.
 *
 * Returns a string containing value of specified cookie,
 *   or null if cookie does not exist.
 */
function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    } else {
        begin += 2;
    }
    var end = document.cookie.indexOf(";", begin);
    if (end == -1) {
        end = dc.length;
    }
    return unescape(dc.substring(begin + prefix.length, end));
}

/**
 * Deletes the specified cookie.
 *
 * name      name of the cookie
 * [path]    path of the cookie (must be same as path used to create cookie)
 * [domain]  domain of the cookie (must be same as domain used to create cookie)
 */
function deleteCookie(name, path, domain) {
    if (getCookie(name)) {
        document.cookie = name + "=" +
            ((path) ? "; path=" + path : "") +
            ((domain) ? "; domain=" + domain : "") +
            "; expires=Thu, 01-Jan-70 00:00:01 GMT";
    }
}

 

5. 下拉框排序 Source

function sortList(id) {
  var obj = document.getElementById("id");
  var values = new Array();
  for(var i = 0; i < obj.options.length; i++) {
    values.push(obj.options[i].innerHTML + "--xx--" + obj.options[i].value);
  }

  values = values.sort();

  for(var i = 0; i < values.length; i++) {
    valueArray = values[i].split('--xx--');
    obj.options[i].innerHTML = valueArray[0];
    obj.options[i].value = valueArray[1];
  }
}
function sortList(id) {
  var obj = document.getElementById("id");
  var values = new Array();
  for(var i = 0; i < obj.options.length; i++) {
    values.push(obj.options[i].innerHTML + "--xx--" + obj.options[i].value);
  }

  values = values.sort();

  for(var i = 0; i < values.length; i++) {
    valueArray = values[i].split('--xx--');
    obj.options[i].innerHTML = valueArray[0];
    obj.options[i].value = valueArray[1];
  }
}

function sortList(id) {
  var obj = document.getElementById("id");
  var values = new Array();
  for(var i = 0; i < obj.options.length; i++) {
    values.push(obj.options[i].innerHTML + "--xx--" + obj.options[i].value);
  }

  values = values.sort();

  for(var i = 0; i < values.length; i++) {
    valueArray = values[i].split('--xx--');
    obj.options[i].innerHTML = valueArray[0];
    obj.options[i].value = valueArray[1];
  }
} 

6. 检测浏览器是否支持HTML5 video Source

// Check if the browser understands the video element.
function understands_video() {
  return !!document.createElement('video').canPlayType; // boolean
}

if ( !understands_video() ) {
  // Must be older browser or IE.
  // Maybe do something like hide custom
  // HTML5 controls. Or whatever...
  videoControls.style.display = 'none';
}

7. 得到浏览器的viewport宽度和高度 Source

8. 由class名字取得对象元素 Source

/*
    Written by Jonathan Snook, http://www.snook.ca/jonathan
    Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && document.all)? document.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 
  
9. 重定向延迟 Source 
 
  
setTimeout( "window.location.href="http://walkerwines.com.au/'", 5*1000 );
 
  
10. iphone类型的方向变化效果 Source 
 
  
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);

function setOrientation() {
 var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
 var cl = document.body.className;
 cl = cl.replace(/portrait|landscape/, orient);
 document.body.className = cl;
}
 
  
 
 
  
原文出处：来自snipplr的10个最实用的javascript代码片段