2007-11-02

实用的JS工具类（二）——JS动态加载、密码强度提示、高亮度元素

关键字: ajax js动态加载 密码强度提示 高亮度元素

    这次提供三个一起，呵呵，分别是：密码强度检测、高亮度指定元素、JS动态加载~~

js 代码
  1. /**-----------------------------------------------------------------------  
  2. * ----------------------------密码强度检测类-----------------------------  
  3. * -----------------------------------------------------------------------  
  4. */  
  5. function Password() {};   
  6. Password.check = function(/*string*/pwd, /*string*/tipsDivId) {   
  7.     var id = Password.getResult(pwd);   
  8.     var msg = ["密码过短", "密码强度差", "密码强度良好", "密码强度高"];   
  9.     var sty = [-45, -30, -15, 0];   
  10.     var col = ["#999999", "#66CC00"];   
  11.     var sWidth = 300, sHeight = 15;   
  12.       var Bobj = $(tipsDivId);   
  13.       if (!Bobj) return;   
  14.          
  15.       with (Bobj) {   
  16.           style.fontSize = "12px";   
  17.           style.width = sWidth + "px";   
  18.           style.height = sHeight + "px";   
  19.           style.lineHeight = sHeight + "px";   
  20.     }   
  21.     var html = "";   
  22.     for (var i = 0; i < msg.length; i ++) {   
  23.         var bg_color = (i <= id) ? col[1] : col[0];   
  24.         html += "" + bg_color + ";'>   ";   
  25.     }   
  26.     Bobj.innerHTML = html;   
  27.     Bobj.title = msg[id];   
  28. };   
  29. Password.getResult = function(/*string*/pwd) {   
  30.     if (pwd.length < 6) return 0;   
  31.     var ls = 0;   
  32.     if (pwd.match(/[a-z]/ig)) ls++;   
  33.     if (pwd.match(/[0-9]/ig)) ls++;   
  34.     if (pwd.match(/(.[^a-z0-9])/ig)) ls++;   
  35.     if (pwd.length < 6 && ls > 0) ls--;   
  36.     return ls;   
  37. };   
  38.   
  39. /**-----------------------------------------------------------------------  
  40. * ----------------------------高亮度指定的元素---------------------------  
  41. * -----------------------------------------------------------------------  
  42. */  
  43. function HighLight() {};   
  44. HighLight.options = {   
  45.     id : null,   
  46.     className : null,   
  47.     interval : 255,   
  48.     times : 3000   
  49. };   
  50. HighLight.prototype = {   
  51.     exe : function(/*object*/options) {   
  52.         var _options = {};   
  53.         if (typeof(options) == 'object') {   
  54.             _options.id = options.id || HighLight.options.id;   
  55.             _options.className = options.className || HighLight.options.className;   
  56.             _options.interval = options.interval || HighLight.options.interval;   
  57.             _options.times = options.times || HighLight.options.times;   
  58.         }   
  59.         if (_options.id == null || !$(_options.id)) {   
  60.             alert('必须指定要高亮度显示的元素ID！');   
  61.             return false;   
  62.         } else if (!_options.className || typeof(_options.className) != 'string' || _options.className.strip() == '') {   
  63.             alert('请指定高亮度显示的CSS名称！');   
  64.             return false;   
  65.         }   
  66.         var elt = $(_options.id);   
  67.         if (elt.highLightHandle != null) return;   
  68.         elt.highLightHandle = setInterval(function() {   
  69.             Element.toggleClassName(elt, _options.className);   
  70.         }, _options.interval);   
  71.         window.setTimeout(function() {   
  72.             clearInterval(elt.highLightHandle);   
  73.             Element.removeClassName(_options.className);   
  74.             elt.removeAttribute('highLightHandle');   
  75.         }, _options.times);   
  76.         return true;   
  77.     }   
  78. };   
  79.   
  80. /**-----------------------------------------------------------------------  
  81. * ----------------------------Js动态加载类-------------------------------  
  82. * ---注意使用时必须保证被加载的JS文件是使用UTF-8保存，否则会出现中文乱码！  
  83. * -----------------------------------------------------------------------  
  84. */  
  85. function JsLoader()    {};   
  86. JsLoader.loaded = [];   
  87. JsLoader.prototype = {   
  88.     _path : null, // 要加载的JS的路径   
  89.     _head : null, // 文档对象的head头对象   
  90.     /**  
  91.      * 主要调用方法.  
  92.      */  
  93.     require : function(/*String*/jsPath, /*function*/callback) {   
  94.         if (!this._check(jsPath)) return false;   
  95.         if (this._isload(jsPath)) return true;   
  96.         this._ajaxLoad(callback);   
  97.         return true;   
  98.     },   
  99.     load : function(/*String*/jsPath, /*function*/callback) {   
  100.         return this.require(jsPath, callback);   
  101.     },   
  102.     _check : function(jsPath) {   
  103.         if (!jsPath) {   
  104.             alert('请指定要加载的JS路径！');return false;   
  105.         }   
  106.         var head = document.getElementsByTagName('head');   
  107.         if (!head || head.length < 1) {   
  108.             alert('文档对象document必须有HEAD头！');return false;   
  109.         }   
  110.         this._path = jsPath;   
  111.         this._head = head[0];   
  112.         return true;   
  113.     },   
  114.     _isload : function(jsPath) {   
  115.         for (var i = 0; i < JsLoader.loaded.length; i ++) {   
  116.             if (JsLoader.loaded[i].toLowerCase() == jsPath.toLowerCase()) return true;   
  117.         }   
  118.         JsLoader.loaded[JsLoader.loaded.length] = jsPath;   
  119.         return false;   
  120.     },   
  121.     _ajaxLoad : function(callback) {   
  122.         var head = this._head;   
  123.         base.request(this._path, function(xmlHttp, error) {   
  124.             var script = document.createElement('script');   
  125.             script.type = "text/javascript";   
  126.             script.text = xmlHttp.responseText;   
  127.             head.appendChild(script);   
  128.             if (!callback) return;   
  129.             try {   
  130.                 if (typeof(callback) == 'function')  callback();   
  131.                 else eval(callback);   
  132.             } catch (ex) {alert(ex.message);};   
  133.         });   
  134.     }   
  135. };  
评论
ferreousbox 2008-03-30
呵呵，base.request是我的一个ajax请求，是基于prototype.js的，这个是一个实用方法，可以自己写的，我写的一个实用类中的这个方法如下： 
	request : function(/*string*/_url, /*function*/onSuccess, /*string*/paras, /*string*/_method) {
		new Ajax.Request(
			_url,
			{
				method : !_method ? 'POST' : _method,
				evalScripts : true,
				parameters : !paras ? '' : paras,
				onComplete : onSuccess
			}
		);
	},
faichan 2008-03-13
wiwika 写道
123行：
base.request(this._path, function(xmlHttp, error)
base没有定义啊？

不行的。。。。。
wiwika 2008-03-06
123行：
base.request(this._path, function(xmlHttp, error)
base没有定义啊？
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

ferreousbox
搜索本博客
最近加入圈子
存档
最新评论