最近做項目時碰到一個需求，就是在移動端支付頁面點擊支付按鈕彈出一個支付鍵盤，類似於支付寶的那種。由於項目只是單純的手機網站，而並非app，所以這個功能得由前端來實現。話不多說，先上圖看看效果。 尼瑪，這不就是支付寶app那個支付鍵盤嗎？ 沒錯，咱們UI就是參照支付寶做的這個鍵盤。你可能會問，為什麼不 ...
最近做項目時碰到一個需求，就是在移動端支付頁面點擊支付按鈕彈出一個支付鍵盤，類似於支付寶的那種。由於項目只是單純的手機網站，而並非app，所以這個功能得由前端來實現。話不多說，先上圖看看效果。
尼瑪，這不就是支付寶app那個支付鍵盤嗎？ 沒錯，咱們UI就是參照支付寶做的這個鍵盤。你可能會問，為什麼不直接調用支付寶提供的支付介面呢。額，因為項目需要，這裡就不多解釋了。
我們先看一下實現後的效果圖
HTML部分
1 <!-- 支付鍵盤 --> 2 <divclass="pay-container"> 3 <divclass="pay-title"> 4 <spanclass="pay-title-remove">×</span> 5 輸入支付密碼 6 </div> 7 <divclass="pay-body"> 8 <divclass="input-container"> 9 <inputclass="input-item"type="password"readonly> 10 <inputclass="input-item"type="password"readonly> 11 <inputclass="input-item"type="password"readonly> 12 <inputclass="input-item"type="password"readonly> 13 <inputclass="input-item"type="password"readonly> 14 <inputclass="input-item"type="password"readonly> 15 </div> 16 <divclass="forgetPwd-container"> 17 <aclass="forgetPwd"href="">忘記密碼？</a> 18 </div> 19 <divclass="key-container"> 20 <divclass="key-item">1</div> 21 <divclass="key-item">2</div> 22 <divclass="key-item">3</div> 23 <divclass="key-item">4</div> 24 <divclass="key-item">5</div> 25 <divclass="key-item">6</div> 26 <divclass="key-item">7</div> 27 <divclass="key-item">8</div> 28 <divclass="key-item">9</div> 29 <divclass="key-item empty"></div> 30 <divclass="key-item">0</div> 31 <divclass="key-item remove"></div> 32 </div> 33 </div> 34 </div>
CSS部分
1 .pay-container{ width:7.5rem; height:8rem; background-color:#fbf9fb; position:fixed;z-index:999; overflow:hidden;display:none; } 2 /* .pay-container-show{transform: translate3d(0, -8.9rem, 0);transition: 0.5s ease;transform: translate3d(0, 0, 0); transition: 0.5s ease;} */ 3 .pay-title{ height:0.96rem; line-height:0.96rem; border-bottom:1pxsolid#b3afaf; text-align:center; color:#070707; 4 position:relative; font-size:0.36rem;} 5 .pay-title.pay-title-remove{ width:0.24rem; height:0.24rem; position:absolute; top:0.35rem; left:0.33rem; line-height:0.28rem; 6 font-size:0.45rem;} 7 .pay-body{ padding-top:0.56rem;position:relative; height:7rem; box-sizing:border-box;} 8 .pay-body.input-container{ width:6.74rem; height:0.93rem; border:1pxsolid#ebe8eb; overflow:hidden; border-radius:5px; 9 background-color:#fff; margin:0auto; display:flex;flex-direction:row;align-items:center; 10 flex-wrap:wrap; justify-content:center;align-content:center;} 11 .pay-body.input-container.input-item{ width:1.1rem; height:0.92rem; display:inline-block; margin:0; border-right:1pxsolid#ebe8eb; 12 text-align:center; line-height:0.92rem; border-radius:0; } 13 .pay-body.input-container.input-item:nth-last-child(1){ border-right:0;} 14 .pay-body.forgetPwd-container{width:6.74rem;margin:0.22remauto0; text-align:right;} 15 .pay-body.forgetPwd-container.forgetPwd{ color:#52bfff; font-size:0.24rem; } 16 .pay-body.key-container{ width:100%; height:4.56rem; position:absolute; bottom:0; display:flex;flex-direction:row;align-items:center; 17 flex-wrap:wrap; justify-content:center;align-content:center; } 18 .pay-body.key-container.key-item{ width:2.47rem; height:1.12rem; line-height:1.12rem; text-align:center; border-right:2pxsolid#f3f3f3; 19 border-top:2pxsolid#f3f3f3; font-size:0.66rem; color:#1e1d1f;background-color:#fff;} 20 .pay-body.key-container.key-item:nth-child(3), 21 .pay-body.key-container.key-item:nth-child(6), 22 .pay-body.key-container.key-item:nth-child(9), 23 .pay-body.key-container.key-item:nth-child(12){ border-right:0;} 24 .pay-body.key-container.key-item.remove,.pay-body.key-container.key-item.empty{ font-size:0.24rem;background-color:#e6e9f1;} 25 .pay-body.key-container.key-item.remove{ background:url('../images/pay-remove.png') centerno-repeat#e6e9f1; background-size:.52rem.32rem; } 26 .pay-body.key-container.selected{ background-color:#e4e8f4;}
核心JS部分
1 var arr = []; 2 var num =0; 3 4 //響應鍵盤事件 5 $('.key-item').on('touchstart', function () { 6 $(this).addClass('selected') 7 }) 8 $('.key-item').on('touchend', function () { 9 $(this).removeClass('selected') 10 }) 11 $('.key-item').on('click', function () { 12 var value =$(this).text(); 13 var inputItem =$('.layui-m-layercont .input-item'); 14 if (!$(this).hasClass('remove')) { 15 if (num <6) { 16 $(inputItem[num]).val(value); 17 if (num ==5) { 18 var arr = []; 19 for (var i =0; i < inputItem.length; i++) { 20 arr.push(inputItem[i].value) 21 } 22 arr =parseInt(arr.join('')); 23 if (arr !==123456) { 24 layer.open({ 25 content:'支付密碼錯誤請重新輸入！', 26 skin:'msg', 27 time:2//2秒後自動關閉 28 }); 29 } else { 30 layer.open({ 31 content:'輸入正確！', 32 skin:'msg', 33 time:2//2秒後自動關閉 34 }); 35 } 36 num++; 37 returnfalse; 38 } 39 num++; 40 } 41 } else { 42 if (num >0) { 43 num--; 44 $(inputItem[num]).val(''); 45 } 46 } 47 })
代碼就這麼多，也不複雜。可能寫的比較粗陋，但是效果能出來。
