密码安全程度进度条

最新推荐文章于 2021-12-09 18:13:45 发布

無脸男

最新推荐文章于 2021-12-09 18:13:45 发布

阅读量1k

点赞数

分类专栏： web 文章标签：表单

web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿邮箱密码色条随输入长度变化-懒人图库</title>
<style>
.len_box{width:205px;height:12px;margin-top:10px;border:solid #ccc 1px;}
.len_color{width:1%;background:#F00;height:12px;}
.text{width:200px;height:22px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(function(){
	$(".text").keyup(function(){
		var Max = 20;//input_maxlength
		$(".text").attr("maxlength",Max);
		var len = $(".text").val().length;
		var Width = (len/Max)*parseInt($(".len_box").css("width"));
		$(".len_color").css({"width":Width})
		if(Width<20){
			$(".len_color").css({"background":"#F00"})
		}else if(20<=Width && Width<50){
			$(".len_color").css({"background":"#F90"})
		}else if(Width>=50){
			$(".len_color").css({"background":"#6F3"})
		}
	})
	
})
</script>
</head>

<body>
<p>请先刷新页面，再输入字符查看效果：</p>
<p>
  <input type="text" class="text">
</p>
<div class="len_box"><div class="len_color"></div></div>
<p>感谢：<a href="mailto:wusong__1986@163.com">SD_night</a>　查找更多代码，请访问：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
</body>
</html>

無脸男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
密码安全程度进度条

仿邮箱密码色条随输入长度变化-懒人图库.len_box{width:205px;height:12px;margin-top:10px;border:solid #ccc 1px;}.len_color{width:1%;background:#F00;height:12px;}.text{width:200px;height:22px;}$(function(){ $(".te
复制链接

扫一扫