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>