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

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

    博客分类:
  • AJAX
阅读更多

    这次提供三个一起,呵呵,分别是:密码强度检测、高亮度指定元素、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 != nullreturn;   
  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. };  
分享到:
评论
3 楼 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
			}
		);
	},
2 楼 faichan 2008-03-13  
wiwika 写道
123行:
base.request(this._path, function(xmlHttp, error)
base没有定义啊?

不行的。。。。。
1 楼 wiwika 2008-03-06  
123行:
base.request(this._path, function(xmlHttp, error)
base没有定义啊?

相关推荐

    jsTree 很好用的动态加载数

    动态加载是 jsTree 的核心特性之一,它允许在用户滚动或展开树节点时按需加载数据,而不是一次性加载所有数据。这种机制对于处理大量数据特别有用,因为它减少了初始页面加载时间,提高了用户体验。通过设置适当的...

    利用JavaScript实现图片标注——SearchMapIdentityTask

    首先,我们要理解JavaScript的基本语法和DOM操作,因为图片标注涉及到在网页上动态创建和修改元素。JavaScript是前端开发的核心语言,它允许我们与HTML和CSS交互,实现动态效果和用户交互。DOM(Document Object ...

    JS 动态树 异步加载树 xloadtree WebFXLoadTree

    总之,JS动态树和WebFXLoadTree是JavaScript开发中用于构建高效、可交互的异步加载树形结构的工具,它们通过异步加载策略优化了大型数据集的显示,提高了网页性能,为用户提供更佳的浏览体验。了解并掌握这类技术...

    jquery 检测密码强度插件

    本篇文章将深入探讨一个重要的jQuery插件——用于检测密码强度的插件,这对于创建安全的Web应用至关重要。随着网络安全的日益重要,用户密码的强度成为了一道防线,有效的密码强度检测能帮助用户创建更难破解的密码...

    javascript小工具之——cookie操作

    这篇博客“javascript小工具之——cookie操作”很可能会探讨如何利用JavaScript进行有效的Cookie操作。 Cookie是由Web服务器发送到用户的浏览器并存储在本地的小型文本文件。它们由键值对组成,可以设置过期时间,...

    微信小程序——[小工具类]XCX-scaffold-master(截图+源码).zip

    微信小程序——[小工具类]XCX-scaffold-master(截图+源码).zip 微信小程序——[小工具类]XCX-scaffold-master(截图+源码).zip 微信小程序——[小工具类]XCX-scaffold-master(截图+源码).zip 微信小程序——[小...

    Js密码强度验证

    可以使用CSS类和JavaScript来动态更改元素的样式。 5. **反馈提示**:除了颜色变化外,还可以提供文字反馈,告知用户密码为何被评为弱、中或强,以及如何提升其安全性。 6. **异步验证**:在某些情况下,你可能还...

    leaflet js工具类(绘制点、线、面、文本、高亮、地图监听、地图加载)

    leaflet工具类,绘制点、线、面、文本、高亮、地图监听、地图加载、事件机制

    并发编程——并发工具类.pdf

    ### 并发编程——并发工具类 #### 知识点概述 并发编程是Java编程中的高级主题,主要目的是为了让程序能够充分利用多核CPU的优势,提高程序的执行效率。并发工具类则是Java中用于支持多线程协作和同步控制的一系列...

    three.js——js3d技术游戏开发

    【标题】:“three.js——js3D技术游戏开发” 这篇博客主要探讨了使用three.js库进行JavaScript 3D游戏开发的技术细节。three.js是WebGL的一个强大框架,它简化了在浏览器中创建复杂的3D场景和交互式应用程序的过程...

    安卓Android源码——带密码登陆的密码保险箱.zip

    - 密码复杂性:可以设置密码复杂性规则,如必须包含数字、大小写字母等,确保密码强度。 3. 加密与解密: - 数据加密:在存储用户密码之前,必须先加密。常见的加密算法有AES(高级加密标准)、RSA等。AES适用于...

    网页模板——javascript+cta.js插件实现的轻量级Modal模态框效果源码.zip

    本资源提供的"网页模板——javascript+cta.js插件实现的轻量级Modal模态框效果源码.zip",就是一套基于JavaScript和cta.js插件创建的轻量级模态框实现方案。 首先,JavaScript是Web开发中的基础脚本语言,用于增加...

    IOS应用源码——圆形箭头的加载组件.zip

    在iOS应用开发中,UI设计和用户体验是至关重要的部分,其中加载组件是用户界面不可或缺的元素,用于指示数据正在加载或处理中。本资源“IOS应用源码——圆形箭头的加载组件.zip”提供了一个特别设计的加载组件,它以...

    arcgis api for js定制开发加载shp以及json.zip

    可以使用在线工具或本地库,如shapefile-js,将SH数据转换成JavaScript友好的格式。 2. 在JavaScript代码中,使用ArcGIS API的`esri/geometry/Geometry`类解析GeoJSON数据。 3. 创建`esri/Graphic`对象,将解析后的...

    自己写的一个动态从后台数据库加载Ext.tree的json数据工具类

    总之,这个动态加载Ext.tree的JSON数据工具类是解决前端与后端数据交互问题的一个实用方案,通过合理的编程技巧,可以实现高效、流畅的用户体验。在开发过程中,理解并掌握这种数据加载机制对于提升Web应用性能至关...

    实用工具——薪酬管理办法.doc

    实用工具——薪酬管理办法.doc

    js函数库——打包上传

    "js函数库——打包上传"这个主题涉及到的主要是如何整理、打包和上传JavaScript库的过程,这在分享或部署项目时尤为重要。 首先,我们来了解JavaScript函数库的作用。函数库通常包含各种功能模块,如DOM操作、动画...

    密码强度插件Power PWChecker.zip

    【密码强度插件Power PWChecker】是一款用于提升用户密码安全性的工具,主要应用于网页或应用程序中,以实时评估用户输入的密码强度。该插件基于JavaScript(JS)编写,结合了CSS样式,使得界面效果更加友好且功能...

    jQuery密码强度智能检测表单.zip

    **jQuery密码强度智能检测表单** 是一个基于流行的JavaScript库jQuery设计的前端验证工具,用于帮助用户创建更安全的密码。这个工具通过实时评估输入的密码,并根据其复杂度将其分为弱、中、强三个等级,以此来提高...

Global site tag (gtag.js) - Google Analytics