密码强度检测效果实现原理与代码_javascript技巧

复制代码 代码如下:

<html>
<head>
<title>密码强度检测效果</title>
<script type="text/javascript">
function chkpwd(obj){
var t=obj.value;
var id=getResult(t);
//定义对应的消息提示
var msg=new Array(4);
msg[0]="密码过短。";
msg[1]="密码强度差。";
msg[2]="密码强度良好。";
msg[3]="密码强度高。";
var sty=new Array(4);
sty[0]=-45;
sty[1]=-30;
sty[2]=-15;
sty[3]=0;
var col = new Array(4);
col[0] = "gray";
col[1] = "#50AEDD";
col[2] = "#FF8213";
col[3] = "green";
//设置显示效果
var bImg="yun_qi_img/pwdlen_dSIPeEGQWxfO.gif" //一张显示用的图片
var sWidth=300;
var sHeight=15;
var Bobj=document.getElementById("chkResult");
Bobj.style.fontSize="12px";
Bobj.style.color=col[id];
Bobj.style.width=sWidth + "px";
Bobj.style.height=sHeight + "px";
Bobj.style.lineHeight=sHeight + "px";
Bobj.style.background="url(" + bImg + ") no-repeat left " + sty[id] + "px";
Bobj.style.textIndent="20px";
Bobj.innerHTML="检测提示:" + msg[id];
}
//定义检测函数,返回0/1/2/3分别代表无效/差/一般/强
function getResult(s){
if(s.length < 4){
return 0;
}
var ls = 0;
if (s.match(/[a-z]/ig)){
ls++;
}
if (s.match(/[0-9]/ig)){
ls++;
}
if (s.match(/(.[^a-z0-9])/ig)){
ls++;
}
if (s.length < 6 && ls > 0){
ls--;
}
return ls
}
</script>
</head>
<body>
告诉你一个应有尽有的网页特效网址:http://www.jb51.net/list/list_43_1.htm
<form name="form1">
<label for="pwd">用户密码</label>
<input type="password" name="pwd" onKeyUp="chkpwd(this)" />
<div id="chkResult"></div>
</form>
</body>
</html>

时间: 2025-01-25 09:06:47

密码强度检测效果实现原理与代码_javascript技巧的相关文章

DWR实现模拟Google搜索效果实现原理及代码_javascript技巧

复制代码 代码如下: <!-- 模拟google搜索 --> <script type="text/javascript"> /********************************可配置选项********************************/ // 被选中的相似关键字背景颜色 var selectedBgColor = "#CCCCCC"; // 未被选中的相似关键字背景颜色 var unselectedBgColo

js实现随屏幕滚动的带缓冲效果的右下角广告代码_javascript技巧

本文实例讲述了js实现随屏幕滚动的带缓冲效果的右下角广告代码.分享给大家供大家参考.具体如下: 一个随屏幕自动滚动的右下角广告代码,这里请注意几个参数: id 你要滚动的内容的id r 放在左边还是右边 默认是右边 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 f 1表示固定 不写或者0表示滚动(ie6固定无效) 是不是很实用呢,这个版本经过作者二次修正,兼容性还不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-

JS实现仿FLASH效果的竖排导航代码_javascript技巧

本文实例讲述了JS实现仿FLASH效果的竖排导航代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的Flash效果的导航菜单,竖向排列,兼容性好,由JavaScript妙味课堂的朋友编写,欢迎测试. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-flash-style-v-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

JS实现网页右侧带动画效果的伸缩窗口代码_javascript技巧

本文实例讲述了JS实现网页右侧带动画效果的伸缩窗口代码.分享给大家供大家参考,具体如下: 这是一款带缓冲效果的网页右侧固定伸缩窗口,点击带颜色的区域,浮动的层窗口就会伸缩出来,再次点击则缩进去.无jQuery,完全JavaScript实现的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-dh-dlg-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

分享网页检测摇一摇实例代码_javascript技巧

废话不多说了,直接给大家贴代码了,具体代码如下所示: var Shaker = function(f){ // 摇一摇: 检测到3次摇动算一次摇一摇, 摇动后调用处理函数, 不再检测摇动 // f 摇动后的回调 this.callback = f; this.status = 0; // 0: 侦听未开始 1: 侦听开始 this.speed = 15; this.lastX = this.lastY = this.lastZ = 0; this.num = 0; // 检测触发次数 this.

JS实现Fisheye效果动感放大菜单代码_javascript技巧

本文实例讲述了JS实现Fisheye效果动感放大菜单代码.分享给大家供大家参考,具体如下: 这款Fisheye Menu,是采用JS+CSS+XHTML实现的动感放大菜单,放到图标上的时候,图标会被放大,整个菜单有缓冲弹簧的效果,学jQuery的朋友见的比较多,不过本款没有用到jQuery,效果却同样精彩. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fisheye-style-menu-demo/ 具体代码如下: <!DOCTYPE

通过JS自动隐藏手机浏览器的地址栏实现原理与代码_javascript技巧

大家通过手机自带浏览器打开百度.淘宝,在首页加载完毕后,会自动隐藏页面上方的地址栏,加之这些网站针对手机浏览器做了优化,乍看之下,还真难区分这是WEB APP还是Native App,如下左侧图片为通过safari打开淘宝网的首页,要不是因为底下的浏览器工具栏,还真像Native App.实际上它是有地址的,向下拖动就会看到地址栏,如下右侧图片. 如何才能实现将浏览器地址栏隐藏呢?百度一下,有很多资料,很简单,主要利用window.scrollTo()方法,将当前页面在屏幕上向上滚动,造成地址栏

JavaScript实现自己的DOM选择器原理及代码_javascript技巧

解释器模式(Interpreter):定义一种语法格式,通过程序解释执行它并完成相应的任务.在前端编程场景中可以应用解释器模式来解释CSS选择符实现DOM元素的选择. 开放封闭原则:面向对象中的开放封闭原则是类或模块应该对扩展开放对修改封闭,在这个dom选择器中实现id选择器,元素选择器,类选择器,如果以后需要属性选择器的话定义一个属性选择器实现相应的方法,同时在简单工厂中增加相应的创建属性选择器对象分支即可. 匹配原理:浏览器在匹配CSS选择符时是按照从右到左匹配的,所以实现自己的DOM选择器

JS小功能(setInterval实现图片效果显示时间)实例代码_javascript技巧

效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <script type="text/javascript">        function toDou(n) {            if (n < 10) {                return '0' + n;            }            else {