JavaScript高仿支付宝倒计时页面及代码实现

实现目标

一,页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失)。

二,倒计时完毕,出现删除订单。

三,单击删除订单,弹出弹框,询问是否要真正删除订单。

四,单击确定,即可删除订单。

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西。

但是里面涉及到,倒计时,弹框,以及字体图(可以参照“如何制作字体图”章节)的相关知识。

这里分享出来,希望大家能从中学到自己想要的知识。

代码很丑,但是基本效果都已经实现。

JS代码

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('' + hour + '时'); $('#minute_show').html('' + minute + '分'); $('#second_show').html('' + 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 <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 content="telephone=no,address=no" name="format-detection">