js实例之01支付后的10秒倒计时

这是一个通过js实现的支付后的页面,点击支付会跳出一个弹窗,提示你是否要确定支付,确定后进入付后界面,该页面有着10秒倒计时,计时结束后便会返回原界面。也可以选择立刻返回,来返回主页面
第一个zhifu.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>支付页面</title> <style> div { width: 200px; height: 280px; background-color: #eee; padding: 20px; margin: auto; } button { margin: 30px 25px; } </style> </head> <body> <div> <p>商品:web前端课程</p> <p>原价:1980元</p> <p>现价:1.98元</p> <p>内容:html、css、JavaScript</p> <p>地址:郑州升达经贸管理学院</p> <p> <button>取消</button> <button>支付</button> </p> </div> <script> //点击支付出现确认框 document.getElementsByTagName('button')[1].onclick = function() { let res = window.confirm('您确认要支付吗?') if (res) { location.href = './ten.html' } } </script> </body> </html>

js实例之01支付后的10秒倒计时

 


第二个ten.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>10秒倒计时</title>
    <style>
        div {
            margin: 0 auto;
            width: 500px;
        }
        
        #jumpto {
            color: red;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div>
        <h2>恭喜您,支付成功</h2>
        <span id="jumpto">10</span>秒后自动返回首页
        <p><button>立刻返回</button></p>
    </div>
    <script>
        //加载页面时,应该触发定时器时间10s
        window.onload = function() {
            let timer = 10;
            setInterval(() => {
                timer--;
                document.getElementById('jumpto').innerHTML = timer;
                if (timer == 0) {
                    location.href = './zhifu.html';
                }
            }, 1000);
        }
        document.getElementsByTagName('button')[0].onclick = function() {
            location.href = './zhifu.html';
        }
    </script>
</body>

</html>

js实例之01支付后的10秒倒计时

 

  

  

原文链接:https://www.cnblogs.com/Ldz123/p/17261329.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实例之01支付后的10秒倒计时 - Python技术站

(0)
上一篇 2023年4月18日
下一篇 2023年4月18日

相关文章

  • TreeView无刷新获取text及value实现代码

    TreeView是Web开发中经常使用的一种树形控件,它可以在Web页面上展示层级数据结构,同时提供交互式的视图操作。本文将介绍如何使用无刷新技术获取TreeView的text与value的值,并实现基本的交互功能,包括单选、多选等。 一、前置知识 在使用无刷新技术之前,需要掌握以下知识: HTML基础知识,了解如何布局Web页面; JavaScript基础…

    JavaScript 2023年6月11日
    00
  • 前端项目中报错Uncaught (in promise)的解决方法

    当前端项目中使用异步编程(如Promise、async/await)时,有时会遇到Uncaught (in promise)报错,这种错误往往会导致程序崩溃,造成不良的用户体验。本文将详细讲解如何解决前端项目中报错Uncaught (in promise)的问题。 什么是Uncaught (in promise)报错? Uncaught (in promis…

    JavaScript 2023年5月28日
    00
  • JS实现点击登录弹出窗口同时背景色渐变动画效果

    JS实现点击登录弹出窗口同时背景色渐变动画效果可以分为以下几个步骤: HTML结构的修改:需要在HTML中添加一个按钮和一个弹窗,同时要添加一个全屏蒙层,作为背景色渐变的动画效果。 <button id="loginBtn">登录</button> <div id="loginModal"…

    JavaScript 2023年6月11日
    00
  • jQuery 开发者应该注意的9个错误

    jQuery 开发者应该注意的9个错误 引入jQuery的方式错误 错误的方式如下: <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 在上述代码的例子中,我们通过引入了互联网上的jquery库来使用它。这种方式是错误的,因为该方…

    JavaScript 2023年6月10日
    00
  • JavaScript截断字符串的方法

    当需要在JavaScript中处理字符串时,很可能会遇到需要截断字符串的情况。以下是几种JavaScript截断字符串的方法: 1. substring函数 substring()是JavaScript中截断字符串最常用的函数之一。语法如下: string.substring(start, end) string是要进行截断的字符串。 start是子字符串的…

    JavaScript 2023年5月28日
    00
  • 微信小程序项目实践之九宫格实现及item跳转功能

    以下是《微信小程序项目实践之九宫格实现及item跳转功能》的完整攻略。 1. 确定页面结构 首先,我们需要确定页面的基本结构,包括 view、scroll-view、block 等组件。页面结构如下: <!– page.wxml –> <scroll-view class="grid-container"> &…

    JavaScript 2023年6月11日
    00
  • JS实现将数字金额转换为大写人民币汉字的方法

    下面是JS实现将数字金额转换为大写人民币汉字的方法的完整攻略。 1. 需求分析 首先,我们需要明确我们的需求是将数字金额转换为大写人民币汉字格式,例如将12345.67转换为“壹万贰仟叁佰肆拾伍元陆角柒分”。 2. 算法思路 实现将数字金额转换为大写人民币汉字,需要用到数值分段、数值转换、单位处理等一系列算法。其核心思路为:将待转换的数值从小数点处分割出来,…

    JavaScript 2023年5月28日
    00
  • Javascript中判断变量是数组还是对象(array还是object)

    如果要判断一个变量是否为数组或对象,可以使用JavaScript中的typeof运算符和Array.isArray()方法。下面详细讲解JavaScript中判断变量是数组还是对象的攻略。 使用typeof运算符 使用typeof运算符判断变量类型 使用typeof运算符可以返回一个字符串,表示变量类型。如果变量是数组,返回的类型为object,如果变量是对…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部