2. 程式人生 > 程式設計 >js實現支付倒計時返回首頁

js實現支付倒計時返回首頁

阿新 • • 發佈：2021-10-27

支付倒計時返回首頁案例簡介：在首頁繫結一個按鈕跳轉到另一個頁面，用到了簡單的語法，getElementsByTagName、location.href等。

index.html

效果圖如下:

js實現支付倒計時返回首頁

js實現支付倒計時返回首頁

<!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">http://www.cppcns.com
 

    <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" conten客棧t="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').inn程式設計客棧erText = timer;
                //等於0時跳轉首頁
                if(timer==0){
                    location.href = "./index.html"
                }
            },1000);
        }
        //點選按鈕立即返回首頁
        document.getElementsByTagName('button')[0].onclick = function(){
            location.href = "./index.html"
        }
    </script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

js實現支付倒計時返回首頁

支付倒計時返回首頁案例簡介：在首頁繫結一個按鈕跳轉到另一個頁面，用到了簡單的語法，getElementsByTagName、location.href等。

python selenium 微信公眾號歷史文章隨手一點就返回首頁？鬱悶之下只好將他們都下載下來。

參照資料：selenium webdriver 如何新增cookie:https://www.cnblogs.com/sundahua/p/10202494.html

JS 實現春節倒計時效果

1 <!DOCTYPE html> 2 <html lang=\"zh-CN\"> 3 4 <head> 5<meta charset=\"UTF-8\"> 6<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

vue中如何點選返回上一頁，vue判斷沒有上頁返回首頁

技術標籤：vuejsvue.jsjavascript vue中如何點選返回上一頁，vue判斷沒有上頁返回首頁

FineReport 決策報表進行控制元件控制，JS實現決策報表自動翻頁

一、開啟FR軟體，新建一個決策報表，這裡自動命名為Form4 二、在決策報表中加入自己的內容，這裡我隨便加了一個圖和一個按鈕還有我們需要做自動翻頁的報表

js實現簡單的前端分頁效果

有些專案業務比較簡單，但用到前端分頁的地方又比較多，外掛的體積比較難控制用起來也麻煩，所以自己寫一個簡易的。

js實現圖片預覽翻頁

原文地址 可以直接複製貼上開啟，圖片是線上的，原理簡單好懂！ 效果 原始碼

JS實現分頁導航效果

前言 最近的專案需要新增一個分頁導航的功能，沒有用網上封裝好的檔案。通過JS自己簡單實現了效果。下面和大家分享一下。

vue中使用vue-print.js實現多頁列印

本文主要介紹了vue專案中使用print.js列印，解決多頁，分頁，列印預覽樣式修改等問題。

使用原生JS實現滾輪翻頁效果的示例程式碼

一、滾輪事件 當用戶通過滑鼠滾輪與頁面互動、在垂直方向上滾動頁面時，就會觸發mousewheel事件，這個事件就是實現全屏切換效果需要用到的。在IE6,IE7,IE8,Opera 10+,Safari 5+中，都提供了 “mousewheel” 事件，而

js實現時分秒倒計時

function countTime(value) { //獲取當前時間 var date = new Date(); var now = date.getTime(); //設定截止時間

原生js實現分頁快取

前言 　內容涉及知識點: 　　1.後臺分頁查詢概念 　　2.原生ajax請求 　　3.閉包

原生js實現分頁效果

本文例項為大家分享了js實現分頁效果的具體程式碼，供大家參考，具體內容如下

原生js實現表格翻頁和跳轉

本文例項為大家分享了js實現表格翻頁和跳轉的具體程式碼，供大家參考，具體內容如下

vue中使用JS實現倒計時功能

一、倒計時功能 將剩餘的時間顯示出來，反饋給使用者，每過1s，剩餘的時間也減少1s

js實現詳情頁放大鏡效果

本文例項為大家分享了js實現詳情頁放大鏡的具體程式碼，供大家參考，具體內容如下

html+vue.js 實現漂亮分頁功能可相容IE

當功能比較簡單，在單一html中使用vue.js分頁展示資料，並未安裝腳手架，或使用相關UI框架，此時需要手寫一個分頁器，不失為最合理最便捷的解決方案

vue中使用particles.js實現登入頁炫酷動效

1、安裝依賴 yarn add particles.js 或 npm install particles.js 2、src/components下新建particles資料夾，資料夾下新建index.vue和particles.json，程式碼如下

js+jq實現簡單分割線分頁器

技術標籤：javascriptjqueryhtml前端js 分享這篇博文完全是因為懶得用外掛…實現一些小功能，不過程式碼也確實簡單，毫無技術可言，算是記錄一下吧。路過的大神忍不住輕噴~

js實現整頁截圖

一、引用庫 html2canvas.js和canvas2image.js的下載地址： html2canvas.js:http://html2canvas.hertzen.com/dist/html2canvas.min.jscanvas2image.js: https://github.com/SuperAL/canvas2image/blob/master/canvas2