前端react验证码6位随机码(大小写字母+数字)

简介: 前端react验证码6位随机码(大小写字母+数字)

前端react验证码6位随机码(大小写字母+数字)

import React, { useState } from 'react';
const Index = () => {
    const [VCodeTime, setVCodeTime] = useState(60);
    const [sendSwitch, setSendSwitch] = useState(true);
    const randomNum =  ()=> {
        let arr = [1, 2, 3] // 保证六位随机码包含数字+大写字母+小写字母
        let code = ''
        function getRandom (min, max) {
          return Math.round(Math.random() * (max - min) + min)
        }
        function randomsort (a, b) {
          return Math.random() > 0.5 ? -1 : 1
          // 用Math.random()函数生成0~1之间的随机数与0.5比较,返回-1或1
        }
        for (let i = 0; i < 3; i++) {
          arr.push(getRandom(1, 3)) // 补成六位
        }
        arr.sort(randomsort) // 打乱数组
        for (let i = 0; i < 6; i++) {
          let type = arr[i]
          switch (type) {
            case 1:
              code += String.fromCharCode(getRandom(48, 57)) // 数字
              break
            case 2:
              code += String.fromCharCode(getRandom(65, 90)) // 大写字母
              break
            case 3:
              code += String.fromCharCode(getRandom(97, 122)) // 小写字母
              break
          }
        }
        console.log(code)
      }
    // 点击发生验证码 
    const sendCode = () => {
        if (sendSwitch) {
            // 防止在发送验证码过程中再次点击
            setSendSwitch(!sendSwitch); 
            let time = 60 //60秒
            // 调用随机码函数
            randomNum()
            // 定时器
            let timer = setInterval(() => {
                time--;
                setVCodeTime(time);
                // 一分钟后清空定时器
                if (time === 0) {
                    clearInterval(timer);
                    setVCodeTime(60); 
                    // 清空后 控制器再次变为true
                    setSendSwitch(true);
                }
            }, 1000);
        }
        return
    };
    return (
        <div style={{ display: 'flex' }}>
            <input />
            <div
                style={sendSwitch ? { color: 'blue' } : { color: '#9999', cursor: 'not-allowed', left: '250px' }}
                onClick={sendCode}
            >
                发送验证码 {sendSwitch ? '' : `${VCodeTime}`}
            </div>
        </div>
    );
};
export default Index;
相关文章
|
3天前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
|
2天前
|
前端开发 JavaScript 开发者
前端框架与库 - React生命周期与Hooks
【7月更文挑战第13天】React 框架革新UI构建,引入Hooks简化组件状态管理和副作用处理。组件生命周期涉及挂载、更新、卸载,对应不同方法,如`componentDidMount`、`shouldComponentUpdate`等,但现在推荐使用`useState`和`useEffect` Hooks。`useEffect`处理副作用,需注意清理和依赖数组。避免问题的关键在于正确使用Hooks和理解其工作模式,以构建高效应用。
|
9天前
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
14 1
|
13天前
|
前端开发 JavaScript 数据管理
前端框架对比:React、Vue与Angular
【7月更文挑战第2天】React、Vue和Angular是前端三大框架,各有特色。React以组件化和虚拟DOM著称,适合大型SPA;Vue轻量且易用,适用于快速开发;Angular是全面解决方案,适合复杂应用,但学习成本高。选择取决于项目需求和团队技能。
|
18天前
|
前端开发 JavaScript 开发者
探索现代前端框架:从React到Vue.js
【6月更文挑战第26天】在数字时代的浪潮中,前端框架如同建筑的基石,支撑着互联网界面的创新与发展。本文将带领读者穿梭于React与Vue.js这两个最受欢迎的前端框架之间,揭示它们的核心特性、设计理念以及在实际开发中的应用差异。通过比较分析,我们将理解每个框架的优势和局限,并探索如何根据项目需求作出明智的选择。加入我们,一起深入前端技术的瑰丽世界,发现构建未来网络界面的无限可能。
|
19天前
|
前端开发 JavaScript 数据管理
引领潮流:React框架在前端开发中的革新与实践
React,始于2013年,由Facebook驱动,以其组件化、Virtual DOM、单向数据流和Hooks改革前端。组件化拆分UI,提升代码复用;Virtual DOM优化渲染性能;Hooks简化无类组件的状态管理。庞大的生态系统,包括Redux、React Router等库,支持各种需求。例如,`useState` Hook在计数器应用中实现状态更新,展示React的实用性。React现已成为现代Web开发的首选框架。【6月更文挑战第24天】
94 2
|
29天前
|
前端开发 JavaScript 测试技术
Jest与React Testing Library:前端测试的最佳实践
Jest和React Testing Library是React应用测试的核心工具。安装相关依赖后,在`jest.config.js`中配置Jest。测试时,编写描述性测试用例,使用`render`、`fireEvent`和`screen`来检查组件行为。Jest提供模拟功能,如模拟API调用。测试组件交互性时,模拟用户行为并验证状态变化。确保覆盖边缘情况,使用代码覆盖率报告评估测试完整性,并将测试集成到CI流程中。
21 1
|
13天前
|
JavaScript 前端开发 API
koa2使用svg-captcha生成验证码接口(含前端vue项目中使用)
koa2使用svg-captcha生成验证码接口(含前端vue项目中使用)
25 0
|
1月前
|
前端开发
前端react入门day02-React中的事件绑定与组件
前端react入门day02-React中的事件绑定与组件
|
1月前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?