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. NOIP2016D1T3 换教室 （概率DP）

    NOIP2016D1T3 换教室 题目大意:有n个时间段,每个时间段i有两个教室a[i],b[i]可以上课,如果不申请换教室就在教室a[i]上课,如果换教室就在b[i]上课.你最多只能换m次教室.教室 ...

  2. python convert csv to xlsx

    搬运:http://stackoverflow.com/questions/17684610/python-convert-csv-to-xlsx import os import glob impo ...

  3. webpack学习（一）起步安装

    起步   webpack 用于编译 JavaScript 模块.一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互.如果你还不熟悉 webpack,请阅读核心概念和打包器 ...

  4. Codeigniter项目使用phpDocumentor生成api文档

    前言 运行环境: vagrant 2.2.4 virtualbox 6.0 box bento/ubuntu-16.04 (Apache 2.4.18 + Mysql 5.7.26 + PHP 5.6 ...

  5. Maven介绍及安装

      1.maven是一个管理第三方库的jar package 2.从该页面下载相应的Maven jar包(http://maven.apache.org/download.cgi),linux OS下 ...

  6. zTree节点排序、jsTree节点排序

    项目中遇到了这个问题,网上也没找到比较清晰的答案,索性提供一个方案吧. 原理:将整个树形插件的数据源进行排序,插件在构造UI时,自然也是按照顺序来排列的,目前这种思路适用于 zTree 和 jsTre ...

  7. Halo（二）

    @Conditional 满足条件给容器注册Bean(在配置类 @Configuration 的类和方法上配置) 需要实现Condition接口, 实现matches方法 public class L ...

  8. vue 之组件

    组件 '''1.根组件:new Vue()创建的组件,一般不明确自身的模板,模板就采用挂载点2.局部组件: local_component = {}2.全局组件: Vue.component({})' ...

  9. django更换默认数据库sqlite3为pymsql后出现Keyerror:255的解决办法----升级PyMySQL

    一.更换数据库的办法: 1.安装PyMySQL 2.修改project目录同名文件下的settings.py:DATABASES = { 'default': { # 'ENGINE': 'djang ...

  10. Java Freemarker生成word

    Java Freemarker生成word freeMaker 简介: FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代 ...