js制作支付倒计时页面

<p style="text-align: left">本文实例为大家分享了js支付倒计时页面制作代码，供大家参考，具体内容如下

这里写图片描述

<p style="text-align: center">（图一）

这里写图片描述

实现目标

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

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

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

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

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

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

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

这里分享出来，希望大家能从中学到自己想要的知识。代码很丑，但是基本效果都已经实现。相关注释，会在代码后注释起来，方便参考。

JS代码

order_detail.js

<div class="jb51code">
<pre class="brush: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('<s id="h">' + 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);
});

});

<span id="minute_show">0分</span> <span id="second_show">0秒</span> </div> </div> </div> <div class="cancle-order">取消订单</div> <span class="del-order"><a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>订单</span> </div> </ul> </div>

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);
}

js制作支付倒计时页面

实现目标

day_show {

猜你在找的JavaScript相关文章