Random Numbers Generator

Генерация случайных числел. HTML + JS

Приветствую всех, возникла небольшая проблема.
Есть форма, на ней кнопка и поле для ввода:

form target="_blank" method="POST" action="https://api.site.com"> input type="hidden" name="amt" value="ТУТ СГЕНЕРЕННОЕ ЧИСЛО" /> input type="hidden" name="ccy" value="UAH" /> input type="text" name="a" size="10" value="5"> button type="submit">img src="http://static.liqpay.com/buttons/p1ru.radius.png" border="0" />/button>

Когда я нажимаю на кнопку, должна происходить генерация случайных чисел от 111 до 999999999.
и это значение (которое сгенерилось), должно подставляться в value=»ТУТ СГЕНЕРЕННОЕ ЧИСЛО».
и потом происходит субмит. Как это сделать??
Вот что вышло:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

script language="JavaScript">  // function randnumbers(object) { var x = object.a.value; var y = object.b.value; var n = object.str.value; var k = 0; var str = ""; while (k  n) { var number = Math.floor(x + (y-x+1)*Math.random()); str += number; if (k  n-1) str += " ; " else str += ""; k++;  //>  //alert(str); - ЭТО для вывода в окно с кнопкой. для теста, но мне надо чтобы STR выводился в валуе  //> script>

Прочитайте 22 строчку.

body bgcolor="#CCFFCC"> form name="f1" style="margin: 5px; text-align: left; font-size: 20px"> h3>Программа генерации n случайных чисел из заданного отрезка/h3> начало диапазона чисел: input type="hidden" name="a" size="10" value="5" style="margin: 5px 0 0 30px; font-size: 17px">br> конец диапазона чисел: input type="hidden" name="b" size="10" value="9999999999" style="margin: 5px 0 0 37px; font-size: 17px">br> Сколько случайных чисел показать? input type="hidden" name="m" size="10" value="1" style="margin: 5px; font-size: 17px">br> input type="text" name="str" size="10" value=" " style="margin: 5px; font-size: 17px">br> input type="button" value="Показать" style="margin: 5px 0 0 319px; font-size: 17px" onClick="randnumbers(f1)"> br> /form> /body>

Источник

Random Number Generator Using HTML Code

Hello Coder! Welcome to the Codewithrandom Blog. In this article, we create Random Number Generator Using HTML and JavaScript. There used to be a game where we humans have to select a number by picking a piece of paper or counting in mind while listening to start & stop. Now as a developer, the system will choose the number and give us an output within a defined range.

Random Number the word itself states that it will select any digit or integers in a specified pool of limited or unlimited numbers that have no discernible pattern for prediction. A random number generator, like the ones above, is a device that can generate one or many random numbers within a defined scope.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

Random number generators can be hardware-based or pseudo-random number generators.

Источник

Javascript Random Number Generator using jQuery

In this post, I will share a javascript random number generator using jQuery with Bootstrap 4. That will generate random lottery numbers with awesome design.

Step 1. HTML Structure for Random Number Generator

Build the HTML for the random number generator. See below HTML code:

  
 
 
From Balls Enter the maximum number for balls. Ex: 6. 
 
 
 
From Interval Numbers Enter the maximum value for interval of numbers. Ex: 49. 
 
 
 
 
 
Extra Balls Enter the maximum number for extra balls. Ex: 2. 
 
 
 
Extra Interval Numbers Enter the maximum value for interval of extra numbers. Ex: 20. 
 
 
 

Step 2: DIV container results

Step 3: Add CSS

Add CSS files inside a header tag.

Step 4: Add Javascript

Add Javascript files before clossing.

Step 5: Complete HMLT Structure

Here is the complete HTML structure of our javascript random number generator using jquery.

       
 
 
Random Numbers Generator
 
 
 
 
  
 
 
From Balls Enter the maximum number for balls. Ex: 6. 
 
 
 
From Interval Numbers Enter the maximum value for interval of numbers. Ex: 49. 
 
 
 
 
 
Extra Balls Enter the maximum number for extra balls. Ex: 2. 
 
 
 
Extra Interval Numbers Enter the maximum value for interval of extra numbers. Ex: 20. 
 
 
 
 
 
    

Here is the complete CSS code of our main.css.

@charset "UTF-8"; /* GLOBALS AND RESETS */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, ul, li, form, br < margin:0; padding:0; border:0; font-size:100%; vertical-align:top; >*, *:before, *:after < -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; >html < background:#d9dde2; >body < position:relative; font-size:1em; font-family:"Open Sans", sans-serif; -webkit-text-size-adjust:none; color:#293444; background:#eef2f8; font-weight:400; min-width:1200px; >sup < padding:0; margin:0; font-size:90%; line-height:normal; >a < text-decoration:none; color:#cd6a01; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; >a:hover < -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; color: #FA0; >canvas < position:absolute; top:0; z-index:0; >a img < border:none; >li < list-style:none; >.img-left < float:left; margin:0 10px 10px 0 !important; >.img-right < float:right; margin:0 0 10px 10px !important; >.inline < display:inline-block; >.transition < -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out; >.white < color:#FFF; >.red < color:#cc0000; >.btn < background:#ffea00; background:-moz-linear-gradient(top, #ffea00 0%, #ffbf00 100%); background:-webkit-linear-gradient(top, #ffea00 0%, #ffbf00 100%); background:linear-gradient(to bottom, #ffea00 0%, #ffbf00 100%); >ul < position:relative; list-style-type:none; >ul li < padding:6px 0 6px 35px; line-height:22px; margin-bottom:10px; position:relative; >ul li:before < content:""; width:26px; height:26px; background: url(/loto/img/icon-sprite.png) no-repeat 10.493% 9.346%; background-size:500px 1500px; position:absolute; top:5px; left:0px; >ul li a < color: #000; >/* TYPOGRAPHY */ h1,h2,h3,h4, .title < font:2.250em/48px Oswald, sans-serif; color:#ff5301; text-transform:uppercase; letter-spacing:1px; >h1 < margin-bottom:20px; font-weight:700; >h2 < font-size:1.750em; line-height:34px; margin-bottom:15px; padding-top:20px; font-weight:700; >h3, .title < font-size:1.5em; line-height:26px; margin-bottom:15px; padding-top:20px; >h4, .title < font-size:1.313em; line-height:24px; margin-bottom:15px; padding-top:20px; >p.white < color:#FFF; >.generic-box .large < font-size:1.65em; >p span < font-family:"open_bold", sans-serif; >.small < font-size:0.875em; >/* GENERAL CONTENT */ p < line-height:30px; margin-bottom:25px; letter-spacing:-0.5px; >/* BUTTONS & LINKS */ .btn < position:relative; font:1.3em/24px Oswald, sans-serif; text-transform:uppercase; text-align:center; text-decoration:none; padding:10px 15px; display:inline-block; z-index:0; border:none; cursor:pointer; border:1px solid #ffea00; -webkit-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.5); box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.5); border-radius:4px; letter-spacing:1px; color:#000; font-weight:700; >.btn:hover, a:hover < background:#ffe651; background:-webkit-linear-gradient(#ffe651 0%, #ffa023 100%); background:-o-linear-gradient(#ffe651 0%, #ffa023 100%); background:linear-gradient(#ffe651 0%, #ffa023 100%); color: #000; >.btn.green < background:#7ad85d; background:-moz-linear-gradient(top, #7ad85d 0%, #66b34e 100%); background:-webkit-linear-gradient(top, #7ad85d 0%, #66b34e 100%); background:linear-gradient(to bottom, #7ad85d 0%, #66b34e 100%); border-color:#82e463; color:#fff; >.btn.green:hover < background:#88ec69; background:-moz-linear-gradient(top, #88ec69 0%, #75cb5a 100%); background:-webkit-linear-gradient(top, #88ec69 0%, #75cb5a 100%); background:linear-gradient(to bottom, #88ec69 0%, #75cb5a 100%); color: #FFF; >.btn-alt < background:#66b34e; padding:10px 15px; border-radius:4px; color:#fff; font:1.125em/18px Oswald, sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:1px; >.btn-alt:hover < background:#76cd5b; color: #FFF; >.button-box < display:inline-block; padding:30px 0; width:100%; >.btn.btn-left < float:left; position:relative; >.btn.btn-right < float:right; position:relative; >.btn.disabled < background:#DDD; color:#AAA; border:1px solid #CCC; cursor:default !important; >.generic-box < display:inline-block; width:100%; margin-bottom:30px; padding:30px; position:relative; background:#f9f9f9; border:1px solid #e3e7ee; border-radius:4px; >.generic-box .box:last-child < border-right:none!important; >.generic-box h2 < padding-top:0; >/* 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

And our number_generator.js code:

$('#startNumbersGeneratorForm').on('submit', function(event) < event.preventDefault(); var resultsDiv = $('#generatorResults'); $(resultsDiv).empty(); var balls = parseInt($(this).find('input[name="from_balls"]').val()); var from = parseInt($(this).find('input[name="range_numbers"]').val()); var balls2 = parseInt($(this).find('input[name="extra_balls"]').val()); var from_extra = parseInt($(this).find('input[name="range_extra_numbers"]').val()); var numbers = new Array; for(let i = 1; i 0) < var extra_numbers = new Array; for(let i = 1; i var resultsUl = document.createElement('ul'); resultsUl.setAttribute('class', 'balls big'); $(resultsDiv).append(resultsUl); if(balls2 > 0) < for(let i = 1; i for(let i = balls + 1; i generate(balls, numbers, balls2, extra_numbers); > else < for(let i = 1; i generate(balls, numbers); > >); function generate(balls, numbers, balls2=0, extra_numbers=0) < $(".innerB").html("?"); for (var i = 1; i < balls + balls2 + 1; i++)< createNums($("#B" + i + " .innerB"), i, balls, numbers, balls2, extra_numbers); >for (var i = 1; i < balls + balls2 + 1; i++)< moveNums($("#B" + i + " .innerB"), i, balls, numbers, balls2, extra_numbers); >>; function createNums(obj, idNum, balls, numbers, balls2, extra_numbers) < if (idNum ' + numbers[chosen] + '