HTML+CSS+JS简单实现支付宝付款界面效果

时间：2017-08-19 20:11:52 阅读：922 评论：0 收藏：0 [点我收藏+]

标签：htm func color bst height ack 界面 max oct

HTML+JS部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pay</title>
<link rel="stylesheet" type="text/css" href="pay.css">
<script>
    var password="";
    function clean(){
        if(password.length>0){
          password=password.substr(0,password.length-1);
        }
        for(var i=5;i>=0;i--){
        var pwd=document.form.p[i];
        if(pwd.value!=""){
          pwd.value="";
          break;
        }
      }
    }
    function put(m){
      for(var i=0;i<6;i++){
        var pwd=document.form.p[i];
        if(pwd.value==""){
          pwd.value=m;
          password+=m;
          break;
        }
      }
      if(document.form.p[5].value!=""){
        alert(password);
      }
    }
</script>
</head>
<body>
  <div class="box">
    <div class="logo">
      <img src="1.jpg" class="log"/>
    </div>
    <div class="pay">
      <div class="top">请输入支付密码</div>
      <img src="close.jpg" class="close"/>
      <div class="in">
        <div class="pwd">
        <form name="form">
          <input name="p" type="password" maxlength="1" class="left" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,‘‘);}).call(this)"/>
          <input name="p" type="password" maxlength="1" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,‘‘);}).call(this)"/>
          <input name="p" type="password" maxlength="1" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,‘‘);}).call(this)"/>
          <input name="p" type="password" maxlength="1" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,‘‘);}).call(this)"/>
          <input name="p" type="password" maxlength="1" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,‘‘);}).call(this)"/>
          <input name="p" type="password" maxlength="1" class="right" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,‘‘);}).call(this)"/>
        </form>
          <font style="color:blue;margin-left:186px;line-height: 45px;">忘记密码？</font>
        </div>
      </div>
      <div class="key">
        <table>
            <tr>
              <td onclick="put(1);">1</td>
              <td onclick="put(2);">2</td>
              <td onclick="put(3);">3</td>
            </tr>
            <tr>
              <td onclick="put(4);">4</td>
              <td onclick="put(5);">5</td>
              <td onclick="put(6);">6</td>
            </tr>
            <tr>
              <td onclick="put(7);">7</td>
              <td onclick="put(8);">8</td>
              <td onclick="put(9);">9</td>
            </tr>
            <tr>
              <td style="background: RGB(230,230,230);"></td>
              <td onclick="put(0);">0</td>
              <td style="background: RGB(230,230,230);" onclick="clean();">
                <img src="back.jpg" class="back">
              </td>
            </tr>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

CSS部分

body{
  background: #333;
}
.box{
  width:660px;
  height: 425px;
  background:#fff;
  margin:30px auto;
  border-radius:10px;
}
.logo{
  width:320px;
  height: 325px;
  margin:50px auto;
  position: absolute;
  border-radius:10px;
}
.log{
  width:300px;
  height: 310px;
  position: absolute;
  margin:10px 10px;
  border-radius:10px;
}
.pay{
  width:320px;
  height: 375px;
  background:#fff;
  position: absolute;
  margin:25px 320px;
}
.top{
  width:320px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background:RGB(247,246,245);
  border-bottom: 1px solid RGB(230,230,230);
}
.close{
  width:25px;
  height:25px;
  float: left;
  margin:-35px 10px;
}
.close:hover{
  width:27px;
  height:27px;
}
.in{
  width:320px;
  height: 130px;
  background:RGB(247,246,245);
}
.pwd{
  width:277px;
  height:46.5px;
  border-radius: 6px;
 
  position: absolute;
  margin:20px 27px;
}
input{
  width:43px;
  height:43px;
  position: relative;
  margin:-1px -3px;
  background:RGB(245,245,245);
  border:0.5px solid RGB(230,230,230);
  border-top:0.5px solid RGB(200,200,200);
  border-bottom:0.5px solid RGB(200,200,200);
  text-align: center;
  line-height: 43px;
}
.left{
  border-left:0.5px solid RGB(200,200,200);
  border-radius: 3px 0 0 3px;
}
.right{
  border-right:0.5px solid RGB(200,200,200);
  border-radius: 0 3px 3px 0;
}

.key{
  width:320px;
  height: 200px;
}
table{
  width:320px;
  height: 200px;
  border-collapse: collapse;   
  border-spacing: 0px;
  border:1px solid RGB(230,230,230);
}
td{
  width: 106.3px;
  height: 45px;
  text-align: center;
  border:1px solid RGB(230,230,230);
  font-size:15px;
  color:#000;
}
td:hover{
  background:RGB(247,246,245);
}
.back{
  width:40px;
  height: 30px;
}
.back:hover{
  width:45px;
  height: 35px;
}

图片资源

技术分享