js原生简单生成卡密例子

一个非常非常简单的案例

例子可指定生成卡密数量和长度

先看生成卡密的函数

//生成卡密函数function randomWord(length) {var str = '',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'];//每位随机字符 for (let i = 0; i < length; i++) {pos = Math.round(Math.random() * (arr.length - 1));str += arr[pos];}return str;}

思路就是随机拿到arr数组中提前设定好的值组合输出

看完整实例

<body><div><input type="text" class="nmb" placeholder="输入卡密数量"><br><br><input type="text" class="length" placeholder="输入卡密长度，例如16"><br><br><button onclick="key()">生成</button></div><div class="key"><ul></ul></div><script>//生成卡密函数function randomWord(length) {var str = '',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'];//每位随机字符 for (let i = 0; i < length; i++) {pos = Math.round(Math.random() * (arr.length - 1));str += arr[pos];}return str;}//点击事件function key() {var nmb = document.querySelector('.nmb').value; //获取卡密数量var long = document.querySelector('.length').value; //获取卡密长度document.querySelector('.key ul').innerHTML = ''; //清空旧的卡密列表//循环输出卡密for (let i = 0; i < nmb; i++) {var key = randomWord(long);console.log(key.length);var li = document.createElement('li');li.innerHTML = key;document.querySelector('.key ul').appendChild(li);}}</script>
</body>

生成一下

js原生简单生成卡密例子相关推荐

js原生给生成的html添加点击事件,原生js为动态元素添加监听事件
//已存在div //创建标签 function createpage(){ var span=document.createElement('span') span.innerHTML=" ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
原生JS实现简单放大镜效果
[前言] 本文介绍下原生JS实现简单图片放大镜效果 [主体] 时间问题,直接上源码 <!DOCTYPE html> <html> <head><meta ch ...
深圳java培训：使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...
html 随机字母,JS简单生成由字母数字组合随机字符串示例
本文实例讲述了JS简单生成由字母数字组合随机字符串.分享给大家供大家参考,具体如下: 前言最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一奇 ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...
api怎么写_使用Node.js原生API写一个web服务器
Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...
animate用法 js原生_animateplus.js 教程
animateplus(Animate Plus)是一个基于现在的网络的动画模块.Animate Plus 是一个专注于性能和创作灵活性的 JavaScript 动画库.它的目标是提供稳定的 60 F ...

js原生简单生成卡密例子

js原生简单生成卡密例子相关推荐

最新文章

热门文章