immediatepay.html 3.51 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="google" value="notranslate"><!-- 禁止Chrome 浏览器中自动提示翻译 -->
    <link rel="apple-touch-icon-precomposed" href="favicon.ico">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="Bookmark" href="favicon.ico">

    <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .checked_icon{
            width:20px;
            height: 20px;
            background: url("img/checked_icon.png");
            background-size:100% 100% ;
        }
        .weixin_icon{
            margin-right: 10px;
            width: 20px;
            height: 20px;
            background: url("img/weixin_pay.png");
            background-size:100% 100% ;
        }
        .all_told,.platen_number{
            text-align: center;
        }
        .all_told{
            padding: 30px 0 10px 0;
        }
        .all_told span{
            margin-right: 5px;
            font-size: 22px;
        }
        .countdown_time_con {
            text-align: center;
            color: #1aad19;
        }
    </style>
</head>

<body ontouchstart="">


<header class="demos-header">
    <p class="all_told"><span></span></p>
    <p class="platen_number"></p>

</header>



<div class="weui-cells">
    <label class="weui-cell">
        <div class="weui-cell__hd weixin_icon">
        </div>
        <div class="weui-cell__bd">
            <p>微信支付</p>
        </div>
        <div class="weui-cell__hd checked_icon">

        </div>
    </label>
</div>
<div class="weui-cells__title">请在支付完成后15分钟内出场,如超出15分钟,会继续产生费用!</div>


<div class="pay-content-padded">
    <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">立即支付</a>
</div>
<div class="weui-cells__title countdown_time_con">支付剩余时间
    <span id="minute_show">05</span>
    :
    <span id="second_show">00</span>
</div>


<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script>
    var intDiff = parseInt(5);//倒计时总秒数量
    function timer(intDiff){
        window.setInterval(function(){
            var minute=0,
                second=0;//时间默认
            if(intDiff > 0){
                minute = Math.floor(intDiff / 60);
                second = Math.floor(intDiff)   - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#minute_show').html(minute);
            $('#second_show').html(second);
            intDiff--;
            console.log(intDiff)
            if(intDiff == '0'){
                //倒计时结束调整页面
                //window.location.href
            }
        }, 1000);


    };

    $(function(){
        timer(intDiff);
    });
</script>

</body>
</html>