JS点名器

最新推荐文章于 2023-04-01 16:21:07 发布
最新推荐文章于 2023-04-01 16:21:07 发布
阅读量846 收藏 2
点赞数
分类专栏： 小玩意 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47917392/article/details/118055949
版权
该博客介绍了如何使用JavaScript创建一个点名器，通过代码实现从一组名单中随机选择人员的功能。文中提供了点名器的初始状态和运行时的效果展示。
摘要由CSDN通过智能技术生成

点名器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
    
				padding: 0;
				margin: 0;
			}
			body{
    
				background:black url(imges/a.png);
				
			}
			h2{
    
				font-size: 50px;
				text-align: center;
				margin-top: 100px;
				color: red;
			}
			
			#box{
    
				width: 1000px;
				border: 1px solid skyblue;
				margin: auto;
				display: flex;
				flex-wrap: wrap;
				position: relative;
				background-color: skyblue;
			}
			p{
    
				width: 100px;
				height: 50px;
				color: red;
				font-size: 30px;
				line-height: 50px;
				text-align: center;
			}
			#bt1{
    
				width: 100px;
				height: 50px;
				position: absolute;
				bottom: -100px;
				left: 200px;
			}
			#bt2{
    
				position: absolute;
				width: 100px;
				height: 50px;
				bottom: -100px;
				right: 200px;
			}
		</style>
	</head>
	<body>
		<h2>点名器</h2>
	<div id="box">
	<p>张三</p><p>张三</p><p>张三</p><p
最低0.47元/天 解锁文章
向全栈冲
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 ： 用HTML ，CSS ,JS 做一个点名器
aisheisadas的博客
10-28 903
【代码】前端 ： 用HTML ，CSS ,JS 做一个点名器。
JS小案例-随机点名器
m0_51068451的博客
12-04 383
随机点名器
js实现随机点名器精简版
11-20
本文实例为大家分享了js实现随机点名器的具体代码，供大家参考，具体内容如下 此点名器开始点名后需点击停止按钮完成点名，因为是精简版没有考虑自动停止需求。姓名数据以字符串形式储存，适合小范围点名使用，有大量需求可自己适当改进。 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随机点名生成</title> <style> /* 页面css样式 */ .wrapper { width: 800px; ma
【前端初学者】【JavaScript案例】之随机点名器
HY_Sophie的博客
01-07 711
【前端初学者】【JavaScript案例】之随机点名器
JS——利用js实现简易点名系统
Bonsoir777的博客
08-24 1193
本文主要介绍的是如何利用JS实现简易点名系统的实现过程。
html+css+JavaScript点名器
最新发布
02-03
"html+css+JavaScript点名器"是一款基于这三个核心技术实现的简单应用，它主要用于课堂点名或活动抽签等场景。HTML（HyperText Markup Language）是网页内容的基础结构语言，CSS（Cascading Style Sheets）负责网页...
手机端实现的js点名器.zip
08-17
在本项目中，我们关注的是一个使用JavaScript（js）实现的移动端点名器。这个工具设计为在手机设备上运行，适用于教学、会议或其他需要随机选取参与者进行互动的场合。以下将详细介绍该点名器的核心功能、技术实现、...
JavaScript点名器(背景为轮播图).rar
09-13
今天我们将探讨一个基于JavaScript实现的实用工具——“JavaScript点名器(背景为轮播图)”。这个点名器不仅能够随机选取学生进行点名，还具有暂停功能，并且背景是一个动态轮播图，这使得点名过程更加生动有趣。 ...
JavaScript实现随机点名器
01-19
本文实例为大家分享了JavaScript实现随机点名器效果图的具体代码，供大家参考，具体内容如下 js实现随机点名器的思路 利用setTimeout()计时器实现随机的效果，功能函数 function show(){ var box=window.document...
JavaScript实现随机点名器实例详解
11-29
你是公司的程序员，年会的时候公司要给员工抽奖发福利，要求你写一个页面小程序，用来随机选出幸运员工，分设一二三等奖大致如下图示例:   以下是点名器的一种思路，页面比较简陋，只给出了满足最基本要求的代码户要用到计时器，随机数函数等 本抽奖一二三等奖都只设一名幸运员工，开始结束功能用一个按钮实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点名器</title> <style> .title{ font-size:50px; font-family: 8
JS实现随机点名器
12-28
本文实例为大家分享了JS实现随机点名器的具体代码，供大家参考，具体内容如下 实现一个简单的随机点名器 需求分析： 两个按钮实现随机点名的开始和结束 创建ul元素，添加到父级div中，实现了每个名字需要放在一个单独的盒子中 根据随机数进行随机选择，（涉及到了两个函数 setInterval clearInterval）在选择之前，先清空盒子的所有类样式，如果被选中，则重新赋予类样式 当点击停止按钮时，根据上一步拥有重新选择出来的li标签获取标签内容，并且直接可以展示到对应的文本框。 下面开始实现 1.编写html页面 <input type=button va
随机点名（HTML,CSS,JS）
lsk377351003的博客
08-11 5468
随机点名原理： 1.新建一个数组，把需要点名的名单放到一个数组里面 2.遍历数组 3.创建一个随机数，作为数组的下标，随机数最大值为数组长度，最小值为零 4.利用计时器，每隔一段时间生成一个随机数 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
js实现简单随机点名器
youzigrowing的博客
10-13 5160
之前做了js倒计时,现在做一个随机点名器，这个更简单，没什么技术含量，直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击按钮随机点名-样式布局参考</title> <style> * { padding: 0px; margin: 0px;
点名（点菜版）js实现
2201_75321887的博客
03-06 620
点菜（可更换，如需点名则把菜名改为人名即可）详情请看js代码
js实现一个简单的随机点名功能
weixin_43430432的博客
04-01 999
点击开始，名字变化，点击停止，停止在随机的名字上，使用random随机数实现。新手学习，欢迎大家讨论并指出错误o^ v ^o。
简易版JS点名器
m0_73860660的博客
10-30 189
主要使用JSfor循环的使用。
JS随机点名器
ycy021416的博客
06-29 324
JS随机点名器
用html写一个点名器
06-07
好的，下面是一个简单的使用 HTML 和 JavaScript 实现的点名器： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点名器</title> </head> <body> <h1>点名器</h1> <button onclick="randomName()">点名</button> <p id="name"></p> <script> var names = ["小明", "小红", "小刚", "小美"]; // 姓名列表 function randomName() { var index = Math.floor(Math.random() * names.length); // 随机生成一个姓名的索引 document.getElementById("name").textContent = names[index]; // 将生成的姓名显示在页面上 } </script> </body> </html> ``` 该点名器包括一个按钮和一个用于显示姓名的段落。当用户点击按钮时，`randomName` 函数会从姓名列表中随机生成一个姓名，并将其显示在页面上。在这个例子中，姓名列表只包含了几个硬编码的姓名，您可以根据需要自行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值