vue3获取验证码+背景切换

@tg

已于 2023-12-25 18:16:49 修改

阅读量1k

点赞数 20

文章标签： javascript 前端 vue.js

于 2023-12-24 23:44:21 首次发布

本文链接：https://blog.csdn.net/m0_74060440/article/details/135188972

版权

需要安装element-plus组件库

用户获取验证码后按钮会被禁用，等待10秒后重新获取验证码

验证码

元素布局template部分

<template>
    <div>
        <el-button type="success" round :disabled="isSend" @click="countDown">
            {{ codeName }}
        </el-button>
    </div>
</template>

script功能部分

<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus'

const isSend = ref(false); // 禁用
const codeName = ref("发送验证码");
const totalTime = 10; // 10秒倒计时
let timer = null; // 定时器
const code = ref() // 验证码存放处
const col = ref("") // 背景颜色rgb()

const countDown = () => {
    if (isSend.value) return;
    isSend.value = true;
    codeName.value = `${totalTime}s后重新发送`;

    // 生成随机验证码
    const len = 6;
    const codeList = [];
    const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789";
    const charsLen = chars.length;
    for (let i = 0; i < len; i++) {
        codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)));
    }
    code.value = codeList.join("")
    console.log(codeList.join(""));

    ElMessage({
        message: '验证码提示---' + code.value,
        type: 'success',
    })
    
    // 倒计时
    let currentTime = totalTime;
    timer = setInterval(() => {
        currentTime--;
        codeName.value = `${currentTime}s后重新发送`;
        if (currentTime < 1) {
            clearInterval(timer);
            codeName.value = "重新发送验证码";
            isSend.value = false;
        }
    }, 1000);
};
</script>

样式这里没有

随机背景颜色

template部分

<template>
    <div>
        <div class="box">
            <h2>随机切换背景</h2>
        </div>
    </div>
</template>

script部分

<script setup>
// 生成一个随机的颜色
const randomColor = () => {
    const r = Math.floor(Math.random() * (255 - 0) + 0);
    const g = Math.floor(Math.random() * (255 - 0) + 0);
    const b = Math.floor(Math.random() * (255 - 0) + 0);
    return "rgb(" + r + "," + g + "," + b + ")"
}

const changecolor = () => {
    const box = document.querySelector('.box')
    const color = randomColor()
    box.style.backgroundColor = color
}
</script>

style部分

<style scoped>
.box {
    height: 100px;
    width: 200px;
    background-color: bisque;
    text-align: center;
    line-height: 100px;
}
</style>

完整代码：希望能帮助到你

<template>
    <div>
        <el-button type="success" round :disabled="isSend" @click="countDown">
            {{ codeName }}
        </el-button>
        <div class="box">
            <h2>随机切换背景</h2>
        </div>
    </div>
</template>
  
<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus'

const isSend = ref(false); // 禁用
const codeName = ref("发送验证码");
const totalTime = 10; // 10秒倒计时
let timer = null; // 定时器
const code = ref() // 验证码存放处
const col = ref("") // 背景颜色rgb()

const countDown = () => {
    if (isSend.value) return;
    isSend.value = true;
    codeName.value = `${totalTime}s后重新发送`;

    // 生成随机验证码
    const len = 6;
    const codeList = [];
    const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789";
    const charsLen = chars.length;
    for (let i = 0; i < len; i++) {
        codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)));
    }
    code.value = codeList.join("")
    console.log(codeList.join(""));

    ElMessage({
        message: '验证码提示---' + code.value,
        type: 'success',
    })

    ElMessage({
        message: '背景颜色提示---' + randomColor(),
        type: 'success',
    })

    changecolor()
    // 倒计时
    let currentTime = totalTime;
    timer = setInterval(() => {
        currentTime--;
        codeName.value = `${currentTime}s后重新发送`;
        if (currentTime < 1) {
            clearInterval(timer);
            codeName.value = "重新发送验证码";
            isSend.value = false;
        }
    }, 1000);
};

// 生成一个随机的颜色
const randomColor = () => {
    const r = Math.floor(Math.random() * (255 - 0) + 0);
    const g = Math.floor(Math.random() * (255 - 0) + 0);
    const b = Math.floor(Math.random() * (255 - 0) + 0);
    return "rgb(" + r + "," + g + "," + b + ")"
}

const changecolor = () => {
    const box = document.querySelector('.box')
    const color = randomColor()
    box.style.backgroundColor = color
}

</script>
  
<style scoped>
.box {
    height: 100px;
    width: 200px;
    background-color: bisque;
    text-align: center;
    line-height: 100px;
}
</style>

效果展示：

练习验证码实现