基于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
投稿猜你喜欢
- <html> <head> <meta http-equiv="Content-Type"
1. torch- torchvision- python版本对应关系2. CUDA Toolkit 和PyTorch的对应关系3. 安装说- 形参与实参以及位置参数 什么是形参和实参形参：即形式参数，函数定义时指定的可以接受的参数即为形参，比如定义函数时的max(a,b)函数中的a
- asp自定义错误显示方法：<html><head><meta http-equiv="Co
- 今天开始学习数据库，由于我对微软不怎么感冒，所以就不用他家的产品了本来想装ORACLE的，不过太大了，看着害怕对于我这种喜欢一切从简的人来说
- 本文实例讲述了MySQL连接查询。分享给大家供大家参考，具体如下：创建表suppliers：CREATE TABLE suppliers(
- 内容摘要：浏览器不兼容这个难题，一直是网页设计师们头痛的事情。ie7.0的面世，尚且不论他是否较之ie6.0进步， ie7和ie6
- 本文实例讲述了javascript+HTML5 canvas绘制时钟功能。分享给大家供大家参考，具体如下：效果如下：代码：<!DOCT
- PHP+MySQL的组合是构建网站的一个常见搭配，不过如何使用PHP通过Web访问MySQL数据库呢?下面从Web数据库架构的工作原理讲起。
- PyQt5不规则窗口实现动画效果实例import sysfrom PyQt5.QtCore import *from PyQt5.QtGui
- 面对不断成长的用户，跟随用户的脚步齐步向前，做引起共鸣的改变，去除低龄化的设计，用成熟稳重的心态面对用户。QQBanner自2006 年推出
- Python字符串问题在arcpy中版本为 python2.x在QGIS中版本为 python2.x 或者 python3.xpython2
- 前言本文提供将多个视频拼接为一个视频的Python工具代码，其中有一些限制条件，下面的代码说明会提到。环境依赖ffmpeg环境安装，可以参考
- test.asp 测试演示文件clsrsa.asp 实现rsa加密与解密的vbs类文件下面是代码:1. test.asp<％rem 文
- 本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法。分享给大家供大家参考。具体实现方法分析如下：首先
- 这篇文章主要介绍了python如何通过闭包实现计算器的功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要
- Fedora5下配置MySQL (很有参考价值的 MySQL资料 包括如何在linux文件系统移动MySQL数据库的位置) 一、下载MySQ
- 目录图片验证码登陆点击个人用户登录获取图片验证码识别并登陆识别较复杂验证码算法其他上一篇介绍了使用python模拟登陆网站，但是登陆的网站都
- MySQL有多种存储引擎：MyISAM、InnoDB、MERGE、MEMORY(HEAP)、BDB(BerkeleyDB)、EXAMPLE、
- 1.自定义管理器(Manager)在语句Book.objects.all()中, objects 是一个特殊的属性,通过它来查询数
