仿邮箱密码色条随输入长度变化

时间：2013-05-23 20:45 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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.codesocang.com/" target="_blank">源码搜藏</a></p>
</body>
</html>

仿邮箱密码色条随输入长度变化

网页特效