支付密码输入效果-优快云博客

本文链接：https://blog.youkuaiyun.com/jiangqing993/article/details/77367906

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.goodsCode h1{
				font-size: 30px;
				font-weight: 400;
				text-align: center;
				color: #fff;
				margin-bottom:30px;
			}
			.goodsCode{
				padding-top:40px;
				width:100%;
				height:220px;
				background: #586897;
				text-align: center;
			}
			.goodsCode input{
				margin: 0;
			    padding: 0;
			    width: 1px;
			    opacity: 0;
			    height: 1px;
			    border: none;
			}
			.goodsCode label{
				display: block;
			}
			.goodsCode ul{
				background:#586897;
			    display: inline-block;
			    position: relative;
			}
			.goodsCode ul li{
				display: inline-block;
			    width: 60px;
			    height: 80px;
			    background:#fff;
			    font-size: 40px;
			    font-weight: 700;
			    text-align: center;
			    line-height: 80px;
			    margin-right:10px;
			    vertical-align: middle;
			    overflow: hidden;
			    color:#586897;
			}
		</style>
	</head>
	<body>
		<div class="goodsCode">
			<h1>支付密码效果</h1>
			<label for="ipt">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</label>
			<input type="tel" id="ipt" maxlength="6">
		</div>
		
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
		<script>
			$('.goodsCode input').on('input', function (e){
				var numLen = 6;
				var pw = $('.goodsCode input').val();
				var list = $('li');
				for(var i=0; i<numLen; i++){
					if(pw[i]){
						$(list[i]).text(pw[i]);
					}else{
						$(list[i]).text('');
					}
				}
			});
		</script>
	</body>
</html>

支付密码的效果