这篇文章主要为大家详细介绍了Java脚本语言实现班级抽签小程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Java脚本语言实现班级抽签小程序的具体代码，供大家参考，具体内容如下
项目展示
项目中假设一个班只有三十个人
html结构
div class='outerContainer '
div class='问题'请问你要抽几个xx班的小宝贝呢？/div
div class='number '
input type=' text ' style=' color:# 999；'值='请输入需要的人数onblur=' if(this。value==“”){ this。值='请输入需要的人数；这个。风格。color=' # 999}' onfocus='if (this.value=='请输入需要的人数){这个。值=" "；这个。风格。color=' # 424242}'
/div
div class='btnWrapper '
按钮开始抽签/按钮
/div
div class='viewDiv'/div
div class='英尺'制作者：陈余-最大/分区
/div
CSS层叠样式
。外部容器{
边距-顶部：100像素
}。问题{
边距-顶部：30px
宽度：100%;
高度：50px
行高：50px
字体大小：25px
过渡：全。3s线性；
/* 颜色变化的时候，会有个渐变的效果*/
文本对齐：居中；
}。号码{
边距-顶部：30px
显示：块；
左：200像素
文本对齐：居中；
}。数字输入{
高度：30px
字体大小：20px
行高：30px
}。btnWrapper {
边距-顶部：30px
宽度：100%;
高度：30px
文本对齐：居中；
}。btnWrapper按钮{
大纲：无；
颜色：rgb(233，8，8)；
光标：指针；
边框半径：15px
宽度：100像素
高度：25px
行高：19px
}。viewDiv {
边距：20px自动；
宽度：900像素
高度：300像素
文本对齐：居中；
字体大小：30px
行高：50px
边框：1px纯黑；
}。脚{
边距：0自动；
文本对齐：居中；
}
JS逻辑
获取数字正射影像图元素
var输入=文档。getelementsbytagname(' input ')[0]；
var view div=文档。getelementsbyclassname(' view div ')[0]；
var BTN=文档。getelementsbytagname(' button ')[0]；
var问题=文档。getelementsbyclassname(' question ')[0]；
其余变量
var arr=[]；//存放抽取处的学号
var count=0；//计数器，用以问题的颜色修改
问题的颜色变化
setInterval(function() {
var temp=count % 6；
开关（温度){
案例0:
问题。风格。color=' red
打破；
案例1:
问题。风格。color=' green
打破；
案例二：
问题。风格。color=' blue
打破；
案例三：
问题。风格。color=' grey
打破；
案例4:
问题。风格。color='紫色'；
打破；
案例5:
问题。风格。color=' black
打破；
默认值：
打破；
}
数数；
}, 700);
抽奖逻辑
btn.onclick=function() {
//检查输入的内容是否是是1~30人
//若是班级人数不止三十人，改成输入值班级人数一
var check=(function() {
if (input.value 0 input.value 31) {
返回真实的
}否则{
返回错误的
}
}());
//如果输入的是正确的，那么进行抽签
如果（检查){
var num=输入值
arr=[]；
for(var I=0；数组长度编号；i ) {
//生成1 ~ 30 的随机数
//需要更改人数，直接修改乘号后面的30 未你们班需要的人数即可
var temp=数学。地板(数学。random()* 30 ^ 1)；//1 ~ 30
var flag=true
arr.forEach(函数（值){
//遍历数组，防止生成的随机数和已有的数字重复
如果(值==温度){
标志=假
}
})
如果（标志){
由…改编推(temp)；
}
}
//将抽出的人数的学号进行升序排序
排列排序(函数(a，b) {
返回a-b；
})
var str=arr.join('，')；
查看分区。innerhtml=' span style=' color:red '恭喜以下小可爱/帅哥被抽中！/span/br ' str；
}否则{
//若不是，则输出错误提示
//人数可以修改
查看分区。innerhtml=' span style=' color:red '请输入正确的人数(1 ~ 30)哦/span '；
}
}
增加功能
文档。onkeydown=函数(e){
//摁下回车键触发btn的onclick事件
if (e.keyCode==13) {
BTN。onclick()；
}
}
全部代码
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '
标题给xx班小宝贝来个抽签/标题
link rel='icon' href=' '
风格。外部容器{
边距-顶部：100像素
}。问题{
边距-顶部：30px
宽度：100%;
高度：50px
行高：50px
字体大小：25px
过渡：全。3s线性；
文本对齐：居中；
}。号码{
边距-顶部：30px
显示：块；
左：200像素
文本对齐：居中；
}。数字输入{
高度：30px
字体大小：20px
行高：30px
}。btnWrapper {
边距-顶部：30px
宽度：100%;
高度：30px
文本对齐：居中；
}。btnWrapper按钮{
大纲：无；
颜色：rgb(233，8，8)；
光标：指针；
边框半径：15px
宽度：100像素
高度：25px
行高：19px
}。viewDiv {
边距：20px自动；
宽度：900像素
高度：300像素
文本对齐：居中；
字体大小：30px
行高：50px
边框：1px纯黑；
}。脚{
边距：0自动；
文本对齐：居中；
}
/风格
/头
身体
div class='outerContainer '
div class='问题'请问你要抽几个xx班的小宝贝呢？/div
div class='number '
input type=' text ' style=' color:# 999；'值='请输入需要的人数onblur=' if(this。value==“”){ this。值='请输入需要的人数；这个。风格。color=' # 999}' onfocus='if (this.value=='请输入需要的人数){这个。值=" "；这个。风格。color=' # 424242}'
/div
div class='btnWrapper '
按钮开始抽签/按钮
/div
div class='viewDiv'/div
div class='英尺'制作者：陈余-最大/分区
/div
脚本
var输入=文档。getelementsbytagname(' input ')[0]；
var view div=文档。getelementsbyclassname(' view div ')[0]；
var BTN=文档。getelementsbytagname(' button ')[0]；
var问题=文档。getelementsbyclassname(' question ')[0]；
var arr=[]；//存放抽取处的学号
var count=0；//计数器，用以问题的颜色修改器
setInterval(function() {
var temp=count % 6；
开关（温度){
案例0:
问题。风格。color=' red
打破；
案例1:
问题。风格。color=' green
打破；
案例二：
问题。风格。color=' blue
打破；
案例三：
问题。风格。color=' grey
打破；
案例4:
问题。风格。color='紫色'；
打破；
案例5:
问题。风格。color=' black
打破；
默认值：
打破；
}
数数；
}, 700);
document . onkeydown=function(e){
//按回车键触发btn的onclick事件
if (e.keyCode==13) {
BTN . onclick()；
}
}
btn.onclick=function() {
//检查输入内容是否为1~30人。
//如果类大小超过30，则将其更改为input.value类大小1
var check=(function() {
if (input.value 0 input.value 31) {
返回true
}否则{
返回false
}
}());
//如果输入正确，抽签。
如果(检查){
var num=input.value
arr=[]；
for(var I=0；数组长度编号；i ) {
//生成一个从1到30的随机数
//如果需要更改人数，可以直接更改乘号后面30个你们班不需要的人数。
var temp=math . floor(math . random()* 30 1)；//1 ~ 30
var flag=true
arr.forEach(函数(值){
//遍历数组，防止生成的随机数与现有数重复。
if(值==温度){
flag=false
}
})
如果(标志){
arr . push(temp)；
}
}
//将抽中人数的学号按升序排序。
arr.sort(函数(a，b) {
返回a-b；
})
var str=arr.join('，')；
view div . innerhtml=' span style=' color:red '恭喜以下萌/帅哥被抽中！/span/br ' str；
}否则{
//如果不是，则输出错误提示。
//人数可以修改
查看分区。innerhtml=' span style=' color:red '请输入正确的人数(1 ~ 30)哦/span '；
}
}
/脚本
/body
/html
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。