支付密码的效果

来源：互联网发布：实用网站知乎编辑：程序博客网时间：2024/05/01 20:10
<!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>
阅读全文
0 0