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. 一 shell编程

    好啦.从今天开始我们转入shell编程的行列.从鸟哥私房菜中,已经学到了一些shell编程的皮毛,这两个月打算系统的学习,学会,学熟练.加油吧 bash shell [root@localhost s ...

  2. windows下基于(QPC)实现的微秒级延时

    1.为什么会写windows下微秒级延时 在上一篇 实现memcpy()函数及过程总结 中测试memcpy的效率中,测试时间的拷贝效率在微秒级别,需要使用微秒级时间间隔计数. windows下提供Qu ...

  3. 【Java学习笔记】2015.1.5

    1.classpath中的“.”表示当前的路径,所以配置classpath时要注意不能忘了“.”.如果不注意,会出现cmd下运行程序时,.java文件可以编译但是不能运行: 一般的classpath配 ...

  4. Python+Unittest+Requests+PyMysql+HTMLReport 多线程并发接口化框架

    整体框架使用的是:Python+Unittest+Requests+PyMysql+HTMLReport 多线程并发模式 主要依赖模块 Unittest.Requests.PyMysql.HTMLRe ...

  5. shell脚本编写nginx部署脚本

    下面为shell脚本编写的nginx的安装及修改nginx.conf的脚本,脚本比较简单: #!/bin/bash function yum_install(){ yum install epel-r ...

  6. mui-popover显示、隐藏弹出菜单的方法

    一.mui-popover要显示.隐藏弹出菜单,可使用锚点方式. <div id="popover" class="box mui-popover mui-popp ...

  7. vue 前后端分离 接口及result规范 及drf安装使用方法

    接口 # 接口:url链接,通过向链接发送不同的类型请求与参数得到相应的响应数据​# 1.在视图层书写处理请求的 视图函数# 2.在路由层为视图函数配置 url链接 => 产生接口# 3.前台通 ...

  8. *.tar 用 tar –xvf 解压 *.gz 用 gzip -d或者gunzip 解压 *.tar.gz和*.tgz 用 tar –xzf 解压 *.bz2 用 bzip2 -d或者用bunzip2 解压 、*.tar.bz2用tar –xjf 解压

    解压: 1.*.tar 用 tar –xvf 解压, --skip-old-files跳过已经存在的文件,压缩用tar -cvf 2.*.bz2 用 bzip2 -d或者用bunzip2 解压 3.* ...

  9. 十二、SpringBoot 优雅的集成Spring Security

    前言 至于什么是Spring security ,主要两个作用,用户认证和授权.即我们常说的,用户只有登录了才能进行其他操作,没有登录的话就重定向到登录界面.有的用户有权限执行某一操作,而有的用户不能 ...

  10. 查看mysql慢日志，进行优化

    MySQL 慢查询的相关参数解释:slow_query_log :是否开启慢查询日志,1表示开启,0表示关闭. slow_query_log    :是否开启慢查询日志,1表示开启,0表示关闭. lo ...