简易js验证码倒计时

最新推荐文章于 2024-08-09 09:30:00 发布
最新推荐文章于 2024-08-09 09:30:00 发布
阅读量794 收藏
点赞数
文章标签： button fun function input java 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fkpac3/article/details/7628451
版权 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
		<title>倒计时 - js</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript">
			// Interval 的 id，用于取消定时
			var interId;

			/**
			 * 取消 倒计时,并重新发送验证码
			 */
			function resendCode() {
				clearInterval(interId);
				$('#remainTime').val("10000");
				$("#sessionFlag").val("vali");
				countMainFunction("countdown()",10000);
			}			
			/**
			 * 倒计时
			 */
			function countdown() {
				// 获得剩余时间
				var t = $('#remainTime').val();
				if(t <= 0) { // 已经到时间了，则停止倒计时
					$("#valiCode").val(); // 若时间已到了，则清空验证码输入栏
					$("#sessionFlag").val("invali");
					return;
				}
				// 减 1 秒
				t = t - 1000;
				if(t <= 0) {
					t = 0;
				}
				// 设置隐藏域的值
				$('#remainTime').val(t);
			}
			
			/**
			 * 倒计时主函数,fun调用函数,druition间隔时间
			 */
			function countMainFunction(fun,durition){
				interId = setInterval(fun,durition);
			}
			
			// 倒计时入口函数
			function gate(){
				if($("#sessionFlag").val() === "invali"){
					alert("验证码已过期,请重新获取");
					return;
				} else { // 没有过期则校验
					//if()
					alert("校验");
				}
			}
		</script>
	</head>
	<body>
		输入毫秒数：<input type="text" name="remainTime" id="remainTime" value="10000" />
		<input type="button" id="startButton" value="提交" οnclick="gate();" />
		<input type="button" id="endButton" value="重新发送验证码" οnclick="resendCode();" />
		<input type="text" id="valiCode" />
		<input type="text" id="sessionFlag" />
		<br />
		<div id="countdownDiv">
			<span><span id="daySpanId"></span>天</span>
			<span><span id="hourSpanId"></span>时</span>
			<span><span id="minuteSpanId"></span>分</span>
			<span><span id="secondSpanId"></span>秒</span>
		</div>
	</body>
<script type="text/javascript">
countMainFunction("countdown()",10000);
</script>
</html>

这是还没有去掉测试部分的代码

一部分是从网上的来的代码，做了一些修改。原理就是进入页面就调用js函数，开始倒数，当点击提交的时候判断是否倒数完成，如果完成，就会提示需要重新发送。

在真正使用的时候，remainTime控件改为hidden，valiCode可以用java等从后台获取，sessionFlag用来记录是否已经倒计时完成.


fkpac3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React+hook+Typescript实现简易验证码倒计时
YanG_2859390447的博客
05-26 491
仿唯品会验证码登录倒计时： tsx代码： import React, { useEffect, useRef, useState, useCallback } from 'react' import './style/VerificationCodeLogin.less' export default function VerificationCodeLogin() { const intervalRef = useRef<any>(null); const [count,
html倒计时是怎么实现,前端如何实现一个倒计时组件？
weixin_39867125的博客
07-01 1676
需求倒计时这种需求非常常见。在我接触的项目中，已经做过N个倒计时的需求。常见的场景有电商项目中的秒杀抢购活动倒计时，短信验证码等。现在再一次碰到了倒计时的需求，是一个答题倒计时的场景。具体效果如图。思路要实现倒计时，就需要来回顾一下JavaScript中的定时器相关知识。setInterval: 每间隔N秒执行一次回调函数。setTimeout: N秒后执行回调函数。setImmediate: 非...
JS如何实现一个注册按钮10秒倒计时效果
itclanCoder
11-05 2002
我们平时在逛到一些网站的时候,在一些网站的会员注册页面里,为了提高用户的责任心以及给用户留下足够的时间阅读完注册协议,可以采用10秒倒计时的方式,阅读完协议后,才可以单机注册按钮的特效其实这与发送短信验证码倒计时,是一样的01原生js实现以下是原生简易js实现varsec=10; functioncountDownTimer(){ timer=setInterval(func...
原生js获取验证码功能组件（简易版）
热门推荐
object not found的博客
08-19 1万+
7.设置一个定时器并判断时间是否为1，是就将按钮状态重新设置成可点击并插入文本，然后将定时器清除。5.点击后将按钮设置为不可点击状态sendBtn.disabled = true，同时发起请求。3.判断input框的值是否为正确的手机号，是则进入下一步，不是则进行提醒。2.为按钮绑定点击事件，点击后声明一个60秒的时间变量。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。
分享75个JS特效倒计时，总有一款适合您
zy0412326的专栏
02-06 927
js
使用requestAnimationFrame 实现倒计时功能js(简单秒数倒计时)
qq_41920758的博客
08-02 755
const endTime = Date.now() + 20 * 1000 // 加上20秒 // 结束时间。这里也可以吐槽下 那个Promise函数 这玩意有一点不好的就是 一旦运行必须给个结果 不能取消 中途不能取消。这东西 就是实现了简易版本的倒计时了 从实现上看 和 上面的两种其实差距不太大哈。拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是60秒。可能很容易忽视这玩意 觉得可能就是做动画用的。let rafId;// 标识动画的id。// 如果中途能取消的话 就很好了。
uniapp功能篇-2.发送短信验证码按钮
R的博客
02-22 3102
功能点: 1.60s倒计时功能 2.调用后台短信接口 <!--公用的发送短信模块 --> <template> <span class="yanzhengcode" @click="getPhoneCode()" :disabled="BtnSms">{{smsTip}}</span> </template> <script> import LoginApi from "@/api/platform/login.js"; ex
js简单验证码
weixin_45893243的博客
08-03 75
js完成一个简单的验证码倒计时功能 html <input type="text"placeholder="请输入验证码"> <button>获取验证码</button> js var second = 3; var button = document.querySelector('button'); button.addEventListener('click',function(){ this.disabled = true;
js中使用requestAnimationFrame 实现倒计时功能(简单秒数倒计时例子)， 这个好像比想象中的更好用
业余前端的职业经历
05-30 1034
对前端同学来说，可能经常要做到倒计时的功能，特别是一些电商的网站。或者做一些搞活动的页面，倒计时开始。就拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是60秒首先可能想到就是。
C++ - 函数重载
jiaowenjie的专栏
08-06 297
/打印的是第二个函数的地址。//打印的是第一个函数的地址。-> 重载函数在本质上是相互独立的不同函数。-> 函数返回值不能作为函数重载的依据。-> 重载函数的函数类型不同。**3.函数默认参数和函数重载****函数重载的注意事项：****4.函数重载的本质**
时光不等人：java每日一练
m0_67187271的博客
08-05 1065
时光悄然流逝，不等人。技术亦不会自来门前，唯有勤奋学习，方能抓住时代的脉搏。
Java面试篇（JVM相关专题）
最新发布
聂可以的博客
08-09 2061
Java面试篇（JVM相关专题）
Spring事务
c1tenj2的博客
08-07 401
以银行转账为例，一次转账操作伴随着一个账户的扣钱和另一个账户的加钱，这个流程是一个原子操作，要么同时发生，一气呵成，要么都不做。AccountServiceImpl实现AccountService接口，里面只有一个转账方法AccountMapper以及其映射文件account数据库测试代码用1/0模拟程序运行时出现异常的情况由于没有开启事务，出现了莫名其妙少了100块钱的情况，说明这个事务不是连续的。
【SpringBoot】数据验证之分组校验
Jacker
08-05 376
下面通过示例演示分组校验。在上面的示例中，在@Validated注解中增加了{GroupA.class,Default.class}参数，表示对于定义了分组校验的字段使用GroupA校验规则，其他字段使用默认规则。@Length(min=20,max=30,message="必须在[20,30]")，groups={GroupA.class};@Length(min=30,max=40,message="必须在[30,40]",groups={GroupB.class})/**用户id**/
反射和注解
supercool7的博客
08-08 209
反射的基本步骤包括获取Class对象、获取类的信息（构造函数、方法、字段等），然后通过Constructor、Method、Field等类的实例进行具体的操作。注解以@符号开头，通常紧跟着一个标识符，后面可以跟一些参数，用于给类、方法、字段等添加元数据信息，这些信息可以在编译时、运行时被读取和处理。通过Class类，可以获取类的构造函数、方法、字段等信息，而不需要在编译时确定这些信息。Spring、SpringBoot、Mybatis等框架中都大量使用了反射机制。此外，开发者还可以定义自己的注解，通过。
Java | Leetcode Java题解之第324题摆动排序II
m0_57195758的博客
08-06 326
Java | Leetcode Java题解之第324题摆动排序II
JVM 加载阶段 Class对象加载位置是在 堆中还是方法区？
萧曳丶
08-06 312
Class对象的加载位置：Class对象本身是加载到堆区中的。类的类型信息加载位置：类的类型信息（元数据）是加载到方法区（或元空间）中的。因此，对于问题“jvm 加载阶段 Class加载到堆中还是方法区”，答案是：Class对象加载到堆中，而类的类型信息加载到方法区（或元空间）中。这两个区域在JVM的类加载过程中都扮演着重要的角色，共同支持着Java程序的运行。
dynamic-datasource+Mybatis多数据源使用
tiantiantbtb的博客
08-06 878
严格匹配数据源,默认false. true未匹配到指定数据源时抛异常,false使用默认数据源。#设置默认的数据源或者数据源组,默认值即为master。#去掉默认使用HikariCP。
javascript实现验证码倒计时
10-19
好的，以下是 JavaScript 实现验证码倒计时的代码： HTML 代码： ```html 获取验证码 ``` JavaScript 代码： ```javascript var btn = document.getElementById('btn'); var count = 60; // 倒计时时间 var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值