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. 最长上升子序列(LIS)长度及其数量

    例题51Nod-1376,一个经典问题,给出一个序列问该序列的LIS以及LIS的数量. 这里我学习了两种解法,思路和代码都是参考这两位大佬的: https://www.cnblogs.com/reve ...

  2. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

  3. tp框架数据查询，增删改

    select()是数据模型的一个指定方法,可以获得数据表的数据信息 返回一个二维数组信息,当前数据表的全部数据信息 $obj = D();  创建对象 $obj -> select();  查询 ...

  4. 揭秘阿里云WAF背后神秘的AI智能防御体系

    背景 应用安全领域,各类攻击长久以来都危害着互联网上的应用,在web应用安全风险中,各类注入.跨站等攻击仍然占据着较前的位置.WAF(Web应用防火墙)正是为防御和阻断这类攻击而存在,也正是这些针对W ...

  5. 2019牛客多校第五场G-subsequence 1 DP

    G-subsequence 1 题意 给你两个字符串\(s.t\),问\(s\)中有多少个子序列能大于\(t\). 思路 令\(len1\)为\(s\)的子序列的长度,\(lent\)为\(t\)的长 ...

  6. 大碗宽面Beta阶段第十一周会议记录

    本周二晚上我们在宿舍楼的大厅进行了本周的小组会议,虽然天气很冷,但大家都还是如数到场,积极参加小组会议.对于上周的任务大家都努力完成,在前端方面,大家完善了主页面和一些分页面,主要有导航栏界面的完成. ...

  7. Mysql全文索引的使用

    前言 在MySQL 5.6版本以前,只有MyISAM存储引擎支持全文引擎.在5.6版本中,InnoDB加入了对全文索引的支持,但是不支持中文全文索引.在5.7.6版本,MySQL内置了ngram全文解 ...

  8. split函数实现

    #include <iostream> #include <sstream> #include <vector> #include <string> u ...

  9. 为什么重写equals还要重写hashcode

    参考回答: HashMap中,如果要比较key是否相等,要同时使用这两个函数!因为自定义的类的hashcode()方法继承于Object类,其hashcode码为默认的内存地址,这样即便有相同含义的两 ...

  10. Centos7安装 Hadoop（单节点）

    1.Hadoop简介 Hadoop是一个由Apache基金会所开发的开源分布式系统基础框架,使用Java开发,是处理大规模数据的软件平台. Hadoop可以从单一节点扩展到上千节点.用户可以在不了解分 ...