2.支付10s倒计时

效果:

点击确定之后:

10s之后跳转到对应的界面:

代码：

<!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>li{list-style: none;margin: 20px;}li:nth-child(1){padding-top: 20px;}.box{width: 300px;height: 300px;background-color: antiquewhite;margin: 200px auto;}.bottom{/* background-color: aqua; */padding-left: 50px;}</style></head><body><div class="box"><ul><li>商品:笔记本电脑 </li><li>原价:1980</li><li>现价:1500</li><li></li><li></li></ul><div class="bottom"><button>取消</button><button>支付</button></div></div></body><script>// 1.点击支付,出现弹框document.getElementsByTagName('button')[1].onclick=function(){let res= window.confirm('您确定要支付吗')if (res) {location.href='./aa.html'}}</script>
</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>
</head>
<body><h1>恭喜你,支付成功</h1><p><span id="jumpTo">10秒</span>后自动返回首页</p> <button>立即返回</button>
</body>
<script>// 逻辑:加载页面时,应该触发定时1000window.onload=function(){let timer=10     setInterval(() => {timer--;document.getElementById('jumpTo').innerText=timerif (timer===0) {location.href='https://lenovo.ilive.cn/?f=stle'}}, 1000);}
</script>
</html>

逻辑分析

定义一个变量等于10,进来每次都进行递减，获取到页面的10并且赋值给它。当等于0的时候

进行页面的跳转。

2.支付10s倒计时相关推荐

js案例---支付10s倒计时
我们今天要写的案例是支付10s倒计时就是在点击按钮时,跳转到一个支付成功的页面,并且倒计时转到另一个页面先给支付页面添加样式,这里不细讲: 我们来梳理一下支付页面的代码逻辑: 1.我们需要获取到支 ...
c语言10s倒计时,c 给我一个10s倒计时自动关机的命令
满意答案 kqu242177 推荐于 2016.05.20 采纳率:49% 等级:12 已帮助:13877人我给你一个定时关机的 ******************************* ...
uni-app实现订单支付倒计时，不会随着返回重新计时
uni-app实现订单支付倒计时,不会随着返回重新计时 uni-app实现订单支付倒计时最近开发时有一个倒计时功能,一开始使用uni-app中自带的uni-countdown倒计时,可以实现普通倒计 ...
Android平台招商银行“一网通”支付对接采坑记
公司最近的App中需要做支付功能,支付中需要支持微信支付.支付宝支付.一网通支付.本文主要记录在对接Android平台中的"一网通"过程中遇到的坑,如果有类似需求的朋友,可供你参考 ...
微信小程序之15分钟倒计时（附带天数和时钟的实现方法在文章中）
这是制作的订单支付前倒计时,如果客户在规定时间内没能支付,则系统自动删除,这样就以便有些商品冗余,当然了,这里只有分钟和秒钟,天数和时钟我写在了最底下,最后代码的显示第七行,可以看一下,然后带入到相 ...
vue2答题app实现倒计时切换题目
首先是背景,一个简单的答题web app,想加入一个倒计时功能,每当打开新的一题的时候重新从10倒计时到0,如果倒计时到0了还没有做出选择,将看做放弃选择,进入下一题. 因为我要实现的功能是10s倒计 ...
关于支付宝小程序在安卓机（米10）倒计时问题
问题描述要在进入页面开始倒计时,倒计时十秒之后显示阅读完成,请看下面视频描述 IOS 手机测试是没有问题的,用我自己的手机 (米10)测试就出现了这个问题注意:代码中设置的都是 10s 倒计时,为 ...
【MQ】MQ消息中间件RabbitMQ
第一部分:RabbitMQ 一.MQ 概念 MQ,Message Queue,消息队列.本质是队列,遵循FIFO先进先出原则.只不过队列中存放的内容是message而已,还是一种跨进程的通信机制,用于 ...
单片机六位抢答器c语言程序,八路电子抢答器(基于51单片机的8路抢答器设计C语言程序)...
哥,你还有AT89C51单片机8路抢答器的资料吗哥,你还有AT89C51单片机8路抢答器的资料吗 AT89C51单片机8路抢答器的资料源程序如下 #include #define uchar un ...

2.支付10s倒计时

2.支付10s倒计时相关推荐

最新文章

热门文章