基于JS实现的随机数字抽签实例
作者：扯 发布时间：2024-04-16 09:27:23
标签：js,随机数字抽签
话不多说，附上源码，仅供大家参考
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
var numArray = new Array();
var personNum = 30;
$(function () {
for (var i = 0; i < personNum; i++) {
numArray[i] = i;
}
$("li").click(function () {
var n = Math.floor(Math.random() * numArray.length + 1) - 1; //生成随机数
$(this).text(numArray[n]);
numArray.splice(n, 1); //移除随机数
});
$("#btnStart").click(function () {
var totalArray = new Array();
$("li").each(function (i, v) {
totalArray[i] = v.innerText;
});
var n = Math.floor(Math.random() * totalArray.length + 1) - 1; //生成随机数
this.value = totalArray[n];
$("li").each(function (i, v) {
if (v.innerText == $("#btnStart").val()) {
this.style.background = "red";
}
else
{
this.style.background = "white";
}
});
});
});
</script>
<style type="text/css">
ul {
/*display: block;
float:left;*/
}
ul li {
width: 150px;
height: 150px;
line-height: 150px;
border: 1px solid gray;
float: left;
margin-left: 10px;
margin-top: 10px;
list-style-type: none;
text-align: center;
font-size: 20px;
}
#btnStart {
width: 100px;
height: 30px;
margin-left: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<ul>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
</ul>
<ul>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
</ul>
<ul>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
</ul>
<ul>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
</ul>
<ul>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
</ul>
</div>
<input id="btnStart" type="button" value="Start" />
</body>
</html>
来源：http://www.cnblogs.com/gossip/p/4161787.html
0
投稿猜你喜欢
- 我们先把数据表建好use test;create table `employee`( emp_no int unsigned, emp_na
仿照常见的那个图片变换flash做的效果，纯js。不过滤镜变换只对应ie，ff只能看到一般的切换。这个js做的效果最早在sina看到，这里把- 此篇文章整理新手编写代码常见的一些错误，有些错误是粗心的错误，但对于新手而已，会折腾很长时间才搞定，所以在此总结下我遇到的一些问题。希望帮助
- 通常我们做网站，设计版面布局是第一步，如何做到版面布局具有创意又美观大方呢?这就需要一定的版面处理功底。让我们先来了解一下版面布局的步骤:一
- 导读：如何使用scrapy框架实现爬虫的4步曲？什么是CrawSpider模板？如何设置下载中间件？如何实现Scrapyd远程部署和监控？想
- 前言本文主要给大家介绍了关于Django实现内容缓存的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。1.缓存的简
- 你通过以下语句，创建了一个数据库视图：create view entities_entity as select id, nam
- 前言使用cv2.rectangle可以绘制矩形框，但要绘制半透明框使用cv2.addWeighted。cv2.rectangle绘制矩形框使
- 本文实例讲述了django框架自定义模板标签(template tag)操作。分享给大家供大家参考，具体如下：django 提供了丰富的模板
- 我就废话不多说了，大家还是直接看代码吧~import kerasimport numpy as npimport matplotlib.py
- 目录1、将 PDF 转换为音频文件2、从列表中播放随机音乐3、不再有书签了4、清理下载文件夹前言:大家平时有没有注意到你每天可能会执行许多的
- 以用户为中心的设计、用户体验，这两个词现在在互联网上几乎随处可见，除了设计师外，很多的用户也都在说这两个词，于是我们经常会听到诸如“这里用户
- 我是新手学习如何管理和导航MySQL数据库和表是要掌握的首要任务之一，下面的内容将主要对MySQL的数据库和表的一些常用命令进行总结，一些我
- 本文实例讲述了Python mutiprocessing多线程池pool操作。分享给大家供大家参考，具体如下：python — mutipr
- 1. 概述本文记录在 Ubuntu 16.04 上将 python 升级为 3.8 版本，并配置为系统默认 python3 的过程。在 Ub
- 背景故事2022虎年将至，值此新春佳节之际，各大社区更是你争我赶纷纷发起春节征文活动正当我一筹莫展之际，几位粉丝朋友们的小请求点醒了我：对呀
- join用来连接字符串，split恰好相反，拆分字符串的。不用多解释，看完代码，其意自现了。>>>li = ['m
- 列举了一些常见，新手经常问的问题。举例并说明解决方法。1.超链接访问过后hover样式就不出现的问题运行代码框<!DOCTYPE ht
- 本文实例讲述了PHP实现绘制二叉树图形显示功能。分享给大家供大家参考，具体如下：前言：最近老师布置了一个作业：理解并实现平衡二叉树和红黑树，
- 前言近几年，制造业作为国民经济主体，是国家创造力、竞争力和综合国力的重要体现。作为制造强国建设的主攻方向，可以说，智能制造发展水平关乎我国未
