当前位置: 首页 > news >正文

web前端JS基础------制作一个获取验证码

1,需要一个定时器,和一个button,通过点击事件启动获取验证码

2,参考代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" name="btn" id="btn" value="获取验证码" /><!-- 用于获取验证码的按钮标签 --><script type="text/javascript">var btn = document.getElementById('btn');//通过ID获取到该标签var num = 60;//设置获取验证码持续时间btn.onclick = function(){//通过点击事件,启动获取验证码函数cd();}	function cd(){		//定义验证码获取函数num--;if(num==0){num = 60;btn.disabled = false;btn.value = '获取验证码';return;}btn.disabled = true;//正在获取验证码btn.value = num + 's后重新获取';setTimeout('cd()',1000);.//采用setTimeout函数每秒调用一次cd()}</script></body>
</html>

3,结果参考

http://www.lryc.cn/news/220273.html

相关文章:

  • MyBatis面经
  • SpringBoot基础(六)-- 辅助功能之一 -- 内嵌tomcat
  • K8s:部署 CNI 网络组件+k8s 多master集群部署+负载均衡及Dashboard k8s仪表盘图像化展示管理
  • 「直播回放」使用 PLC + OPC + TDengine,快速搭建烟草生产监测系统
  • 私域流量搭建与运营,技巧全攻略!
  • AWS SAP-C02教程0--课程概述
  • RFC使用与WebService
  • 打造全球化电商平台,多语言商城系统助您开拓海外市场
  • 【滑动窗口】篮里到底能装 “几个水果” 呢?
  • newstarctf2022week2
  • 集群调度-01
  • 【软件工程】金管局计算机岗位——软件测试的分类(⭐⭐⭐⭐)
  • Halcon WPF 开发学习笔记(1):Hello World小程序
  • pix2tex - LaTeX OCR 安装使用记录
  • 前端框架Vue学习 ——(四)Axios
  • 将json数据导入到ES集群——解决方案对比填坑日记
  • C语言----------#pragma预处理分析
  • 数据库中的时间django转换成None
  • 八种流行的网络协议
  • Qwt QwtKnob绘制旋钮
  • docker部署elk
  • 护网蓝队初级面试题摘录(下)
  • 通过51单片机控制SG90舵机按角度正反转转动
  • uniapp写一个计算器用于记账(微信小程序,APP)
  • 前端的几种网络请求方式
  • Kubernetes技术与架构-存储 4
  • jbase编译与部署的优化
  • Filter 和 Listener
  • 【正则表达式】中的“\b“
  • FPGA高端项目:图像采集+GTP+UDP架构,高速接口以太网视频传输,提供2套工程源码加QT上位机源码和技术支持