Lottery Number Dynamically Generator With jQuery And Bootstrap

Other
Random Lottery Number Generator With jQuery And Bootstrap
File Size: 4.06 KB
Views Total: 1668 views
Last Update:January 1, 1970
Publish Date: September 29, 2021
Official Website: Go to website
License: MIT
Plugin Author: MariusDiaconu
Demo    Download

A Free jQuery Plugin With Lottery Number randomly Generator With jQuery And Bootstrap. use for lottery lucky drawing games like Powerball and Mega Millionaire. click on button generate number by dynamically. it fully managed by java script

How to use :

 Add the jQuery library, numbers_generator.min.js and Bootstrap’s css.

<script src="/cdn/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/js/numbers_generator.min.js"></script>
<link rel="stylesheet" href="/cdn/bs3/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/main.min.css">

Build the HTML structure for the lottery number generator.

<form id="startNumbersGeneratorForm">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="from_balls">From Balls</label>
        <input type="number" name="from_balls" class="form-control" value="5" aria-describedby="fromBallsHelp" min="0">
        <small id="fromBallsHelp" class="form-text text-muted">Enter the maximum number for balls. Ex: 6.</small>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label for="range_numbers">From Interval Numbers</label>
        <input type="number" name="range_numbers" class="form-control" value="45" aria-describedby="rangeNumbersHelp" min="0">
        <small id="rangeNumbersHelp" class="form-text text-muted">Enter the maximum value for interval of numbers. Ex: 49.</small>
      </div>
    </div>
  </div>
  <div class="row"> 
    <div class="col-md-6">
      <div class="form-group">
        <label for="extra_balls">Extra Balls</label>
        <input type="number" name="extra_balls" class="form-control" value="1" aria-describedby="extraBallsHelp" min="0">
        <small id="extraBallsHelp" class="form-text text-muted">Enter the maximum number for extra balls. Ex: 2.</small>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label for="range_extra_numbers">Extra Interval Numbers</label>
        <input type="number" name="range_extra_numbers" class="form-control" value="20" aria-describedby="rangeExtraNumbersHelp" min="0">
        <small id="rangeExtraNumbersHelp" class="form-text text-muted">Enter the maximum value for interval of extra numbers. Ex: 20.</small>
      </div>
    </div>
  </div>
  <div class="form-group">
    <input type="submit" value="Generate Numbers" name="generate_numbers" class="btn btn-block">
  </div>
</form>

Create an empty DIV container for the results.

<div class="generic-box generator numbers-generator">
  <div id="generatorResults" class="col-md-8 offset-md-2"></div>
</div>

Add CSS styles for the Lottery Number Generator.

/* BALL STYLES */
.balls {
  margin-bottom:40px;
}

.balls .ball,.balls .bonus, .ball:last-child {
  border-radius:65px;
  box-shadow:0 -5px 10px 0 rgba(0,0,0,0.5) inset;
  -webkikt-box-shadow:0 -10px 25px 0 rgba(0,0,0,0.5) inset;
  display:inline-block;
  font:1.125em/40px Oswald,sans-serif;
  height:40px;
  letter-spacing:-1px;
  position:relative;
  text-align:center;
  top:0;
  width:40px;
  background:url(/loto/img/icon-sprite.png) no-repeat 54.466% 0;
  background-size:500px 1500px;
  padding:0;
  margin-bottom:0;
  color:#fff;
}

.balls li:before, .ball:last-child:before {
  background:none;
}

.balls .ball:after, .balls .bonus:after {
  content:"";
  display:block;
  height:11px;
  position:absolute;
  bottom:-4px;
  width:40px;
  background:url(/loto/img/icon-sprite.png) no-repeat 54.526% 6.68%;
  background-size:500px 1500px;
}

.balls .bonus.extra {
  background-position:54.466% 3.425%;
  color:#293444;
}

.balls .bonus:before, .ball:last-child:before {
  width:40px;
  height:20px;
  font:11px/18px Oswald;
  color:#293444;
  letter-spacing:0;
  text-shadow:none;
  top:42px;
  line-height:12px;
}

.balls.big .bonus:before {
  top:56px;
  width:50px;
}

.balls.big .ball,.balls.big .bonus {
  background-size:650px 1950px;
  height:52px;
  width:52px;
  font-size:1.500em;
  line-height:54px;
  box-shadow:0 -5px 10px 0 rgba(0,0,0,0.3) inset;
  -webkikt-box-shadow:0 -10px 25px 0 rgba(0,0,0,0.3) inset;
}

.balls.big .ball:after, .balls.big .bonus:after {
  background-size:650px 1950px;
  height:17px;
  bottom:-8px;
  left:0px;
  width:50px;
}

/* NUMBERS GENERATOR */
.numbers-generator .balls .ball {
  background-color:#0b4cd7;
}

.numbers-generator .balls .bonus.extra {
  background-color:#ffdc00;
  color: #293444;
}

.numbers-generator .balls .bonus.extra:before {
  content:"Extra";
}

/* GENERATOR */
.generic-box.generator {
  padding:30px 0 0;
}

.generator .title {
  font-size:1.125em;
  color:inherit;
  margin-left:30px;
}

.generator .balls { 
  margin-left:15px;
}

.generic-box { 
  padding-bottom:15px;
}

/* ANIMATION */
.animated { 
  visibility:hidden;
}

/* GENERATOR */
.balls .innerA { 
  position:absolute;
  width:52px;
  height:52px;
  line-height:52px;
  padding:0;
  margin:0;
  left:0;
  top:0;
  display:block;
  overflow:hidden;
}

.balls .innerB, .balls .number { 
  position:relative;
  width:100%;
  height:100%;
}

.balls .innerB { 
  display:block;
}

Done

Thanks for make jQuery plugin is developed by MariusDiaconu For more Helpfull for users, please check the demo page or visit the official website.

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins