js案例---支付10s倒计时

我们今天要写的案例是支付10s倒计时

就是在点击按钮时，跳转到一个支付成功的页面，并且倒计时转到另一个页面

先给支付页面添加样式，这里不细讲：

我们来梳理一下支付页面的代码逻辑：

1.我们需要获取到支付按钮

2.给按钮添加点击事件，并且有提示（“您确定要支付吗”）

3.确认后转到支付成功的页面

js代码如下：

我们转到的支付成功的页面当然也要有样式

然后我们梳理一下支付成功后js代码逻辑：

1.加载页面时，应该触发定时器

2.定义一个变量为时间

3.倒计时为0时转到一个首页，这里取到的是淘宝首页

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"><title>Document</title><style>div {width: 300px;/* text-align: center; */padding: 10px 10px;background-color: rgb(242, 243, 244);margin: 0 auto;}button {margin-top: 20px;margin-right: 10px;}</style>
</head><body><div><p>商品: web前端课程</p><p>原价:1980元</p><p>现价:1.98元</p><p>内容:HTML、CSS、JS</p><p>地址:北京市朝阳区</p><p><button>取消</button><button>支付</button></p></div><script>let btnEle = document.querySelectorAll("button")[1]btnEle.addEventListener("click", function () {let res = window.confirm("您确定要支付吗");if (res) {location.href = "./sucess.html"}})</script>
</body></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>div {margin: 0 auto;width: 500px;}#jump {color: red;font-size: 30px;}</style>
</head><body><div><h2>恭喜你，支付成功</h2><span id="jump">10</span>秒后自动返回首页<p><button>立即返回</button></p></div><script>// 逻辑：加载页面时，应该触发定时器10swindow.onload = function () {let timer = 10setInterval(function () {timer--;document.querySelector("#jump").innerHTML = timer;if (timer == 0) {location.href = "https://www.taobao.com/"}}, 1000)}</script>
</body></html>

js案例---支付10s倒计时相关推荐

2.支付10s倒计时
效果: 点击确定之后: 10s之后跳转到对应的界面: 代码: <!DOCTYPE html> <html lang="en"><head>< ...
js案例小米秒杀倒计时新年倒计时
** 小米秒杀倒计时设计方案源代码如下 ** 首先设计一个整体的框架即css内容(调好合适边框等) css样式如下 <div class="box"><h3 ...
视频教程-项目实战视频课程：美团小程序（Node.js+Express+支付）-微信开发
项目实战视频课程:美团小程序(Node.js+Express+支付) 东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN ...
暑期学习日记26：js实现支付成功页面跳转
本周学习了用js实现支付页面的跳转功能,逻辑为: 1.在支付界面时,点击确定支付,弹出确认框,确认后跳转到支付成功页面. 2.在支付成功界面时,会在倒计时10秒后自动跳转页面,或者点击立即返回立即跳转 ...
前端学习当中的一些js案例
标题 js案例 ** 三目运算符求四个数中的最大值(使用js 和c 的实现) ** 找找感觉 #include<stdio.h>void main() {float a,b,c,d;flo ...
android京东秒杀倒计时,js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...
微信支付开发(1) JS API支付
From: http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html 关键字:微信支付微信支付v3 jsapi支付统一支付 Native支付 prep ...
JS案例：使用对象、对象数组、正则表达式
JS案例:使用对象.对象数组.正则表达式 1.使用对象声明对象变量,其实就是将一个json对象赋给一个变量,可以看到json对象就由一些键值对构成. 运行效果: 如果将{id: 3, name: & ...
js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...

js案例---支付10s倒计时

js案例---支付10s倒计时相关推荐

最新文章

热门文章