js制作支付倒计时页面

本文的例子分享了js支付倒计时页面的代码，供大家参考。具体内容如下

(图1)

(图2)

(图3)

(图4)

实现目标

一、页面从图1的1: 00开始倒计时(可以点击取消订单按钮，支付页面消失)。

第二，倒计时后，出现删除顺序。

3.单击删除订单，弹出一个弹出框，询问您是否要删除订单。

4.单击确定删除订单。

如上图所示，这里给出了所有的源代码(如果需要运行，只需要修改EJS文件中引入的CSS路径和JS路径)。

这一页其实是我在业余时间写的东西。

但是涉及到倒计时、弹出、字体绘制的知识(参考“如何制作字体绘制”一章)。

在这里分享一下，希望大家都能从中学习到自己想要的东西。代码很难看，但基本效果已经达到。相关注释将在代码后进行注释，以便于参考。

javascript，javascript

order _明细. js

/* * *马2016/10/20创作。*/$(function(){//加载DOM后只执行函数var intDiff=parseInt(60)；//倒计时总秒数Function timer(int diff){ window . setinterval(Function(){ var day=0，hour=0，minute=0，second=0；//时间默认值if (intDiff 0) {//计算相关的日、时、分、秒日=数学。floor(int diff/(60 * 60 * 24))；hour=math . floor(intDiff/(60 * 60))-(day * 24)；分钟=Math.floor(intDiff/60) -(天* 24 * 60) -(小时* 60)；second=math . floor(intDiff)-(day * 24 * 60 * 60)-(hour * 60 * 60)-(minute * 60)；} if(分钟=9)分钟='0 '分钟；if(秒=9)秒='0 '秒；$('#day_show ')。html(day ' days ')；$ ('# hour _ show ')。html(当' s id=' h '/s ' hour ')；$ ('#分钟_显示')。html ('s/s '分钟'分钟)；$ ('# second _ show ')。html ('s/s '秒')；int Diff-；}, 1000);//loop函数，即时钟移动时的set interval(function(){ if($(' # minute _ show '))。text ()==' 00分钟' $('#second_show ')。text()=='00秒'){$('。付钱。$('.' cancel-order ')。移除()；$('.del-order’)。show()；clearInterval()；} }，1000) //下面三个是跳转链接，最初是在节点项目的路由中配置的。在这里，您可以更改为自己的链接$(“#但丁”)。单击(function(){ location . href='/hotel/order '；//这里的跳转是路由路径})；$('#mengdian ')。click(function(){ location . href='/hotel '；//这里的跳转是路由路径})；$('.set-detail’)。单击(function(){ location . href='/hotel/detail '；//这里的跳转是路由路径})；//有一些点击事件/*点击删除按钮*/$('。del-order’)。单击(function () {$(')。arrow _ mask’)。show()；$('.“取消-订购-对话”)。show() }) /*