javaScript实现支付10秒倒计时
本文实例为大家分享了javaScript实现支付10秒倒计时的具体代码，供大家参考，具体内容如下
效果图如下：
这个案例其实很简单，只要掌握了js基础中的onclick函数以及定时器的使用，就能快速的做出这样的效果，让我们一起来看看怎么做吧~
首先需要两个html文件，在两个文件中利用html和css分别写好初始页面效果，在这里就不多说啦，具体可以看下面的代码
让我们来谈谈js需要做出的效果：
1、在页面1中点击支付要跳转到另一个文件中
2、刚进入页面2时要开始计时10秒，计时结束后返回页面1
3、点击页面2的立即返回能够返回到页面1
这就是我们需要做的效果
那我们要如何实现在两个页面之间的跳转呢？
=> 利用onclick和location.href="url" rel="external nofollow" ，在鼠标点击时改变location.href
（此处的url是指你所存放的另一个html文件的位置）
计时效果就很简单啦，利用setInterval使元素的innerText改变就可以了，当数字等于0时，同样改变location，使其页面跳转
代码如下：
页面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>
#btn{
display: block;
margin:130px auto;
width: 300px;
height: 100px;
font-size:30px;
}
</style>
</head>
<body>
<button id="btn">支付</button>
<script>
let btn=document.getElementById("btn");
btn.onclick=function(){
let con=window.confirm("您确定吗？");
if(con){
location.href='./支付.html';
}
}
</script>
</body>
</html>
页面2：
<!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>
#spa {
font-size: 20px;
color: red;
}
#total {
width: 200px;
height: 200px;
background-color: rgba(169, 169, 169, 0.315);
margin: 40px auto;
border-radius: 20px;
padding: 20px;
position: flex;
flex-direction: column;
text-align: center;
}
#total h3 {
padding-top: 20px;
}
#total button {
margin-top: 30px
}
</style>
</head>
<body>
<div id="total">
<h3>恭喜您，支付成功！</h3>
<div>
<span id="spa">10</span>
<span>秒后自动返回首页</span>
</div>
<button id="btn">立即返回</button>
</div>
<script>
var spa = document.getElementById("spa");
let t = 10;
setInterval(() => {
t--;
spa.innerText = t;
if (t == 0) {
location.href = "./支付10秒钟.html";
}
}, 400);
var btn=document.getElementById("btn");
btn.onclick=function(){
location.href="./支付10秒钟.html" rel="external nofollow"
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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高仿支付宝倒计时页面及代码实现
实现目标 一,页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二,倒计时完毕,出现删除订单. 三,单击删除订单,弹出弹框,询问是否要真正删除订单. 四,单击确定,即可删除订单. 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西. 但是里面涉及到,倒计时,弹框,以及字体图(可以参照"如何制作字体图"章节)的相关知识. 这里分享出来,希望大家能从中学到自己想要的知识. 代码
-
js制作支付倒计时页面
本文实例为大家分享了js支付倒计时页面制作代码,供大家参考,具体内容如下 (图一) (图二) (图三) (图四) 实现目标 一.页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二.倒计时完毕,出现删除订单. 三.单击删除订单,弹出弹框,询问是否要真正删除订单. 四.单击确定,即可删除订单. 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西. 但是里面涉及到,倒计时,弹框,以及字体
-
js实现支付倒计时返回首页
支付倒计时返回首页案例简介:在首页绑定一个按钮跳转到另一个页面,用到了简单的js语法,getElementsByTagName.location.href等. index.html 效果图如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
-
javaScript实现支付10秒倒计时
本文实例为大家分享了javaScript实现支付10秒倒计时的具体代码,供大家参考,具体内容如下 效果图如下: 这个案例其实很简单,只要掌握了js基础中的onclick函数以及定时器的使用,就能快速的做出这样的效果,让我们一起来看看怎么做吧~ 首先需要两个html文件,在两个文件中利用html和css分别写好初始页面效果,在这里就不多说啦,具体可以看下面的代码 让我们来谈谈js需要做出的效果: 1.在页面1中点击支付要跳转到另一个文件中 2.刚进入页面2时要开始计时10秒,计时结束后返回页面1
-
JavaScript输入分钟、秒倒计时技巧总结（附代码）
代码如下: <div class="container-fluid"> <div class="main-content-inner"> <div class="page-content"> <div class="page-header"> <form class="form-inline" id="searchform">
-
JavaScript实现10秒后再次获取验证码
JavaScript网页制作–10秒后再次获取验证码,供大家参考,具体内容如下 通常在注册或者登陆页面时,都会需要短信验证码,在点击按钮获取验证码后会有一段时间无法点击按钮,避免短时间内大量的获取验证码.今天制作这样一个功能. 功能实现: 1.点击获取验证码后禁用按钮 2.按钮中的文字内容改变,每一秒都改变 3.按钮倒计时变为0时恢复按钮,改回文字,重置倒计时t 代码实现: <!DOCTYPE html> <html lang="zh-CN"> <head
-
javascript实现5秒倒计时并跳转功能
本文实例为大家分享了js实现5秒倒计时并跳转功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>倒计时五秒</title> <script> //使用匿名函数方法 function countDown(){ var time = document.getElementById("Tim
-
JavaScript实现的商品抢购倒计时功能示例
本文实例讲述了JavaScript实现的商品抢购倒计时功能.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>JS抢购倒计时</title> </head> <body> <span id="times" > <SCRIPT LANGUAGE="JavaScript">
-
jQuery实现发送验证码并60秒倒计时功能
本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma
-
javascript实现发送短信倒计时
本文实例为大家分享了javascript实现发送短信倒计时的具体代码,供大家参考,具体内容如下 实现思路: 1.js获取发送按钮元素对象 2.设置一个发送间隔时间(全局变量) 3.给发送按钮元素对象绑定点击事件- - -onclick, 点击事件处理程序: ① 点击后俺按钮设置成禁用-disabled:true; ② 使用定时函数,时间间隔为1秒, 定时函数调用的函数处理程序: 判断时间是否为0 不为0- - -按钮里的描述内容变为:剩余多少秒,且时间减1 为0- - -则恢复按钮可以点击状态,
-
js代码实现点击按钮出现60秒倒计时
比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip
-
AngularJS 验证码60秒倒计时功能的实现
最近在做AngularJS 项目,这是写的一个60秒倒计时, angularjs 与jq不同, 不是使用dom节点操作,而是数据操作,写倒计时,最好是使用$timeout与$interval ,不要使用settimeout与setinterval .$timeout与$interval 可使绑定数据直接更新. html <a href="javascript:" rel="external nofollow" ng-click="sendphone
-
点击按钮出现60秒倒计时的简单js代码(推荐)
点击按钮出现60秒倒计时的简单js代码(推荐) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h