一个用JS编写的随机抽取号码的小程序

本文介绍了一款使用JavaScript编写的简单随机抽号程序。该程序可在指定的最大值范围内生成不重复的随机整数,并在网页上展示抽号结果及已抽取的号码列表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

刚开始学习Javascript,写了一个随机抽取号码的小程序,附上body里的所有代码,供大家参考。
本程序可以实现功能如下:

1、在文本框中输入抽号最大值
2、点击按钮,开始抽号,随机生成1~最大值之间的整数
3、已经抽取的号码不能再次抽取到,保证号码的唯一性
4、将号码结果放入result中显示出来
5、将已经生成的号码存入exist中显示出来
具体代码如下:
<body>
		<input type="text" id="txt" placeholder="请在里面输入号码最大值!">
		<input type="button" id="btn" value="抽号">
		<div>
			<span>结果:</span>
			<span id="result"></span>
		</div>
		<div>
			<span>已抽取:</span>
			<span id="exist"></span>
		</div>

		<script type="text/javascript">
			window.onload = function() {
				var oBtn = document.getElementById("btn");
				var oTxt = document.getElementById("txt");
				var oRes = document.getElementById("result");
				var oExi = document.getElementById("exist");
				var arr = []; //存放号码	
				var maxnum;

				oBtn.onclick = function() {
					maxnum = parseInt(oTxt.value);
					if(isNaN(maxnum) || (maxnum <= 0)) {
						alert("请输入大于1的整数");
						return;
					}					
					if(maxnum==arr.length){
						oTxt.value="";
						alert("已生成全部号码");
						return;
					}
					getSeat();
				}

				function getSeat() {
					var num = Math.floor(Math.random() * maxnum) + 1;
					var j;
					for(j = 0; j < arr.length; j++) {
						if(num == arr[j]) {
							getSeat(maxnum);
							break;
						}
					}
					if(j == arr.length) {
						arr.push(num);
						oRes.innerHTML = num;
						oExi.innerHTML = arr;
						return;
					}
				}
			}
		</script>
	</body>

运行结果如下:
这里写图片描述

### 实现微信小程序中的随机抽选人名功能并添加动画效果 在微信小程序中实现随机抽取人名的功能,并通过动画展示整个过程,可以分为几个部分来完成。首先定义数据结构用于存储参与抽奖的名字列表;其次编写逻辑处理函数负责执行实际的随机选取操作[^1]。 对于界面交互方面,则利用WXML与WXSS构建页面布局以及样式设计,确保视觉呈现友好美观。为了增加趣味性和用户体验,在每次点击按钮触发抽奖事件时加入简单的过渡动画模拟转动或闪烁的效果直到最终结果显现出来为止。 以下是具体的技术细节和代码片段: #### 数据准备 创建一个数组保存所有候选人的姓名作为初始输入源。 ```javascript Page({ data: { names: ['张三', '李四', '王五'], // 候选项名单 selectedName: '' // 被选中的名字 }, }) ``` #### 随机选择算法 采用简单的方法从上述`names`集合里挑选出一名获胜者。这里可以通过Math.random()配合sort方法轻松达成目的。 ```javascript function getRandomItem(arr){ let index = Math.floor(Math.random()*arr.length); return arr[index]; } // 或者按照提供的思路先排序再取最值 function getLuckyOneBySort(arr){ const sortedArr= [...arr].sort(() => 0.5 - Math.random()); return sortedArr[0]; } ``` #### 页面渲染更新 当用户按下启动键之后,调用之前定义好的获取幸运儿名称的方法并将结果显示给前端用户看。同时开启定时器循环改变显示的内容制造滚动播放的感觉,一段时间过后停止计时器固定住最后选定的结果。 ```javascript Page({ ... startDraw(){ this.setData({selectedName:'正在抽取...'}); var that=this; function changeDisplayText(){ that.setData({selectedName:getRandomItem(that.data.names)}); } setInterval(changeDisplayText,200); // 每隔一定时间间隔切换一次文本 setTimeout(function (){ clearInterval(); that.setData({selectedName:getLuckyOneBySort(that.data.names)}); },3000); // 经过指定延迟后结束动画并定格于最终获奖者 } }); ``` #### WXML 和 WXSS 结构化标记语言文件配置 设置好基本的HTML标签用来承载动态变化的文字信息,并为其应用CSS属性控制外观特性如字体大小颜色等参数调整至满意状态。 ```html <view class="container"> <text>{{selectedName}}</text> </view> <button bindtap="startDraw">开始抽奖</button> ``` ```css .container{ text-align:center; /* 文字居中 */ } /* 更多个性化定制省略 */ ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值