JavaScript High Imitation Alipay Countdown page and code implementation _JAVASCRIPT skills

Achieve the goal

First, the page in the picture began to countdown (you can click the Cancel Order button, the payment page disappears).

Second, the countdown is complete, the deletion order appears.

Third, click Delete Order, pop-up frame, ask if you want to actually delete the order.

Four, click OK to delete the order.

As shown in the above, the results show that all the source code (if required to run, only need to modify the Ejs file introduced in the CSS path and JS path).
This page is actually your own spare time, writing things.

But it involves, the countdown, the frame, and the font map (you can refer to the "How to make the Font map" section) of the relevant knowledge.

Here to share it, I hope you can learn what you want from the knowledge.

The code is ugly, but the basic effect has been achieved.

JS Code

Order_detail.js/** * Created by Mayouchen on 2016/10/20. * */$ (function () {//load-only execute functions of dom var Intdiff = parseint (60);//countdown Total seconds Quantity function timer (intdiff) {Window.setinterval (func tion () {var day = 0, hour = 0, minute = 0, second = 0;//time default value if (Intdiff > 0) {//Compute related days, hours, minutes, and seconds, S = Math.floo 
R (Intdiff/(60 * 60 * 24));
hour = Math.floor (Intdiff/())-(day * 24);
minute = Math.floor (INTDIFF/60)-(Day * *)-(hour * 60);
Second = Math.floor (Intdiff)-(* * * * (Hour *)-(minute * 60);
} if (minute <= 9) minute = ' 0 ' + minute;
if (second <= 9) Second = ' 0 ' + second;
$ (' #day_show '). HTML (day + "Days");
$ (' #hour_show '). html (' <s id= "h" ></s> ' + hour + ' time ');
$ (' #minute_show '). html (' <s></s> ' + minute + ' min ');
$ (' #second_show '). html (' <s></s> ' + second + ' seconds ');
intdiff--;
}, 1000); The loop function is the clock moving up setinterval (function () {if (' #minute_show '). Text () = = ' 00 min ' && $ (' #second_show '). Text () = = ' 00 seconds ') {$ ('. pay-Immediately-count '). Remove ();
$ ('. Cancle-order '). Remove ();
$ ('. Del-order '). Show ();
Clearinterval (); },1000)//The following three is a jump link, was originally in the node project inside the routing configuration, here you can change their own link $ ("#dingdan"). Click (function () {location.href = "/hotel/order ";
Here is the path to the route});
$ ("#mengdian"). Click (function () {location.href = "/hotel";//This jumps to the path of the route});
$ (". Set-detail"). Click (function () {location.href = "/hotel/detail";//This jumps to the path of the route}); Here are a few click events/* Click the Delete button */$ ('. Del-order '). Click (function () {$ (". Arrow_mask"). Show (); $ (". Cancel-order-dialog"). Show ( )/* Frame---Cancel key */$ (". Cancle-order-btn"). Click (function () {$ (. cancel-order-dialog). Hide (); $ (". Arrow_mask").
Hide ();
}); /* The setting of the frame---determine the key/$ (". Certain-order"). Click (function () {$ (". Section-first"). Remove (); $ (". Cancel-order-dialog").
Remove ();
$ (". Arrow_mask"). Remove ();
$ (". Footer"). css ({"Position": "Fixed"});
}); /* The setting of the frame---cancel/$ (". Cancle-order"). Click (function () {$ (". Section-first"). Remove (); $ (". Footer"). css ({"Position": "
Fixed "});
}); //Execute the above function $ (functions () {Timer(Intdiff);
});
}); HTML page order_detail.html <! DOCTYPE html>  

The above is a small set to introduce the JS production Payment treasure Countdown function, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!