利用js在页面打出随机座位标

最新推荐文章于 2023-07-15 15:19:29 发布
最新推荐文章于 2023-07-15 15:19:29 发布
阅读量823 收藏 2
点赞数 1
分类专栏： 每日练习总结 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53605194/article/details/118002197
版权
该博客介绍了如何利用JavaScript、HTML和CSS来创建一个随机座位分配系统。首先，通过HTML和CSS设计座位图，然后将人员名单存入数组。接着，利用JavaScript的Math.random()方法抽取随机人员，并确保不重复分配。通过创建函数和使用splice、push操作数组，将随机抽取的名字填充到座位上。最后，添加点击事件来启动和停止座位分配过程。
摘要由CSDN通过智能技术生成

首先明确思路

1、利用html和css打出座位图；

2、把人名存入数组；

3、在script中获取id等选择器；

4、利用random获取每次随机抽出的人（数）；

5、创建一个函数，变量一个新的空数组，用来存取每次随机抽的人；避免重复利用splice删除每次随机抽的人并利用push存入新的数组

6、将存入的新数组对应放到每个li中

7、点击事件，点

最低0.47元/天 解锁文章
想发财的小王
关注
专栏目录
JS(第八课)循环语句中常用到的案例
qq_56248592的博客
10-18 1287
循环语句常用到的案例
数据结构代码题（面试必备）
weixin_37846736的博客
05-26 3314
本文是自己总结的面试中遇到的各种手写或者在线测试的代码题，汇总在此，解法大多参考了众多别人的方法，从各种途径搜罗来的相对简单的解法。但是当时是为了自己面试积累的，并没有记录下各个大神的链接，感谢曾经参考过的各位网上的大佬们提供的解法，这些代码全部都自己运行过没有问题，汇总一下提供给大家做个参考，也能供自己以后查阅。 栈和队列 (1) python实现栈 后进先出 class Stack(): def __init__(self,size): self.size=size
seat-map.js:互动式座位图
05-28
安装 $ npm install @tixel/seat-map 进口 在构建系统中，导入createSeatMap工厂功能方法和venues对象，该对象只是场所名称的关键值对。 import { createSeatMap , venues } from '@tixel/seat-map' window . seatMapJS = { venues : venues , create : createSeatMap , } 使成为 要初始化座位图，请将目标和场所传递给createSetMap函数。 它将异步下载座位图并进行渲染。 < script > seatMapJS . create ( { target : '#seat-map' , venue : seatMapJS . venues . rodLaver ,
js随机生成座号
weixin_30294021的博客
09-20 250
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .maxBox { ...
js实现随机点名表
Areyouawake的博客
06-19 976
一个简易的点名表 - css样式 <style> .box{ width: 350px; height: 300px; background-color: antiquewhite; margin: 0 auto; text-align: center; } #names{ width: 260
js座位表小案例
2301_76140376的博客
01-14 220
var oipt=document.querySelector('input'); var obtn=document.querySelector('button'); var ospa=document.querySelectorAll('span'); var a=0; obtn.onclick=function(){ if(a
seatchart.js：:seat::world_map:创建漂亮的设计座位图
02-05
用法 首先，将库与样式表和生成座位表的脚本链接在一起。 < link rel =" stylesheet " href =" /path/to/seatchart.css " > < script type =" text/javascript " src =" /path/to/seatchart.js " > </ script > < script > var options = { // Reserved and disabled seats are indexed // from left to right by starting from
学校考试座位安排系统
02-28
4. **打印功能**：系统提供考号标签和座位表的打印功能，教师可以轻松打印出座位安排表贴在教室，同时也可以打印考号标签让学生贴在试卷上。 5. **调整与修改**：如果需要对个别学生的座位或考号进行调整，系统应...
利用JS模拟排队系统
weixin_34162629的博客
03-29 3580
我爱撸码，撸码使我感到快乐！大家好，我是Counter。今天给大家分享的是js模拟排队系统，刚开始有排队序列，序列里有vip用户和普通用户，vip用户永远位于普通用户的前面，只有当当前vip用户都办理好手续，才会叫号普通用户，每5秒产生一个随机客户。效果如图： // 函数的闭包，立即执行 var autoPerson = (function () { ...
JQuery表格，移动层操作（用于选择座位）
03-02
JQuery表格，移动层操作（用于选择座位）,主要用Jquery实现表格单元格操作，可以选择一个或多个表格的单元格，鼠标移到单元格上时，显示单元格的值，主要用于选择电影院座位，选择篮球场座位等……
JS交互式办公室座位排座代码
06-24
JS交互式办公室座位排座代码是一款自定义设置座位行数和列数，进行座位填充，桌子，过道，主席台排列位置。
可任意拖动排位的学生座次表
12-10
笔者所在的学校，几年来，每个班级都在80人以上。班主任每次给学生排座位，都花费了几十分钟。有了这个程序，几分钟搞定。
js 动态生成电影院座位图
最新发布
pig_ning的博客
07-15 650
js 动态生成电影院座位图
javascript案例11——摇号、点名、随机点名
努力、拼搏、奋进
05-07 1100
一、案例描述 点击开始按钮，所有的开始滚动显示，在不点击停止的情况下，“开始”按钮无法再次点击。之后停止之后才能再开始点名。 二、案例效果演示 三、案例局部代码 html代码： <h1 id="h1"></h1> <button onclick="start()">开始</button> <button onclick="stops()">停止</button> js代码： <script> var h1 = d
座位表，点名
昔人'
11-02 956
点名 td { width: 9.09%; height: 50px; text-align: center; } .tdBg { background-color: pink; } var timer = null; // 这是一个函数，表示一个功能 function start(){ timer = setInterval(f
原生js座位管理
wen_special的博客
11-11 5044
以前每次做ttms中的座位管理时，用的都是插件，突然就想自己写一个原生的座位管理了。先附上一张成果图。 座位管理的界面： 座位管理的修改座位状态: 座位管理中修改座位状态之后： 界面有些丑陋，但是基本的功能还是已经实现了的。包括动态的生成座位，改变座位的状态。因为只是一个界面所以数据都是假数据。在之后连数据库后会进一步的完善。需要用到的技术：html,bootstrap,css,js;(个人
JQ实现座位生成，座位位置保存。
weixin_41623830的博客
01-16 2625
JQ实现座位生成，座位位置保存。 实现所需的技术：html,css,JQ; 在做一个大巴车客运售票选座时遇到的问题，想要模仿类似电影院选座的功能，还需要可以新增不同车型的不同座位分布。 先来看看效果 ，这里是新增不同车型的不同座位分布； 输入总排数和总列数后就能生成相对于的车辆当有遇到比如说“双层大巴车”（中国特色可不能少~）看下图 选择双层后就能对应出现双层和单层一样输入总行数总列数生成~...
不同火车车型的座位分布图
weixin_33835103的博客
07-24 3166
本文内容全部来自于网络，记录在此，只是为后期便于寻找。 -------------------------------------分割线------------------------------------------------------ 铁路客车种类繁多，按照车种分为硬座车（YZ）、硬卧车（YW）、软座车（RZ）、软卧车（RW）……按照车体层数分为单层车和双层车 目前常见的车型有： 第二代...
JS实现WEB页面打印及预览的三个方法
在这个方法中，我们可以使用JavaScript来弹出一个新窗口，然后在新窗口中显示要打印的内容。在新窗口中，我们可以使用 `window.print()` 来调用浏览器的打印功能，然后自动关闭新窗口。 这种方法非常适合需要打印的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值