班级抽签小程序——项目总结
项目展示
项目中假设一个班只有三十个人
html结构
<div class="outerContainer"><div class="question">请问你要抽几个xx班的小宝贝呢?</div><div 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';}"></div><div class="btnWrapper"><button>开始抽签</button></div><div class="viewDiv"></div><div class="foot">制作者:chenyu-max</div>
</div>
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;
}.viewDiv {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 viewDiv = document.getElementsByClassName('viewDiv')[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 < 班级人数 + 1var 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 ~ 30var 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(", ");viewDiv.innerHTML = " <span style='color : red'>恭喜以下小可爱/帅哥 被抽中!</span> </br> " + str;} else {// 若不是,则输出错误提示// 人数可以修改viewDiv.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;}.viewDiv {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><div class="outerContainer"><div class="question">请问你要抽几个xx班的小宝贝呢?</div><div 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';}"></div><div class="btnWrapper"><button>开始抽签</button></div><div class="viewDiv"></div><div class="foot">制作者:chenyu-max</div></div><script>var input = document.getElementsByTagName('input')[0];var viewDiv = document.getElementsByClassName('viewDiv')[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 < 班级人数 + 1var 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 ~ 30var 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(", ");viewDiv.innerHTML = " <span style='color : red'>恭喜以下小可爱/帅哥 被抽中!</span> </br> " + str;} else {// 若不是,则输出错误提示// 人数可以修改viewDiv.innerHTML = "<span style='color : red'>请输入正确的人数(1 ~ 30)哦</span>";}}</script>
</body></html>
班级抽签小程序——项目总结相关推荐
- ASimpleCache开源缓存框架使用之实现抽签小程序
使用ASimpleCache开源缓存框架实现抽签小程序 最近在考虑数据缓存的时候发现了这个ASimpleCache,简单到只需要拷贝一个Java文件,正好最近团队有个活动需要抽签,我就做了一个抽签的小 ...
- 【软件工程大作业】快递代拿小程序项目 (第十组)
快递代拿小程序 项目说明书 需求分析 技术路线 功能分析 小程序实际展示 1.首页 2.代拿快递页面 ①按快递点分类显示快递 ②按物品名模糊搜索 ③左滑选择接单 3.发布委托页面 ①新建订单 ②委托未 ...
- 微信小程序项目重构之Redux状态管理
1.以往处理状态的一些方式 第一种:App上挂globalData 这种方式就是直接写在App里面啦,取值赋值比较方便 App.js App({globalData: {name: '前端学者',// ...
- 微信小程序【腾讯云开发】创建并上线小程序项目(涉及-数据库操作)
学习 视频 网址 :[云开发实战]30分钟创建并上线小程序项目 https://www.bilibili.com/video/BV1Pc411h7RU 视频-项目-源码 : 链接 : https:// ...
- 小程序 --- 项目小练手Ⅰ
1. 接口文档 2. 帮助文档 小程序开发文档 mdn 阿里巴巴字体 iconfont 3. 项目搭建 3.1 新建小程序项目 填入自己的appid: wxdbf2b5e8c2f521a3 3.2 文 ...
- 微信小程序项目实战之天气预报
概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...
- 微信小程序项目实战之豆瓣天气
概述 微信小程序项目实战之豆瓣天气 详细 代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...
- 微信小程序项目开发教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序 ...
- 微信小程序项目图片如何保存到本地的方法
先来看小程序中的保存图片到相册的api wx.saveImageToPhotosAlbum({filePath : "./test.png", //这个只是测试路径,没有效果suc ...
- 小程序项目从Hbuilder转移到vscode步骤
小程序项目HbuilderX转移到vscode开发步骤 步骤总览 一.安装一个脚手架版本vue-cli@4,注意是@4版本的 npm install -g @vue/cli@4 二.在vue中创建一个 ...
最新文章
- 存货的计划属性设置(ATO模型和PTO模型)
- 深入解析oracle回滚段
- sqlserver55555_sqlserver把小数点后面多余的0去掉
- 四大开源分布式存储_ipfs分布式存储行业面临着四大主要风险,你知道是哪些吗?...
- Spring MVC——数据检验步骤
- 【OJ1768】最大子矩阵
- 华为鸿蒙安全认证,手机系统哪家强,华为鸿蒙系统获得国际安全标准最高等级认证,强不强?...
- unity 打开项目路径无效_unity3d建立的文件有中文路径,现在新建了项目打不开了...
- Android自定义控件之自定义Toast
- Android studio的错误记录
- blender 中文手册 Blender从入门到精通
- 阈值分割法——最佳阈值的选择问题
- 计算机网络管理员基础pdf,复习题计算机网络管理员高级.pdf
- Mac安装原版Windows7无法验证AppleSSD.sys文件数字签名解决办法
- 鲁百年创新设计思维学习总结
- apache 启动失败错误排查
- 打印机无法打印的一些解决办法
- 单片机串口通信的多字节传输
- 程序员成长的10条体会
- java如何保证数据安全_java高并发下怎么保障数据安全?有哪些办法?