JS支付页面倒计时的实现示例
js简单实现支付页面跳转：
点击支付，跳出提示框，点击确定跳转支付成功页面二，从10开始倒计时，跳转到主页面，主页面连接到百度页面
页面1，代码如下：
<!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: 200px;
height: 280px;
background-color: #eee;
padding: 20px;
margin: 0 auto
}
button {
margin: 30px 25px;
}
</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>
//点击支付按钮，出现确认框
document.getElementsByTagName('button')[1].onclick = function () {
let res = window.confirm('您确定要支付吗？');//显示提示框
if (res) {
location.href = './倒计时页面2.html';//location对象下的属性href
}
}
</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;
}
#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 time = 10;//定义一个变量初始值为10
setInterval(() => {//创建定时器
time--;
document.getElementById('jumpTo').innerHTML = time;//每隔1秒把time的值减一，赋值给span标签
if (time == 0) {
location.href = 'https://www.baidu.com';//当时间为0时自动跳转页面
}
}, 1000)
}
//点击按钮立即返回
document.getElementsByTagName('button')[0].onclick = function () {
location.href = 'https://www.baidu.com';//点击立即返回，就跳转页面
}
</script>
</body>
</html>
到此这篇关于JS支付页面倒计时的实现示例的文章就介绍到这了,更多相关JS支付页面倒计时内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JavaScript高仿支付宝倒计时页面及代码实现
实现目标 一,页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二,倒计时完毕,出现删除订单. 三,单击删除订单,弹出弹框,询问是否要真正删除订单. 四,单击确定,即可删除订单. 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西. 但是里面涉及到,倒计时,弹框,以及字体图(可以参照"如何制作字体图"章节)的相关知识. 这里分享出来,希望大家能从中学到自己想要的知识. 代码
-
js制作支付倒计时页面
本文实例为大家分享了js支付倒计时页面制作代码,供大家参考,具体内容如下 (图一) (图二) (图三) (图四) 实现目标 一.页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二.倒计时完毕,出现删除订单. 三.单击删除订单,弹出弹框,询问是否要真正删除订单. 四.单击确定,即可删除订单. 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西. 但是里面涉及到,倒计时,弹框,以及字体
-
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实现支付10秒倒计时
本文实例为大家分享了javaScript实现支付10秒倒计时的具体代码,供大家参考,具体内容如下 效果图如下: 这个案例其实很简单,只要掌握了js基础中的onclick函数以及定时器的使用,就能快速的做出这样的效果,让我们一起来看看怎么做吧~ 首先需要两个html文件,在两个文件中利用html和css分别写好初始页面效果,在这里就不多说啦,具体可以看下面的代码 让我们来谈谈js需要做出的效果: 1.在页面1中点击支付要跳转到另一个文件中 2.刚进入页面2时要开始计时10秒,计时结束后返回页面1
-
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支付页面倒计时的实现示例
js简单实现支付页面跳转: 点击支付,跳出提示框,点击确定跳转支付成功页面二,从10开始倒计时,跳转到主页面,主页面连接到百度页面 页面1,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&qu
-
一个不错的js html页面倒计时可精确到秒
一个不错的js html页面倒计时可精确到秒,很简单,但和实用 <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <DIV id="CountMsg" class="HotDate"> <span id="t_d">00天</span>
-
ajax请求+vue.js渲染+页面加载的示例
1.导入js <script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11.0.min.js" />"></script> <!--标准mui.css--> <link href="<c:url value=" rel="external nofollo
-
JavaScript页面倒计时功能完整示例
本文实例讲述了JavaScript页面倒计时功能.分享给大家供大家参考,具体如下: 效果图: 源码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net JS倒计时</title> <style> h3{text-align:center;line-height:50px
-
JS调用页面表格导出excel示例代码
使用JS方法调用页面表格导出excel有很大的限制: 1.目前试了几个浏览器,只有IE支持, 2.点击 工具---安全---自定义级别---ActiveX 相关选项启用 下面是html代码 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()
-
js禁止页面使用右键(简单示例代码)
js禁止右键的代码: 复制代码 代码如下: function click(e) {if (document.all) {if (event.button==1||event.button==2||event.button==3) {oncontextmenu='return false';}}if (document.layers) {if (e.which == 3) {oncontextmenu='return false';}}}if (document.layers) {document
-
js几秒以后倒计时跳转示例
复制代码 代码如下: <html> <head> <title>出错啦~~~</title> <link href="css/login1.css" mce_href="css/login1.css" rel="stylesheet" type="text/css" /> <script language="javascript" type=
-
js实现页面多个日期时间倒计时效果
js的日期倒计时在日常项目中还是比较常用的,活动.拼团功能最为常见,先分析最要是处理好日期函数,然后一个页面上有多个倒计时情况下的方法: 来,先看下 拼多多 的拼单倒计时的效果: 那么,先上个代码吧: 案例效果: <style> .mytime{ line-height: 40px; width: 300px; margin: 0 auto;} </style> <div class="mytime jsTime" data-time="2019
-
JS实现页面炫酷的时钟特效示例
目录 一.前言 二.想法设计/实现过程 三.基本样式 四.时间函数控制器 五,时,分,秒占位 六.时间动态填充 一.前言 今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页面. 特点就是炫酷,特效好,个人以心情愉快的感觉. 对于时间的变化,我打算使用翻页的特效来完成,色系的话采用黑色以主题,给人一种神秘的感觉. 而且要获取到本地的时间的数据来实时更新它的变化. 二.想法设计/实现过程 秉持着尽可能的美观炫酷,与用户的交互性好的原则,我初步的想法是,采用黑色系来增加可观性,
-
JS实现的倒计时效果实例(2则实例)
本文实例讲述了JS实现的倒计时效果.分享给大家供大家参考,具体如下: 我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果:另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码: html页面: <html> <head> <title>倒计时</title> <!--