`
ferreousbox
  • 浏览: 287498 次
  • 性别: 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没有定义啊?

相关推荐

    javascript实现的密码强度测试

    在网络安全日益重要的今天,密码强度测试是确保用户创建强密码的重要工具。JavaScript可以方便地实现在客户端进行密码强度检测,为用户提供即时反馈,帮助他们创建更安全的账户。 实现JavaScript密码强度测试的基本...

    JS 动态树 异步加载树 xloadtree WebFXLoadTree

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

    javascript小工具之——cookie操作

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

    JavaScript动态网页开发详解——源文件

    在"JavaScript动态网页开发详解——源文件"中,我们可以深入学习到JavaScript在网页开发中的应用技巧。此资料可能包含了JQUERY的官方实例全集,jQuery是一个高效、简洁且富有创造性的JavaScript库,它极大地简化了...

    微信小程序——[小工具类]查拼音(截图+源码).zip

    微信小程序——[小工具类]查拼音(截图+源码).zip 微信小程序——[小工具类]查拼音(截图+源码).zip 微信小程序——[小工具类]查拼音(截图+源码).zip 微信小程序——[小工具类]查拼音(截图+源码).zip 微信小...

    Js密码强度验证

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

    动态元素周期表 js 高级特效

    在IT行业中,JavaScript(简称js)是一种广泛使用的前端编程语言,尤其在网页交互效果和动态内容展示方面表现突出。本文将深入探讨如何利用JavaScript实现一个动态元素周期表的高级特效。 首先,我们要理解元素周期...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    JSTree作为一个强大且灵活的JavaScript树形菜单组件,为开发者提供了解决大数据量加载问题的有效工具。其高效、易用和可扩展的特性,使其在各种Web应用中广泛应用,无论是企业级后台管理界面,还是用户友好的前端...

    Java语言-动态编译代码并热加载类

    在Java编程中,动态编译代码并热加载类是一项重要的技术,它允许程序在运行时修改或添加新的类,而无需重启应用。这种能力对于快速迭代开发、调试和性能优化非常有用。本主题将深入探讨Java中的动态编译与热加载机制...

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

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

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

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

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

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

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

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

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

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

    JS获取元素多层嵌套思路详解

    如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有...元素多层嵌套,JS获取问题&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;span&gt;span &lt;span&gt;span &lt;span&gt;1 &lt;spa

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

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

    <<项目架构那点儿事>>——工具类,你喜欢你就拿去

    《项目架构那点儿事》——工具类,你喜欢你就拿去 在软件开发中,工具类是程序员们常用的一种代码组织形式,它们通常包含了各种实用功能,可以极大地提高我们的工作效率。这篇博客将探讨如何有效地利用和设计工具类...

    java常用工具类打包下载

    J2EE常用工具类汇总 J2EE常用工具类—Value Object工具类 J2EE常用工具类—Json工具 J2EE常用工具类—Jdbc操作 J2EE常用工具类—Hibernate操作 J2EE常用工具类—Cookie操作 ...J2EE常用工具类——字符串工具类

    js函数库——打包上传

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

    密码强度插件Power PWChecker.zip

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

Global site tag (gtag.js) - Google Analytics