html文件
form name="forms" onsubmit="return checkreg()" action="homepage.html" method="post" class="login-cont">
<ul>
<li><input type="tel" placeholder="请输入您的手机号" ></li>
<li><span id="box"><input type="password" value="523654" name="password"></span>
<span id="click"><A href="javascript:ps()" class="iconfont icon-biyan"></A></span></li>
</ul>
<a href="javascript:;" class="button text-center block">登 录</a>
<a href="javascript:;" class="text-center block font-color">忘记密码？</a>
<p class="text-center">没有账号？ <a href="javascript:;" class="font-color" >立即注册</a></p>
</form>
css文件
.login-cont{ margin: 0 2rem; line-height: 4rem;}
.login-cont li{ border-bottom: 1px solid #ebebeb; height: 3rem; padding: 1rem; position: relative;}
.login-cont li input{ border: none; line-height: 4rem; width: 100%; outline: 0;}
.login-cont{ margin: 0 2rem; line-height: 4rem;}
#click{ position: absolute; right: 0; top: 50%; margin-top: 0.5rem; transform: translate(0,-50%)}
.button{background: #10a78e; color: #fff; border-radius:2rem; height: 4rem; line-height: 4rem; font-size: 1.6rem; margin-top: 4rem;}
script文件
<script type="text/javascript">
function ps(){
if (this.forms.password.type="password")
box.innerHTML="<input type=\"html\" name=\"password\" size=\"20\" value="+this.forms.password.value+">";
click.innerHTML="<a href=\"javascript:txt()\" class=\"iconfont icon-open-eye\"></a>"}
function txt(){
if (this.forms.password.type="text")
box.innerHTML="<input type=\"password\" name=\"password\" size=\"20\" value="+this.forms.password.value+">";
click.innerHTML="<a href=\"javascript:ps()\" class=\"iconfont icon-biyan\"></a>"}
</script>
