js实现支付倒计时返回首页

支付倒计时返回首页案例简介：在首页绑定一个按钮跳转到另一个页面，用到了简单的js语法，getElementsByTagName、location.href等。

index.html

效果图如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            background-color:aquamarine;
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }
        h2{
            text-align: center;
        }
        button{
            text-align: center;
            margin-left: 68px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
      <h2>商品:smile</h2>
      <h2>价格:infinity</h2>
      <h2>支付方式:Net</h2>
      <h2>订单号:123456789</h2>
      <button>取消</button>
      <button>支付</button>
    </div>

    <script>
        //逻辑:点击支付按钮进行跳转页面
        //获得第二个(第一个是0)标签名为'button'的标签添加点击事件并且绑定一个函数
        document.getElementsByTagName('button')[1].onclick = function(){
            //跳转前的确认框
            let res = window.confirm('请确认支付');
            //判断是否为真,为真跳转
            if(res){
                //直接使用目录下的html页面,也可输入其他网站链接
                location.href = "./return.html"
            }
        }
    </script>
</body>
</html>

return.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            width: 300px;
            height: 400px;
            margin: 0 auto;
        }
        .content{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
        <h2>支付成功</h2>
        <span id="countDown">10</span>秒后返回首页
        <button>立即返回</button>
        </div>
    </div>

    <script>
        //逻辑:页面打开,开始倒计时
        window.onload = function(){
            //先赋值
            let timer = 10;
            //倒计时
            //箭头函数()=>{} == function(){}
            setInterval(()=>{
                timer--;
                document.getElementById('countDown').innerText = timer;
                //等于0时跳转首页
                if(timer==0){
                    location.href = "./index.html"
                }
            },1000);
        }
        //点击按钮立即返回首页
        document.getElementsByTagName('button')[0].onclick = function(){
            location.href = "./index.html"
        }
    </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS 支付倒计时功能实现思路

    AngularJS 支付倒计时功能实现思路

    说明: 1.前端只负责展示倒计时,不具备实际功能: 2.实际实现方式:数据库中设置一个每分钟执行一次的定时任务(故与实际情况会有一分钟以内的误差),只要订单创建时间超过15分钟会自动将订单状态改为"取消". 遇到难点: 1.字符串转date中,苹果satari浏览器不支持"yyyy-mm-dd hh:mi:ss"格式,须将字符串转为"yyyy/mm/dd hh:mi:ss" new Date($scope.order.createtime.rep

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

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

    实现目标 一,页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二,倒计时完毕,出现删除订单. 三,单击删除订单,弹出弹框,询问是否要真正删除订单. 四,单击确定,即可删除订单. 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西. 但是里面涉及到,倒计时,弹框,以及字体图(可以参照"如何制作字体图"章节)的相关知识. 这里分享出来,希望大家能从中学到自己想要的知识. 代码

  • javaScript实现支付10秒倒计时

    javaScript实现支付10秒倒计时

    本文实例为大家分享了javaScript实现支付10秒倒计时的具体代码,供大家参考,具体内容如下 效果图如下: 这个案例其实很简单,只要掌握了js基础中的onclick函数以及定时器的使用,就能快速的做出这样的效果,让我们一起来看看怎么做吧~ 首先需要两个html文件,在两个文件中利用html和css分别写好初始页面效果,在这里就不多说啦,具体可以看下面的代码 让我们来谈谈js需要做出的效果: 1.在页面1中点击支付要跳转到另一个文件中 2.刚进入页面2时要开始计时10秒,计时结束后返回页面1

  • js制作支付倒计时页面

    js制作支付倒计时页面

    本文实例为大家分享了js支付倒计时页面制作代码,供大家参考,具体内容如下 (图一) (图二) (图三) (图四) 实现目标 一.页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二.倒计时完毕,出现删除订单. 三.单击删除订单,弹出弹框,询问是否要真正删除订单. 四.单击确定,即可删除订单. 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西. 但是里面涉及到,倒计时,弹框,以及字体

  • js实现支付倒计时返回首页

    js实现支付倒计时返回首页

    支付倒计时返回首页案例简介:在首页绑定一个按钮跳转到另一个页面,用到了简单的js语法,getElementsByTagName.location.href等. index.html 效果图如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co

  • 微信支付 JS API支付接口详解

    微信支付 JS API支付接口详解

    一.JS API支付接口(getBrandWCPayRequest) 微信JS API只能在微信内置浏览器中使用,其他浏览器调用无效.微信提供getBrandWCPayRequest接口供商户前端网页调用,调用之前微信会鉴定商户支付权限,若商户具有调起支付的权限,则将开始支付流程.这里主要介绍支付前的接口调用规则,支付状态消息通知机制请参加下文.接口需要注意:所有传入参数都是字符串类型! getBrandWCPayRequest参数如下图所示. 参数 名称 必填 格式 说明 appId 公众号i

  • js微信支付实现代码

    本文实例为大家分享了js微信支付的具体代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"&g

  • Android中微信小程序支付倒计时功能

    Android中微信小程序支付倒计时功能

    看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格

  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能

    项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

  • js定时器实现倒计时效果

    js定时器实现倒计时效果

    本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下 日期函数 倒计时 =  用 将来的时间  -   现在的时间 问题:将来时间 距离 1970 毫秒数   -     现在距离 1970年1 用将来的毫秒数 -  现在的毫秒数   不断转换就可以了 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t

  • iOS开发支付宝支付成功返回字符串的处理操作

    { memo=""; result="partner=\"311811\"&seller_id=\"nse@gmail.com\"&out_trade_no=\"S005372\"&subject=\"\U522b\U5885\U8ba2\U5355\"&body=\"\U5885\"&total_fee=\"0.1\"

  • js几秒以后倒计时跳转示例

    复制代码 代码如下: <html> <head> <title>出错啦~~~</title> <link href="css/login1.css" mce_href="css/login1.css" rel="stylesheet" type="text/css" /> <script language="javascript" type=

随机推荐