js点击按钮倒计时---servlet并接收

最新推荐文章于 2021-02-25 20:31:57 发布
VIP文章 最新推荐文章于 2021-02-25 20:31:57 发布
阅读量1.6k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： javascript 按钮倒计时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dada111111111/article/details/51335614
版权
在制作网站注册时，遇到了 手机验证码的问题，虽然不是做前端的，但是 作业需要，自己还是老实的写了个按钮倒计时的js事件。


主要实现的功能：

  1. 点击下按钮时，开始倒数计时。
  2. 当计数为0的时候，回到原状态，不进行计数
  3. 再次点击进行计数
实现步骤：
  1. 获得id对应的标签
  2. 设置该标签value为number--;从60倒数计时
  3. 计数为0，设置value=原内容,并将number重新赋值为60
  4. 计数不为0就setTimeout重复执行该function
<!DOCTYPE html>
<html>
<head lang="en">
最低0.47元/天 解锁文章
Damon-Da
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
点击实现倒计时,按钮变成不可点击,倒计时结束,按钮重新可点击
10-07
点击实现倒计时,按钮变成不可点击,倒计时结束,按钮重新可点击
js 点击按钮倒计时10秒小功能
weixin_47239395的博客
06-28 943
按钮点击倒计时,并且不可点击
Js中关于按钮倒计时显示（setTimeout 和 setInterval）
yicunyangguang的博客
02-24 4288
目标：实现一个按钮点击，同时按钮禁用并显示倒计时的js功能函数。 分析：首先要有一个按钮，绑定一个事件，这个事件功能就是定时改变按钮显示值，同时禁止按钮进行二次点击。 此功能函数需要使用js周期调用函数 setTimeout 或则setInterval，来定时改变显示值。 setTimeout 和 setInterval的区别是什么，又该如何选择呢？其实 setTimeout 和 setInterval 的最本质的区别是 触发 setTimeout 方法只执行一次，而触发 setInterval 方.
java.servlet js_从javascript调用Java servlet
weixin_39901213的博客
02-25 294
小编典典因此，您想将Ajax调用激发到servlet吗？为此，您需要XMLHttpRequestJavaScript中的对象。这是Firefox兼容的示例：var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState == 4) {var data = xhr.responseText;...
js调用后台servlet方法
xiao190128的专栏
01-17 6793
今天做历史记录查询功能，遇到了前后台方法互相调用的问题，研究了一下，把成功经验记录一二。 1.使用document.form.action方式 相关源码如下： *.js [javascript]    document.getElementById("sendPerson").value = SendPerson;   document.getElementById("curre
原生js实现倒计时--2018
10-20
本文主要介绍了原生js实现倒计时--2018的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
JS点击按钮自动倒计时代码.zip
07-05
JS点击按钮自动倒计时代码，示例一：要求用户阅读完条款内容才能激活按钮；示例二：要求用户激活短信通道向用户手机发送验证码。
元旦倒计时代码-javascript
12-09
元旦倒计时代码
07-倒计时.html
02-15
07-倒计时.html
jquery ajax的success回调函数中实现按钮置灰倒计时
12-10
主要是实现异步手机发送短信成功之后在ajax的success回调中实现将发送按钮置灰并倒计时，刚开始一直报js错误，问题可能出在于调用ajax之后this被更新，随意在这之前先把this对象赋给一个变量就没问题 按钮倒计时代码 代码如下: var wait = 60; get_code_time = function (o) { if (wait == 0) { o.removeAttribute(“disabled”); o.value = “免费获取验证码”; wait = 60; } else { o.setAttribute(“disabled”, true); o.value =
JS按钮倒计时函数
03-25
JS按钮倒计时函数
js调用后台servlet方法实例
12-09
1.使用document.form.action方式 相关源码如下： *.js [javascript] 代码如下:  document.getElementById(“sendPerson”).value = SendPerson;  document.getElementById(“currentTime”).value = currentTime();  document.getElementById(“message”).value = message;  document.getElementById(“r
计时器倒计时
01-02
js中计时器重要使用window.setInterval()方法和window.setTimeout()方法, 其中setInterval()方法的作用是每隔一段时间执行一次方法,而window.setTimeo...
js代码实现点击按钮出现60秒倒计时
11-26
此例子用Javascript实现点击按钮后，倒计时60秒才能再次点击发送验证码的功能。 例子1：Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /&...
如何开始使用bootstrap
dada111111111的博客
11-21 1150
之前便接触过bootstrap，借着这个很好的机会，希望能够去更详细的了解这个灵活，简洁，可拓展的前端工具集，当然Bootstrap也是最受欢迎的HTML，css和js框架，用于开发响应式布局（所谓的响应式布局就是能够解决不同设备的显示适应问题，能够兼容多个终端--详见:http://baike.baidu.com/link?url=eKKwCUETTHcBdh0C9TKXu-wuHFlr8nQx
html长度单位和水平居中总结part4
dada111111111的博客
11-20 449
水平居中
javascript之闭包
dada111111111的博客
11-22 428
看了很多篇关于闭包的文章（ps，当然很多语言中都存在闭包的概念，如c,c++等），很模糊也很难懂，下面简单的介绍一下今天所理解的内容。 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML
uni-app 按钮倒计时
最新发布
07-27
你可以使用uni-app的计时器功能来实现按钮倒计时。以下是一个简单的示例代码： ```vue <template> <view> <button @click="startCountdown" :disabled="countingDown">{{ buttonText }}</button> </view> </template> <script> export default { data() { return { buttonText: '获取验证码', countdown: 60, countingDown: false, timer: null }; }, methods: { startCountdown() { if (this.countingDown) return; this.countingDown = true; this.buttonText = `${this.countdown}秒后重新获取`; this.timer = setInterval(() => { if (this.countdown > 1) { this.countdown--; this.buttonText = `${this.countdown}秒后重新获取`; } else { clearInterval(this.timer); this.timer = null; this.countdown = 60; this.buttonText = '获取验证码'; this.countingDown = false; } }, 1000); } }, beforeDestroy() { if (this.timer) { clearInterval(this.timer); this.timer = null; } } }; </script> ``` 这个示例代码中，我们使用了一个计时器来实现按钮的倒计时效果。当点击按钮时，按钮会变为不可用状态，并显示倒计时的秒数。当倒计时结束后，按钮会恢复可用状态。你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值