H5简单的密码框实现

今天写了一个简单的输入密码，或者输入验证码的效果，如果可以谈，你完全可以一个输入框就搞定了。
先看效果图：

然后上代码：
HTML

<div>
			<input type="text" id="pwd" oninput="getpwd()">
			<div class="num" id="nums">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>

CSS：

*{
				margin: 0;
				padding: 0;
			}
			.num{
				font-size: 0;
			}
			.num span{
				display: inline-block;
				width: 30px;
				font-size: 18px;
				height: 30px;
				text-align: center;
				border: 1px solid red;
				vertical-align: middle;
				line-height: 30px;
				margin: 0 10px;
			}
			input{
				position: absolute;
				top: 0;
				opacity: 0;
			}

JS:

<script type="text/javascript">
		var nums = document.getElementById("nums"); // 获取到输入框的value值
		var pwd = document.getElementById("pwd"); //
		var num = document.getElementsByTagName("span");//获取到所有的span标签
		function getpwd (){
			var pwds = pwd.value; 
			console.log(pwd.value); //拿到input输入框的值
			if(pwds.length >= 7){
				console.log("超过位数了");
				var pwdss = pwds.slice(0,6)
				console.log(pwdss)
				return;
			}
			for(var j = 0; j<=num.length-1;j++){
				num[j].innerHTML = ""
			}
			for(var i = 0; i<=pwds.length-1;i++){
				console.log(pwds[i])
				num[i].innerHTML = pwds[i]
			}
		}
	</script>

思路：一个输入框，六个span标签，将输入框内的值显示在span内。