js制作支付倒计时页面
本文实例为大家分享了js支付倒计时页面制作代码，供大家参考，具体内容如下
（图一）
（图二）
（图三）
（图四）
实现目标
一、页面在图一时开始进行倒计时（可以点击取消订单按钮，支付页面消失）。
二、倒计时完毕，出现删除订单。
三、单击删除订单，弹出弹框，询问是否要真正删除订单。
四、单击确定，即可删除订单。
如上图所示效果展示，这里给出所有的源代码（如需运行，只需要修改EJS文件中引入的CSS路径和JS路径即可）.
这个页面其实是自己业余时间，写的东西。
但是里面涉及到，倒计时，弹框，以及字体图（可以参照“如何制作字体图”章节）的相关知识。
这里分享出来，希望大家能从中学到自己想要的知识。
代码很丑，但是基本效果都已经实现。
相关注释，会在代码后注释起来，方便参考。
JS代码
order_detail.js
|
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
|
/** * Created by mayouchen on 2016/10/20. */ $(function () { //加载完DOM的只执行函数 var intDiff = parseInt(60); //倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0;//时间默认值 if (intDiff > 0) { //计算相关的天，小时，还有分钟，以及秒 day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); } if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; $('#day_show').html(day + "天"); $('#hour_show').html('<s id="h"></s>' + hour + '时'); $('#minute_show').html('<s></s>' + minute + '分'); $('#second_show').html('<s></s>' + second + '秒'); intDiff--; }, 1000); //循环函数，是时钟运动起来 setInterval(function(){ if($('#minute_show').text() =='00分' && $('#second_show').text() =='00秒'){ $('.pay-immediately-count').remove(); $('.cancle-order').remove(); $('.del-order').show(); clearInterval(); } },1000) //下面三个是跳转链接，本来是在node工程里面的路由配置的，这里大家可以换成自己的链接 $("#dingdan").click(function () { location.href = "/hotel/order"; //这里跳转的是路由的路径 }); $("#mengdian").click(function () { location.href = "/hotel"; //这里跳转的是路由的路径 }); $(".set-detail").click(function () { location.href = "/hotel/detail"; //这里跳转的是路由的路径 }); //这里都是一些单击事件 /* 点击删除按钮*/ $('.del-order').click(function(){ $(".arrow_mask").show(); $(".cancel-order-dialog").show() }) /* 弹框的设置---取消键*/ $(".cancle-order-btn").click(function(){ $(".cancel-order-dialog").hide(); $(".arrow_mask").hide(); }); /* 弹框的设置---确定键*/ $(".certain-order").click(function(){ $(".section-first").remove(); $(".cancel-order-dialog").remove(); $(".arrow_mask").remove(); $(".footer").css({"position":"fixed"}); }); /* 弹框的设置---取消键*/ $(".cancle-order").click(function(){ $(".section-first").remove(); $(".footer").css({"position":"fixed"}); });} //执行上面的函数 $(function () { timer(intDiff); }); }); |
HTML页面
order_detail.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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"><meta content="" name="description"><meta content="" name="keywords"><meta content="eric.wu" name="author"><meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type"><meta property="qc:admins" /><meta content="telephone=no, address=no" name="format-detection"> <!--添加title前面的图片(这里换成你自己图片的路径即可)--><link rel="shortcut icon" href="/images/hotel/zc.png" type="image/x-icon" /> <!--页面初始化的样子（这个文件可以页面做初始化）--> <link href="/css/hotel/order_detail.css" rel="stylesheet" type="text/css" /> <!--引入JQ文件--><script type="text/javascript" src="/javascripts/lib-cmd/jquery.min2.js"></script><!--引入页面操作的JS文件--> </head> <body> <div class="section-first"> <div class="date-head"> <div class="date-head-statue"> <ul class="date-head-state"> <li> <div class="reservation-status"> <div>订房状态</div> <div>2015-6-26</div> <div> 11:14:17</div> </div> </li> <div class="space-underline"></div> <li> <div class="order-number"> <div>订单号: </div> <div>A23456623</div> </div> </li> <li> <div class="total-order"> <div>订单总额: </div> <div>￥98</div> </div> </li> <li> <div class="order-status"> <div>订单状态：</div> <div>处理中</div> </div> </li> <li> <div class="payment-status"> <div>支付状态：</div> <div>线上支付 </div> <div>未支付</div> </div> </li> <li class="cancel-order"> <div class="pay-immediately"> <div class="pay-immediately-count"> <div class="pay-immediately-count-num">立即支付 <div class="time-item"> 还剩 <!--<span id="day_show">0天</span> <strong id="hour_show">0时</strong>--> <span id="minute_show">0分</span> <span id="second_show">0秒</span> </div> </div> </div> <div class="cancle-order">取消订单</div> <span class="del-order">删除订单</span> </div> </ul> </div> </div> </div> <div class="wide-space_line"> <div>入住信息</div> </div> <div class="check-information"> <ul> <li> <div class="check-in-time"> <div>入住时间:</div> <div>6月25日-6月26日 </div> <div>共1晚 </div> </div> </li> <li> <div class="room-type"> <div>房间类型：</div> <div>标准间</div> <div>1间</div> </div> </li> <li> <div class="booking-person"> <div>预订人：</div> <div>马优晨</div> <div>1500070188</div> </div> </li> <li> <div class="special-requirements"> <div>特殊要求：</div> <div>房间整洁干净</div> </div> </li> </ul> </div> <div class="wide-space_line"> <div>酒店信息</div> </div><div> <ul class="section-body"> <div class="set-detail"> <div> <a href=""><i class="font-name-icon first-icon"></i></a> <span class="set-text-detail">国际商务酒店（上海长江南路店）</span> </div> <div></div> <div class="set-text-button">酒店详情</div> <div class="greater-number"></div> </div> <div class="space-underline"></div> <div class="set-detail-number"> <div><a href=""><i class="font-name-icon first-icon"></i></a></div> <div class="set-text-detail2"><a href="tel:120" class="aa">021-7893829878</a></div> <div class="set-text-button"><a href="tel:120" class="bb">联系我 </a></div> <div class="greater-number"></div> </div> <div class="space-underline"></div> <div class="set-detail-address"> <div><a href=""><i class="font-name-icon first-icon"></i></a></div> <div class="set-text-detail set-text-shut">宝山区逸仙路2816号华滋奔腾大厦Ａ栋14楼</div> <div class="set-text-button">地图</div> <div class="greater-number"></div> </div> <!--<div class="space-underline"></div>--> </ul></div> <div class="arrow_mask"></div> <!--取消的弹框--> <div class="cancel-order-dialog"> <div class="cancel-dialog"> <div>你确定要取消该订单吗？</div> <div class="space-underline2"></div> <div class="shuxian"></div> <div class="cancel-dialog-btn"> <div class="cancle-order-btn">取消</div> <div class="certain-order">确定</div> </div> </div> </div> <div> <div class="footer"> <div id="mengdian"><i class="font-name-icon"></i><span>门店</span></div> <div id="dingdan"><i class="font-name-icon"></i><span>我的订单</span><span class="greater-number-bottom"></span><span class="ellipse">12</span></div> </div> </div> </body> </html> |
CSS代码
order_detail.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
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
|
body{ background: #eeeeee;}.date-head{ width:100%;}.date-head-statue{ width:100%; font-size:14px; border-radius:4px; padding-left:15px; padding-right:15px;}.date-head-state{ background: #fff; height: 240px; border-radius: 10px; margin-top: 16px; padding-top: 14px; position: relative;}/*.set-detail-number a{ color: #333333;}*//*.section-body .set-text-button .set-text-button a{ color: #1c94f7;}*/.reservation-status,.order-number,.total-order,.order-status,.payment-status,.pay-immediately,.pay-immediately-count{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal;}.order-number,.total-order,.order-status,.payment-status{ margin-top: 10px;}.pay-immediately{ position: absolute; bottom: 0px; width: 100%; /* margin-top: 16px; */}.space-underline { border-bottom: 1px solid #999999; -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch; /*margin-top: 12px;*/ -webkit-transform:scaleY(0.2); -moz-transform:scaleY(0.2); -o-transform:scaleY(0.2); }.reservation-status div:nth-of-type(2){ position: absolute; right: 0px; margin-right: 90px; color: #999999;}.reservation-status div:nth-of-type(3){ position: absolute; right: 0px; margin-right: 26px; color: #999999;}.order-number div:nth-of-type(2),.total-order div:nth-of-type(2),.order-status div:nth-of-type(2),.payment-status div:nth-of-type(2) { position: absolute; left: 0px; margin-left: 130px;}.reservation-status,.order-number ,.total-order ,.order-status,.payment-status{ /*position: absolute; left: 0px; margin-left: 130px;*/ padding-left: 12px;}.payment-status div:nth-of-type(3) { position: absolute; left: 0px; margin-left: 200px; color: #1c94f7;}.cancel-order{ width: 100%;}.pay-immediately div:nth-of-type(1){ width: 70%; background: #1c94f7; height: 40px; line-height: 40px; text-align: center; border-radius: 0px 0px 0px 10px; color: #ffffff; paddingleft: 20p; padding-left: 20px; white-space: nowrap;}.pay-immediately div:nth-of-type(2){ width: 30%; height: 40px; background: #097bd9; boder-radus: 5px; /* border-radius: 5px; */ line-height: 40px; text-align: center; border-radius: 0px 0px 10px 0px; color: #ffffff;}.wide-space_line { height: 30px; width: 100%; background: #eeeeee; text-align: center;}.wide-space_line div:nth-of-type(1) { margin-top: 7px; position: absolute; left: 0px; margin-left: 16px; font-size: 15px; color: #999999;}.total-order div:nth-of-type(2){ color:#ff5e38; font-size: 16px; font-weight: bold;}.order-status div:nth-of-type(2){ color: #1c94f7;}.check-in-time,.room-type,.booking-person,.special-requirements{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; margin-left: 16px;}.check-in-time div:nth-of-type(1),.room-type div:nth-of-type(1),.booking-person div:nth-of-type(1),.special-requirements div:nth-of-type(1){ color: #999999;}.check-in-time div:nth-of-type(2),.room-type div:nth-of-type(2),.booking-person div:nth-of-type(2),.special-requirements div:nth-of-type(2){ color: #333; position: absolute; left: 0px; margin-left: 98px;}/*.check-in-time div:nth-of-type(3),.room-type div:nth-of-type(3),.booking-person div:nth-of-type(3){ color: #333; position: absolute; left: 0px; margin-left: 60px;}*/.check-in-time div:nth-of-type(3){ color: #333; position: absolute; left: 0px; margin-left: 222px;}.room-type div:nth-of-type(3){ color: #333; position: absolute; left: 0px; margin-left: 152px;}.booking-person div:nth-of-type(3){ color: #333; position: absolute; left: 0px; margin-left: 152px;}.check-information{ background: #ffffff; height: 128px;}.check-in-time{ padding-top: 10px; margin-top: 10px;}.room-type,.booking-person,.special-requirements{ padding-top: 10px;}/*中间列表样式**************************************************************************/.section-body .set-detail,.section-body .set-detail-number,.section-body .set-detail-address{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; margin-left: 10px;}.set-detail,.set-detail-number{ padding-top: 13px; padding-bottom: 13px; text-align: center; /* border-bottom: 1px solid #999999; -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch;*/}.set-detail-address{ padding-top: 10px; padding-bottom: 10px; text-align: center;}@font-face{ font-family:"font-name-icon"; src:url("../../fonts/icomoon.ttf") format("truetype"), url("../../fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("../../fonts/icomoon.woff") format("woff"), url("../../fonts/icomoon.svg") format("svg"); font-weight:normal; font-style:normal;}.font-name-icon{ font-family: "font-name-icon"; font-weight: normal; font-style: normal; font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.first-icon{ color: #999999;}.second-icon{ margin-left: 5px;}.set-text-button{ position: absolute; right: 0px; margin-right: 24px; font-size: 14px; color: #1c94f7;}.greater-number { position: absolute; right: 0; margin-right: 10px; margin-top: 4px; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #999; border-right: 1px solid #999; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);}.greater-number-bottom{ position: absolute; right: 0; margin-right: 10px; margin-top: 7px; display: inline-block; width: 4px; height: 8px; border-top: 1px solid #999; border-right: 1px solid #999; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);}.set-detail,.set-detail-number{ padding-top: 13px; padding-bottom: 13px; text-align: center; /* border-bottom: 1px solid #999999; -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch;*/}.set-text-detail{ margin-left: 10px; font-size: 13px;}.set-text-detail2 .aa{ margin-left: 15px; font-size: 13px; color: #333333;}.set-detail-address{ padding-top: 10px; padding-bottom: 10px; text-align: center;}.set-text-shut{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 221px;}.set-text-button{ position: absolute; right: 0px; margin-right: 24px; font-size: 14px; color: #1c94f7;}.set-text-button .bb{ color: #1c94f7;}.space_line{ height: 10px; width: 100%; background: #eeeeee;}.section-body{ background: #ffffff;}/*底部按钮样式**************************************************************************/.footer{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal;}.greater-number-bottom{ position: absolute; right: 0; margin-right: 10px; margin-top: 6px; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #999; border-right: 1px solid #999; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);}.ellipse{ width: 26px; height: 18px; display: block; border-radius: 8px; background: #1c94f7; color: #ffffff; position: absolute; right: 0px; margin-right: 18px; margin-top: -17px; padding-right: 6px; font-size: 10px; text-align: center; line-height: 18px;}.footer{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; position: relative; bottom: 0px; width: 100%; height: 40px; /* background: #fff; */ margin-top: 50px; /* padding-top: 50px; */}.footer div:nth-of-type(1){ padding-top: 11px; width: 50%; border-right: 1px solid #eeeeee; background-color: white; text-align: center;}.footer div:nth-of-type(2){ padding-top: 12px; width: 50%; padding-left: 28px; background-color: white;}.footer span{ padding-left: 5px;}.pay-immediately div:nth-of-type(3){ display: none;}/*倒计时样式**************************************************************************/.time-item { background: #C71C60; color: #fff; line-height: 40px; font-size: 14px; font-family: Arial; padding: 0 10px; border-radius: 5px;}#day_show { float:left; line-height:40px; color:#ffffff; font-size:14px; margin:0 10px; font-family:Arial,Helvetica,sans-serif;}.item-title .unit { background:none; line-height:40px; font-size:14px; padding:0 10px; float:left;}.pay-immediately-count-num{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal;}.del-order{ display: none; text-align: center; background: #999999; height: 40px; border-radius: 0px 0px 10px 10px; position: absolute; bottom: 0px; width: 100%; color: #fff; line-height: 40px;}//取消按钮弹出的对话框.arrow_mask { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: #333333; opacity: 0.55; display: none;}.cancel-order-dialog{ display: none; width: 260px; height: 206px; background: #fff; border-radius: 6px; position: absolute; top: 0px; margin-top: 200px; left: 50%; margin-left: -130px; z-index: 1; padding-top: 33px;}.cancel-dialog div:nth-of-type(1){ text-align: center; /* border-right: 1px solid #999; padding: 10px; border-top: 1px solid #999;*/}.cancel-dialog-btn{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; /* margin-top: -8px;*/ }.cancel-dialog-btn div:nth-of-type(1){ width: 130px; border-right: 1px solid #999; padding: 10px; border-top: 1px solid #999;}.cancel-dialog-btn div:nth-of-type(2){ width: 130px; text-align: center; padding: 10px; border-top: 1px solid #999;}.space-underline2 { margin-top: 116px;}.space-underline3 { width: 100%; height: 10px; -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch; -webkit-transform: scaleX(0.2); -moz-transform: scaleX(0.2);} |
reset.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
|
@charset "utf-8";*{margin:0;padding:0;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}html { min-height: 100%; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}body { width: 100%; min-height: 100%; font-family:"Microsoft YaHei","微软雅黑","MicrosoftJhengHei","华文细黑","Helvetica", "Arial", "sans-serif"; font-size: 14px; position: relative; word-break:break-all;}a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35); -webkit-box-sizing:border-box;}img { -ms-interpolation-mode: bicubic; vertical-align: middle;}img:not([src*="/"]) { display: none;}table { border-collapse: collapse; border-spacing: 0;}textarea { resize: none;}input, button, select, textarea { -webkit-appearance:none; outline: none; border-radius: 0;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0;}ul,ol,li { list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 0;}.section-body .text { margin-top: 24px; margin-left: 40px; margin-right: 35px; width: 84%; font-family: "宋体"; font-size: 18px;}.section-body .textImg{ margin-top: 45px; color: blue; text-align: center; |
浙公网安备 33010602011771号