60s倒计时
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
<script type="text/javascript">
var countdown=60;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value="免费获取验证码";
countdown = 60;
return;
} else {
val.setAttribute("disabled", true);
val.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(val)
},1000)
}
</script>
</body>
</html>
60s倒计时的更多相关文章
- js实现60s倒计时效果
适用于获取验证码等其他场景,下面代码直接粘贴句可以使用 // 60s获取验证码的js与html var timer = null; var count = 60; $('.box>button' ...
- React 60S倒计时
React 60S倒计时 1.设置状态: 2.函数主体: 3.应用: 4..效果图:
- 6.短信验证码60s倒计时
短信验证码60s倒计时 html: <input type="button" class="btn btn-primary" value="免 ...
- jquery 60s倒计时
前端开发中经常用到的发送按钮倒计时,每次都是重写,挺麻烦的,记录一下,以后直接来复制代码 <!DOCTYPE html> <html> <head> <met ...
- React实战之60s倒计时按钮(发送短信验证按钮)
React实战之60s倒计时按钮——短信验证按钮 导入:(antd组件——Form表单) import { Button, Form, Input } from 'antd'; const FormI ...
- JS实现60s倒计时(亲测有效),及span标签如何使用和禁用onclick事件
效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取. 另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的 ...
- 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...
- 发送验证码60s倒计时实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 验证码60s倒计时前端效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- JavaScript基础 -- 焦点图轮播(转载)
首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...
- 定时删除clientmqueue
* * */1 * * cd /var/spool; cp -r clientmqueue /home/data/xl_project/var_spool_clientmqueue_$(date + ...
- HTML <iframe> 标签的 src 属性
HTML <iframe> 标签的 src 属性 <iframe src="/index.html"> <p>Your browser does ...
- 容器HashMap原理(学习)
一.概述 基于哈希表的 Map 接口的非同步实现,允许使用 null 值和 null 键,不保证映射的顺序 二.数据结构 HashMap实际上是一个“链表散列”的数据结构,即数组和链表的结合体:Has ...
- ubuntu安装virtualbox
1.下载 2.sudo dpkg -i virtualbox-5.2_5.2.10-122088_Ubuntu_xenial_amd64.deb $sudo dpkg -i virtualbox-5. ...
- matlab绘制曲线对比图
>> clear;>> x1=[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8];>> y1=[0,0.55,0.69,0.86,0.93,0. ...
- Kettle 连接 oracle 报错:could not be found, make sure the 'Oracle' driver (jar file) is installed.
我的ETL版本为6.0 oracle版本为11.2.0 报错如下: Driver class 'oracle.jdbc.driver.OracleDriver' could not be found, ...
- 【转载】Java - Wait & Notify
[本文转自]http://www.cnblogs.com/dolphin0520/p/3920385.html 这三个方法的文字描述可以知道以下几点信息: 1)wait().notify()和noti ...
- 牛客网NOIP赛前集训营 提高组(第七场)
中国式家长 2 链接:https://www.nowcoder.com/acm/contest/179/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K, ...
- webpack+vue-cli中proxyTable配置接口地址代理详细解释
在vue-cli项目中config目录里面的index.js配置接口地址代理,详细解释如下图所示: