html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<title>抽号</title>

<script type="text/javascript" src="js/jquery.1.11.3.main.js" ></script>

<script type="text/javascript" src="js/main.js" ></script>

<link rel="stylesheet" type="text/css" href="css/css.css" />

</head>

<body>

<audio id="myMusic" loop src="img/Hans Zimmer - Up Is Down.mp3" type="audio/mpeg"></audio>

<section>

	<label>

		起始值：<input type="number" id="begin" value="1" min="1" max="10000" />

	</label>

	<label>

		结束值：<input type="number" id="end" value="5000" min="1" max="50000" />

	</label>

	<div class="showNum" id="showNum">大家好，这是我的抽奖号</div><br />

	<footer>

		<button id="resetBtn" class="reset">复 位</button>

		<button id="beginBtn" class="begin">开 始</button>

	</footer>

</section>

</body>

</html>

　　css

@charset "utf-8";

body{ background-size: cover; background-color: #292929; }

*{ margin: 0px; padding: 0px; font-family: "微软雅黑"; outline: none;}

section{width: 80%; margin: auto; margin-top: 200px; padding:5% ; border: 1px solid white; text-align: center; border-radius: 10px; background: rgba(255,255,255,0.6);}

section label{ display: block; line-height: 52px;}

section label input{ width:60% ; height: 30px; font-size: 24px; padding-left: 10px; color: blueviolet; border-radius: 30px;}

section footer {display: flex; text-align: center;}

section footer button{ margin: auto; width:120px ; height: 40px; font-size: 22px; color: white; border: 1px solid white; border-radius: 15px;}

section footer .reset{margin-right: 16px; background: #8b95d0;}

section footer .begin{ background: #52d8e8;}

section .showNum{ height: 70px; line-height: 70px; font-size: 70px; font-weight: bold; color: #363b3c; text-shadow: 0px 2px 4px gray;}

　　js

$(document).ready(function(){

	$(document.body).on('click', '#resetBtn', function(){

		if(confirm("亲：您确定要复位吗？")){

			window.location.reload();

		}

	});

	var arr = [], mydsq = null;		

	function RunNumFn(){

		clearInterval(mydsq);

		var i = 0;

		mydsq = window.setInterval(function(){

			i++;

			if(i >= arr.length){

				i = 0;

			}

			$('#showNum').html(arr[i]);

		}, 8);

	};

	$(document.body).on('click', '#beginBtn', function(){

		var begin = Number($('#begin').val()),

			end = Number($('#end').val());

		if(begin < 0){

			alert("亲：起始值 不能小于 0 哦！");

			return false;

		}else if(begin > end){

			alert("亲：起始值 不能大于 结束值哦！");

			return false;

		}

		else if(end > 50000){

			alert("亲：结束值 不能大于 50000 哦！");

			return false;

		}

		else{

			if($(this).text() == '开 始'){

				document.getElementById("myMusic").play();

				for(var i = begin; i <= end; i++){

					arr.push(i);

				}

				arr = arr.sort(function(){

					return Math.random() - 0.5;

				})

				RunNumFn();

				$(this).text('暂 停').css('background', '#8b95d0');

			}else{

				document.getElementById("myMusic").pause();

				clearInterval(mydsq);

				arr = [];

				begin = 0;

				$(this).text('开 始').css('background', '#52d8e8');

			}

		}

	});

});

　　效果：

jQuery随机抽取数字号代码的更多相关文章

  1. Lamda一行代码实现"36选7"随机自动选号

    南粤风采36选7是广东的一种彩票玩法.非常简单的从1-36个数字选7个. 今天在同事面前炫耀了一把,只用一行Lamda代码实现随机自动选号 Enumerable.Range(, ).Select(x ...

  2. 数据的随机抽取 及 jQuery补充效果（菜单、移动）

    一.数据的随机抽取 都见过那种考试题从很多题中随机抽取几道的试卷吧,现在就要做这样的一个例子:从数据库中随机抽取几条数据出来显示(例如:一百中随机挑选50条) 随机挑选是要有提交数据的,所以肯定是要有 ...

  3. 随手小代码——Python 从集合中随机抽取元素

    =================================版权声明================================= 版权声明:原创文章 谢绝转载  请通过右侧公告中的“联系邮 ...

  4. 【Python代码】随机抽取文件名列表NameList中的Name作为训练集

    #!/usr/bin/env python #coding=utf-8 #随机抽取一部分图片作为测试集 import random NameList=[]#存储所有图片名字 ''' NameListP ...

  5. SQL Server 随机数,随机区间,随机抽取数据rand(),floor(),ceiling(),round(),newid()函数等

    在查询分析器中执行:select rand(),可以看到结果会是类似于这样的随机小数:0.36361513486289558,像这样的小数在实际应用中用得不多,一般要取随机数都会取随机整数.那就看下面 ...

  6. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  7. 一个面试题的解答-----从500（Id不连续）道试题库里随机抽取20道题！

    做一个考试系统的项目,现在从试题库里面随机抽取20道题 比如我题库有500道题(ID不连续).题目出现了,如何解决呢,随机抽取! 1,我们先把500道题的id存进一个长度为500的数组. 2,实现代码 ...

  8. PHP之：随机抽取一个数&&随机函数

    撰写日期:2016-7-20 16:00:24 有5个数:1 4 7 9 6 用PHP实现随机抽取5个数中的其中一个 方法一: <?php $test = array(1,4,7,9,6);// ...

  9. 随机总数字里面选取随机数字进行随机排序案例(JAVA实现)

    随机总数字里面选取随机数字进行随机排序案例,案例如下: 代码code: package com.sec; import java.util.Arrays; import java.util.Scann ...

随机推荐

  1. Codeforces 364E 分治

    题意:给你一个01矩阵,问此矩阵有多少个和恰好为k的子矩形. 思路:分治,对于当前矩形,用一条中线把矩形分成两半,分治之后计算跨过中线的矩形个数.更具体的来说(假设划了一条水平中线),我们枚举矩形左右 ...

  2. Codeforces 1179D 树形DP 斜率优化

    题意:给你一颗树,你可以在树上添加一条边,问添加一条边之后的简单路径最多有多少条?简单路径是指路径中的点只没有重复. 思路:添加一条边之后,树变成了基环树.容易发现,以基环上的点为根的子树的点中的简单 ...

  3. 力扣——3sum closest（最接近的三数之和）python 实现

    题目描述: 中文: 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一 ...

  4. Java使用SSH远程访问Windows并执行命令

    转载于:http://blog.csdn.net/carolzhang8406/article/details/6760430   https://blog.csdn.net/angel_xiaa/a ...

  5. python函数参数*args **kwargs

    毕业多年,把C++都就饭吃了....今天居然在纠结什么是形参什么是实参..... 定义函数里面写的参数就是形参,因为没有内存占用,实际调用时写的参数就是实参,因为有内存占用和传值 然后就是位置参数,可 ...

  6. php 安装zip模块

    为php安装zip扩展 wget http://pecl.php.net/get/zip-1.13.5.tgz tar -zvxf zip-1.13.5.tgz cd zip-1.13.5 /home ...

  7. CH340电路设计

    版权声明:技术需要共享,但同时需要尊重原创者的辛劳,转载引用请注明出处. https://blog.csdn.net/JAZZSOLDIER/article/details/66967735 最近选用 ...

  8. 【Http】队头阻塞（Head of line blocking）多路复用（Multiplexing）

        图中第一种请求方式,就是单次发送request请求,收到response后再进行下一次请求,显示是很低效的. 于是http1.1提出了管线化(pipelining)技术,就是如图中第二中请求方 ...

  9. bzoj 3251

    http://www.lydsy.com/JudgeOnline/problem.php?id=3251 这道题在北京八十中的时候有人讲过.. 不过由于自己continue 写掉了一个所以调了很久. ...

  10. js的 算法 和 数据结构

    js的 算法 1.对一个对象数组按照对象某个属性进行排序  : https://www.cnblogs.com/webcabana/p/7460038.html 在做公交的项目中就碰到过这种算法问题, ...