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. 线程监控ProcessMonitor

    软件行为 在线监测  注册表  行为判断

  2. 常用的kubectl命令

    本文主要介绍kubernetes排查问题时经常用到的命令.这里主要借助kubectl命令来实现.以下列出常用命令,后面会对每个命令进行详细解释,并举例: kubectl核心命令 get  获取列出一个 ...

  3. Java集合类框架的最佳实践有哪些

    根据应用的需要正确选择要使用的集合的类型对性能非常重要,比如:元素的大小是固定的,而且能事先知道,我们就应该用Array而不是ArrayList. 有些集合类允许指定初始容量.因此,如果我们能估计出存 ...

  4. webpack 学习1 安装构建项目

    本文中使用的webpack版本是4+,请注意区分 node.js安装 node.js下载地址 选择较低版本的稳定版下载,下载完成后得到的是一个msi文件,点击安装即可 安装完毕以后新建一个文件夹,并在 ...

  5. 【Python CheckiO 题解】SP

    题目描述 [Speech Module]:输入一个数字,将其转换成英文表达形式,字符串中的所有单词必须以一个空格字符分隔. [输入]:一个数字(int) [输出]:代表数字的英文字符串(str) [前 ...

  6. Java中JDBC连接池&JDBCTemplate

    数据库连接池 概念:其实就是一个容器(集合),存放数据库连接的容器. 当系统初始化好后,容器被创建,容器中会申请一些连接对象,当用户来访问数据库时,从容器中获取连接对象,用户访问完之后,会将连接对象归 ...

  7. API登录验证

    客户端 客户端token加在header头中,通过request发送给服务端 服务端 服务端 通过request.META.get(HTTP_TOKEN)拿到客户端传来的token 然后与服务器事先存 ...

  8. PCB一些设置记录

    开始时设置原点,编辑>>原点>>设置 画PCB时,导入后,根据各个模块放好位置 设计>>类>>添加电源类 设计>>规则>>Cle ...

  9. 【Flutter学习】页面跳转之路由及导航

    一,概述 移动应用通常通过成为‘屏幕’或者‘页面’的全屏元素显示其内容,在Flutter中,这些元素统称为路由,它们由导航器Navigator组件管理.导航器管理一组路由Route对象,并提供了管理堆 ...

  10. Hadoop 家族技能图谱skill-map

    ----# Hadoop 家族技能图谱- Hadoop- Zookeeper- Avro- Chukwa- Ambari- Whirr- Bigtop- HCatalog- Hue- HBase- P ...