vue 随机号码快速跳动
Vue 快速 随机 跳动 号码
2023-09-11 14:17:02 时间
vue 随机号码快速跳动
vue 组件, 常用于抽奖号码生成。当点击生成的时候,界面上会随机快速跳动号码,停止时获取号码。
<template>
<div class="about">
<input v-model="val" />
<button @click="getVal">{{ loading ? `停止` : `生成` }}</button>
</div>
</template>
<script>
/*
** randomWord 产生任意长度随机字母数字组合
** randomFlag-是否任意长度 min-任意长度最小位[固定位数] max-任意长度最大位
** xuanfeng 2014-08-28
*/
function randomWord(randomFlag, min, max) {
var str = "",
range = min,
arr = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
"o",
"p",
"q",
"r",
"s",
"t",
"u",
"v",
"w",
"x",
"y",
"z",
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
];
// 随机产生
if (randomFlag) {
range = Math.round(Math.random() * (max - min)) + min;
}
for (var i = 0; i < range; i++) {
let pos = Math.round(Math.random() * (arr.length - 1));
str += arr[pos];
}
return str;
}
export default {
data() {
return {
loading: undefined, // 生成器
val: ``,
};
},
methods: {
getVal() {
// 定时器存在时清除定时器
if (this.loading) {
this.loading = clearInterval(this.loading);
this.val = `123456`; // 停止后实际要指定的值
} else {
this.loading = setInterval(() => {
this.val = randomWord(true, 5, 5);
}, 0);
}
},
},
computed: {},
components: {},
};
</script>
相关文章
- Vue sso认证快速接入实践
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Lazy Load a Route by using the Dynamic Import in Vue.js
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue-webpack快速建立项目模板
- 使用vue搭建应用六实现登录页
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue.js3:用qrcode-parser解析二维码图片(vue@3.2.36 / qrcode-parser@2.0.4)
- 后台管理系统的权限以及vue处理权限的思路
- 在Chrome console里修改Vue界面元素,更新如何刷新回UI?
- Vue项目使用file-saver将html转word文件、把html内容下载保存导出到本地生成doc文件包括图片:前端下载利器FileSaver
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- vue文件命名规范和文件夹命名规范
- vue品牌列表案例demo
- 一文你带快速认识Vue-Router路由
- vue 使用 websocket
- vue学习起步,vue环境安装
- 226:vue+openlayers利用swipe插件实现左卷帘功能
- Vue.js——60分钟快速入门
- vue---进行post和get请求
- Vue(二)vue 指令及用法举例
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- 基于Java+SpringBoot+Vue前后端分离求职招聘管理系统设计与实现(有视频讲解)
- 【三十天精通Vue 3】第五天 Vue 3指令详解
- vue快速学习03、ant-design
- vue快速学习01、环境与常用属性标签
- vue登录逻辑实现
- Vue: vue-router路由