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

实现目标

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

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

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

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

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

这个页面其实是自己业余时间，写的东西。

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

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

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

JS代码

order_detail.js

/**

* 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('' + 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

• 订房状态

  2015-6-26

  11:14:17
• 订单号:

  A23456623
• 订单总额: