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

刚开始学习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>

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

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的随机抽取奖的微信小程序实现思路: 1. 在小程序页面上设计一个奖品列表,包括奖品名称和奖品图片。可以使用 `scroll-view` 组件实现滚动列表。 2. 在页面上添加一个“抽奖”按钮,点击按钮后触发抽奖动作。 3. 在小程序的逻辑层(即 JS 文件)中,定义一个数组,存储所有的奖品。 4. 点击“抽奖”按钮后,触发事件处理函数,在函数中使用 `Math.random()` 方法生成一个随机数,然后根据随机数在奖品数组中找到对应的奖品。 5. 将抽中的奖品信息展示在页面上,包括奖品名称和奖品图片。 下面是一个简单的代码实现示例: 1. 在 wxml 文件中添加奖品列表和抽奖按钮: ``` <scroll-view class="prize-list"> <view wx:for="{{prizes}}" wx:key="{{index}}"> <image src="{{item.image}}"></image> <text>{{item.name}}</text> </view> </scroll-view> <button class="btn" bindtap="onLottery">抽奖</button> ``` 2. 在 js 文件中定义奖品数组和抽奖事件处理函数: ``` Page({ data: { prizes: [ { name: '一等奖', image: 'https://example.com/prize1.jpg' }, { name: '二等奖', image: 'https://example.com/prize2.jpg' }, { name: '三等奖', image: 'https://example.com/prize3.jpg' } ], result: {} }, onLottery: function () { // 生成随机数 var index = Math.floor(Math.random() * this.data.prizes.length); // 获取抽中的奖品信息 var prize = this.data.prizes[index]; // 更新页面数据 this.setData({ result: prize }); } }) ``` 3. 在 wxss 文件中定义样式: ``` .prize-list { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10rpx; } .prize-list image { width: 100rpx; height: 100rpx; } .prize-list text { margin-top: 10rpx; font-size: 28rpx; text-align: center; } .btn { display: block; width: 80%; margin: 30rpx auto 0; padding: 20rpx; font-size: 32rpx; background-color: #007aff; color: #fff; border-radius: 10rpx; text-align: center; } ``` 这样,一个简单的随机抽取奖的微信小程序就完成了。用户点击“抽奖”按钮后,程序会随机抽取一个奖品并展示在页面上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值