微信小程序抽签如何抽中(JavaScript实现班级抽签小程序)
类别:编程学习 浏览量:574
时间:2022-03-28 22:21:37 微信小程序抽签如何抽中
JavaScript实现班级抽签小程序本文实例为大家分享了JavaScript实现班级抽签小程序的具体代码,供大家参考,具体内容如下
项目展示
项目中假设一个班只有三十个人
html结构
<li class="outerContainer"> <li class="question">请问你要抽几个xx班的小宝贝呢?</li> <li class="number"> <input type="text" style="color: #999;" value="请输入需要的人数" onblur="if (this.value == '') {this.value = '请输入需要的人数';this.style.color = '#999';}" onfocus="if (this.value == '请输入需要的人数') {this.value = '';this.style.color = '#424242';}"> </li> <li class="btnWrapper"> <button>开始抽签</button> </li> <li class="viewli"></li> <li class="foot">制作者:chenyu-max</li> </li>
CSS层叠样式
.outerContainer { margin-top: 100px; } .question { margin-top: 30px; width: 100%; height: 50px; line-height: 50px; font-size: 25px; transition: all .3s linear; /* 颜色变化的时候,会有个渐变的效果 */ text-align: center; } .number { margin-top: 30px; display: block; left: 200px; text-align: center; } .number input { height: 30px; font-size: 20px; line-height: 30px; } .btnWrapper { margin-top: 30px; width: 100%; height: 30px; text-align: center; } .btnWrapper button { outline: none; color: rgb(233, 8, 8); cursor: pointer; border-radius: 15px; width: 100px; height: 25px; line-height: 19px; } .viewli { margin: 20px auto; width: 900px; height: 300px; text-align: center; font-size: 30px; line-height: 50px; border: 1px solid black; } .foot { margin: 0 auto; text-align: center; }
JS逻辑
获取dom元素
var input = document.getElementsByTagName('input')[0]; var viewli = document.getElementsByClassName('viewli')[0]; var btn = document.getElementsByTagName('button')[0]; var question = document.getElementsByClassName('question')[0];
其余变量
var arr = []; // 存放抽取处的学号 var count = 0; // 计数器,用以 question 的颜色修改
question的颜色变化
setInterval(function() { var temp = count % 6; switch (temp) { case 0: question.style.color = 'red'; break; case 1: question.style.color = 'green'; break; case 2: question.style.color = 'blue'; break; case 3: question.style.color = 'grey'; break; case 4: question.style.color = 'purple'; break; case 5: question.style.color = 'black'; break; default: break; } count++; }, 700);
抽奖逻辑
btn.onclick = function() { // 检查输入的内容是否是是1~30人 // 若是班级人数不止三十人,改成 input.value < 班级人数 + 1 var check = (function() { if (input.value > 0 && input.value < 31) { return true; } else { return false; } }()); // 如果输入的是正确的,那么进行抽签 if (check) { var num = input.value; arr = []; for (var i = 0; arr.length < num; i++) { // 生成1 ~ 30 的随机数 // 需要更改人数,直接修改 乘号后面的 30 未你们班需要的人数即可 var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30 var flag = true; arr.forEach(function(value) { // 遍历数组,防止生成的随机数和已有的数字重复 if (value == temp) { flag = false; } }) if (flag) { arr.push(temp); } } // 将抽出的人数的学号进行升序排序 arr.sort(function(a, b) { return a - b; }) var str = arr.join(", "); viewli.innerHTML = " <span style='color : red'>恭喜以下小可爱/帅哥 被抽中!</span> </br> " + str; } else { // 若不是,则输出错误提示 // 人数可以修改 viewli.innerHTML = "<span style='color : red'>请输入正确的人数(1 ~ 30)哦</span>"; } }
增加功能
document.onkeydown = function(e) { // 摁下回车键 触发 btn 的onclick事件 if (e.keyCode == 13) { btn.onclick(); } }
全部代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>给xx班小宝贝来个抽签</title> <link rel="icon" href=""> <style> .outerContainer { margin-top: 100px; } .question { margin-top: 30px; width: 100%; height: 50px; line-height: 50px; font-size: 25px; transition: all .3s linear; text-align: center; } .number { margin-top: 30px; display: block; left: 200px; text-align: center; } .number input { height: 30px; font-size: 20px; line-height: 30px; } .btnWrapper { margin-top: 30px; width: 100%; height: 30px; text-align: center; } .btnWrapper button { outline: none; color: rgb(233, 8, 8); cursor: pointer; border-radius: 15px; width: 100px; height: 25px; line-height: 19px; } .viewli { margin: 20px auto; width: 900px; height: 300px; text-align: center; font-size: 30px; line-height: 50px; border: 1px solid black; } .foot { margin: 0 auto; text-align: center; } </style> </head> <body> <li class="outerContainer"> <li class="question">请问你要抽几个xx班的小宝贝呢?</li> <li class="number"> <input type="text" style="color: #999;" value="请输入需要的人数" onblur="if (this.value == '') {this.value = '请输入需要的人数';this.style.color = '#999';}" onfocus="if (this.value == '请输入需要的人数') {this.value = '';this.style.color = '#424242';}"> </li> <li class="btnWrapper"> <button>开始抽签</button> </li> <li class="viewli"></li> <li class="foot">制作者:chenyu-max</li> </li> <script> var input = document.getElementsByTagName('input')[0]; var viewli = document.getElementsByClassName('viewli')[0]; var btn = document.getElementsByTagName('button')[0]; var question = document.getElementsByClassName('question')[0]; var arr = []; // 存放抽取处的学号 var count = 0; // 计数器,用以question 的颜色修改器 setInterval(function() { var temp = count % 6; switch (temp) { case 0: question.style.color = 'red'; break; case 1: question.style.color = 'green'; break; case 2: question.style.color = 'blue'; break; case 3: question.style.color = 'grey'; break; case 4: question.style.color = 'purple'; break; case 5: question.style.color = 'black'; break; default: break; } count++; }, 700); document.onkeydown = function(e) { // 摁下回车键 触发 btn 的onclick事件 if (e.keyCode == 13) { btn.onclick(); } } btn.onclick = function() { // 检查输入的内容是否是是1~30人 // 若是班级人数不止三十人,改成 input.value < 班级人数 + 1 var check = (function() { if (input.value > 0 && input.value < 31) { return true; } else { return false; } }()); // 如果输入的是正确的,那么进行抽签 if (check) { var num = input.value; arr = []; for (var i = 0; arr.length < num; i++) { // 生成1 ~ 30 的随机数 // 需要更改人数,直接修改 乘号后面的 30 未你们班需要的人数即可 var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30 var flag = true; arr.forEach(function(value) { // 遍历数组,防止生成的随机数和已有的数字重复 if (value == temp) { flag = false; } }) if (flag) { arr.push(temp); } } // 将抽出的人数的学号进行升序排序 arr.sort(function(a, b) { return a - b; }) var str = arr.join(", "); viewli.innerHTML = " <span style='color : red'>恭喜以下小可爱/帅哥 被抽中!</span> </br> " + str; } else { // 若不是,则输出错误提示 // 人数可以修改 viewli.innerHTML = "<span style='color : red'>请输入正确的人数(1 ~ 30)哦</span>"; } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js获取上个月第一天和最后一天
- nodejs部署上传文件(node.js使用express-fileupload中间件实现文件上传)
- 带农历的js日期控件
- react实现js控制样式(React + Threejs + Swiper 实现全景图效果的完整代码)
- js判断是否为手机访问
- Extjs updateProgress进度条的应用
- nodejs登录案例(利用Node.js创建一个密码生成器的全步骤)
- nodejs数据采集(nodejs获取表单数据的三种方法实例)
- html5音频处理(recorder.js 基于Html5录音功能的实现)
- python3json序列化(Python3.5 Json与pickle实现数据序列化与反序列化操作示例)
- jquery遍历json字符串
- 动态加载js脚本
- 微信浏览器中JS实现返回操作
- php 结果集转json(PHP的JSON封装、转变及输出操作示例)
- php验证码图解(php/JS实现的生成随机密码验证码功能示例)
- nodejs爬虫(node.js做一个简单的爬虫案例教程)
- 某知名企业绩效管理体系及薪酬分配体系操作手册(某知名企业绩效管理体系及薪酬分配体系操作手册)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)
- 华为 联想等46家公司笔试面试题,涉及各行各业,建议收藏(联想等46家公司笔试面试题)
- ()
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
热门推荐
- docker socket文件丢失(解决vscode docker插件docker.socket权限问题)
- 相对布局和线性布局的区别(面试必问:圣杯布局和双飞翼布局的区别)
- phpstudy不解析php代码(phpstudy伪静态设置的问题)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- 修改mysql安装服务名称(Apache为mysql以及自己的项目设置虚拟路径)
- 使用docker对集群进行管理(使用docker搭建kong集群操作)
- 如何重新配置mysql的端口(如何快速修改MySQL用户的host属性)
- MVC中的ActionResult
- sqlserver查看某个库所有表(SQL Server怎么找出一个表包含的页信息Page)
- sql server显示当前登录用户命令(SQL Server正确删除Windows认证用户的方法)