Jquery+javascript動(dòng)態(tài)生成支付網(wǎng)頁(yè)數(shù)字鍵盤(pán)
制作網(wǎng)頁(yè)支付界面的時(shí)候，數(shù)字鍵盤(pán)適配不同的屏幕寬高比是一個(gè)很麻煩的事，所以我制作了一個(gè)根據(jù)屏幕寬高動(dòng)態(tài)生成的數(shù)字鍵盤(pán)
運(yùn)行截圖：
實(shí)現(xiàn)代碼
html:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <link rel="stylesheet" href="{{你的css文件路徑}}" > <title>動(dòng)態(tài)數(shù)字鍵盤(pán)</title></head><body> <div class="pay-top"> <img class="lklogo" src="img/lianke.png"> <div class="pay-shop-info"> <span class="shop-name">付款給：{{付款對(duì)象名}}</span> </div> <div class="paymoneylogo"> <span>￥</span> </div> <label class="inputlabel" id="paymoney" type="text"></label> </div> <div class="payinfo"> <table cellspacing="0" cellpadding="0"> <tr> <td class="paynum">1</td> <td class="paynum">2</td> <td class="paynum">3</td> <td id="pay-return"> <div class="keybord-return"></div> </td> </tr> <tr> <td class="paynum">4</td> <td class="paynum">5</td> <td class="paynum">6</td> <td rowspan="3" class="pay"> <a href="javascript:return false;" > <div class="a-pay"> <p>確認(rèn)</p> <p>支付</p> </div> </a> </td> </tr> <tr> <td class="paynum">7</td> <td class="paynum">8</td> <td class="paynum">9</td> </tr> <tr> <td id="pay-zero" colspan="2" class="payzero">0</td> <td id="pay-float">.</td> </tr> </table> </div></body><script src="./js/jquery.js"></script><script type="text/javascript"> $(function () { $(".payinfo").slideDown(); var $paymoney = $("#paymoney"); $("#paymoney").focus(function () { $(".payinfo").slideDown(); document.activeElement.blur(); }); $(".paynum").each(function () { $(this).click(function () { if (($paymoney.text()).indexOf(".") != -1 && ($paymoney.text()).substring(($paymoney.text()).indexOf(".") + 1, ($paymoney.text()).length).length == 2) { return; } if ($.trim($paymoney.text()) == "0") { return; } if (parseInt($paymoney.text()) > 10000 && $paymoney.text().indexOf(".") == -1) { return; } $paymoney.text($paymoney.text() + $(this).text()); }); }); $("#pay-return").click(function () { $paymoney.text(($paymoney.text()).substring(0, ($paymoney.text()).length - 1)); if (!$paymoney.text()) { $('.pay').addClass('pay-disabled').find('a').attr('href', 'javascript:return false;'); } }); $("#pay-zero").click(function () { if (($paymoney.text()).indexOf(".") != -1 && ($paymoney.text()).substring(($paymoney.text()).indexOf(".") + 1, ($paymoney.text()).length).length == 2) { return; } if ($.trim($paymoney.text()) == "0") { return; } if (parseInt($paymoney.text()) > 10000 && $paymoney.text().indexOf(".") == -1) { return; } $paymoney.text($paymoney.text() + $(this).text()); }); $("#pay-float").click(function () { if ($.trim($paymoney.text()) == "") { return; } if (($paymoney.text()).indexOf(".") != -1) { return; } if (($paymoney.text()).indexOf(".") != -1) { return; } $paymoney.text($paymoney.text() + $(this).text()); }); $('.pay').click(function () { alert("支付金額為"+$paymoney.text()) }); })</script> <!--自適應(yīng)布局--><script> (function () { var designW = 750; //設(shè)計(jì)稿寬 var font_rate = 100; //適配 document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px"; document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px"; //監(jiān)測(cè)窗口大小變化 window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () { document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px"; document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px"; }, false); })();</script></html> |
css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
@CHARSET "UTF-8";html,body{ background-color:#fff;}.pay-top{ position: absolute; width: 100%; height:60%; background: #fff;}.pay-shop-info { position: absolute; width: 90%; left:5%; text-align: right; top:3.4rem; font-size:0.3rem ; }.paymoneylogo { position: absolute; width: 90%; left:5%; top:4rem; height: 1.3rem; border-bottom: 0.02rem solid #bfbfbf; -webkit-border-radius: 0.02rem; -moz-border-radius: 0.02rem; border-radius: 0.02rem; background: #fff;}.inputlabel{ position: absolute; width: 90%; left:5%; top:4rem; height: 1.3rem; text-align: right;}.lklogo{ position: absolute; height: 1.2rem; width: 50%; left:25%; top:0.8rem;}.payinfo{ display:none;}.payinfo .paynum { font-size: 0.6rem; color: #424857;}.payinfo .payzero { font-size: 0.6rem; color: #424857;}table{ width:100%; height:50%; position:absolute; bottom:0; background-color:white; background-top:none;}table tr td{ text-align:center; width: 1.88rem; height: 1.26rem; font-family: "Microsoft YaHei"; font-weight: normal; border-right:1px solid #D9D9D9; border-top:1px solid #D9D9D9;}table tr td:active{ background-color:#ECECEC;}.keybord-return{ width: 1.88rem; height: 1.26rem; background:url(../img/keybord_return.png) no-repeat; background-size: 50% 50%; background-position: center;}.pay{ color:#fff; font-size:0.4rem; background-color:#0259a1; }.pay:active{ background-color: #004198;}.pay a{ display: block; position: relative; width: 100%; height: 100%; color: #fff; text-decoration: none; }.a-pay { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}.pay-disabled { background-color: #0259a1;} |
附帶上退格符，將其放項(xiàng)目的img文件中，否則數(shù)字鍵盤(pán)退格符無(wú)法顯示：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/botellei/article/details/111444970
