крутилка/барабан/лототрон/лотерея/рулетка
Здраствуйте
делаю сайт - чтото на подобии выбора рандомного победителя как Вконтакте(ставок нет, только рандом - пользеватель нажимает участвовать, добавляется в список, по истечению времени выбирается победитель) задача: пока понять как оно все сделано и "на чем"(а именно сам "барабан" и таймер отсчета - как я понял он серверный) - но если будут примеры то хорошо и сделать "визуализацию" победы яркий пример - видео(у меня чтото похожее но без шанса/без ставок и тд) так rак тема сходная мне рекомендовали разобратся в скриптах рулеток пример но пока не понял каким образом там ведется отсчет и выбирается виннер, что используется конкретно сейчас много сайтов типа http://csgolucky.ru/ ,где ставят предметы, получают шанс на победу интерисует подробная их работа(что используют, какие скрипты php, может js...), кто знает подскажите, ведь тема похожая пытался поработать с этим скриптом и еще со сходным, написанным на swiper.js спасибо за помощ |
228, победитель уже заранее известен на сервере, а в JS - фейк.
Т.е., допустим у нас есть 10 игроков, а победил 5-й игрок. Нам генерируется 10 аватарок, нужно плавно прокрутить до 5-й аватарки с эффектом замедления. scroll = avatarWidth * 5 + containerWidth / 2 - avatarWidth / 2 Вот и всё. Правда, это всё можно немного по другому сделать. Например, предусмотреть в JS повторения аватарок и т.д. Тут ничего сложного нет, сплошные формулы. |
|
Ruslan_xDD, я так впринципе и задумывал рандомно выбирается а скрипт просто визуализирует
рони,спасибо прикольные примеры еще задача в том чтобы брались из масива или бд аватарки(числа) в примерах div'ы |
мне бы http://jsfiddle.net/orbhxjs3/ переделать чтобы с масива числа бралисьRL] переделать чтобы числа брались с масива
|
Цитата:
CREATE DEFINER = 'root'@'localhost' PROCEDURE 'myDataBase'.getAvatars() BEGIN SELECT * FROM `avatars`; END Вызываешь запрос в PHP (лучше через PDO): $query = $connect->query('call `getAvatars`()'); while($result = $query->fetch()) { $avatars[] = $result; } echo '<pre>'; print_r($avatars); echo '</pre>'; |
Ruslan_xDD,
наверно не так я написал у меня уже есть перменная с выграшным номером, заноше ее в даном скрипте в переменную nn var oneHeight=80, // размер одного элемента numImage=10, // количество элементов speedStep=0.2; // скорость изменения скорости function LetsGo(){ clearInterval(LetsGo.interval); var x=[]; for(var i in{xxx1:1}){ var ob=5+Math.floor(Math.random()*6), // количество оборотов 5 минимум, 10 - максимум nn=4;//выграшный номер, 5 num=Math.floor(nn), // выигравший нумер o={ ob:ob,num:num, a:document.getElementById(i), // это наш контрол с классом XXX // время=(speedStart)/speedStep // расстояние=(speedStart/2)*время -арифм прогр // расстояние=speedStart^2/(2*speedStep) // speedStart=sqrt(расстояние*2*speedStep) speed:Math.sqrt(((ob*numImage+num)* oneHeight)* speedStep*2), // скорость scr:-26 // магия, блин }; // выигравший номер x.push(o); } LetsGo.interval=setInterval( function (){ var i = x.length,complete=true; while(i--){ var a=x[i]; a.scr+=a.speed; if(a.speed>2*speedStep){ a.speed-=speedStep;complete=false; } else if(a.speed>0) { var t= Math.round(a.scr / oneHeight); if(t>=numImage) t=0; console.log(i,t,a.scr-oneHeight*t,a.ob,a.num); a.scr=oneHeight*t; a.speed=0; complete=false; } if(a.scr>(oneHeight*numImage)) a.scr-=oneHeight*numImage; a.a.scrollTop=Math.floor(a.scr); } if(complete) clearInterval(LetsGo.interval) },20) } а вот сама выборка(1-10) задается в for(var i in{xxx1:1}){ и водится в div'aх <div id='xxx1' class='XXX'> <div class='X'>1</div> <!-- а вот тут - 10 картинок --> <div class='X'>2</div> <div class='X'>3</div> <div class='X'>4</div> <div class='X'>5</div> <div class='X'>6</div> <div class='X'>7</div> <div class='X'>8</div> <div class='X'>9</div> <div class='X'>10</div> <div class='X'>1</div> </div> нужно чтобы ввод был не в дивах а в масиве, не выходи это сделать наглядно |
lotto на jquery
228,
:) <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> li{ margin: 0px; width: 60px; height:50px; display: block; text-align: center; color: rgba(255, 255, 255, 1); font-size: 24px; font-weight: bold; } #carusel { position:relative; top: 0px; left:0px; display:block; width: 60px; height:0px; padding: 0px; margin: 0px; } div{ overflow:hidden; width: 60px; height:50px; position: relative; left: 100px } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function () { var arr = [1,4,90,56,3,400,800,67,7,34,12345], carusel = $('#carusel'); function rand(min, max, integer) { var r = Math.random() * (max - min) + min; return integer ? r|0 : r; } function rgbColor() { return 'rgb(' + rand(0 ,256, true) + ', ' + rand(0 ,256, true) + ', ' + rand(0 ,256, true) + ')'; } $.each(arr,function(indx, el){ $('<li/>',{text : el, data : {i : indx},css : {'background-color' : rgbColor()}}).appendTo(carusel) carusel.height('+=50') }); function lotto() { var n = rand(0 ,arr.length, true); r = rand(2 ,5, true); $('p').text(arr[n]); carusel.stop(); (function go() { carusel.animate({ top: '-=50' }, 200, function () { var li = $('li:first'); data = li.next().data('i'); if (data == n) r--; li.appendTo(carusel) carusel.css({ top: '0px' }); r && go() }) }()) } $('[type="button"]').on({click : lotto}) }) </script> </head> <body> <div> <ul id="carusel"> </ul> </div> <p></p> <input name="" type="button" value="go"> </body> </html> |
228,
Цитата:
2 форума, mysql, php, js - не надоело? Цитата:
|
Poznakomlus,
приятно видеть знакомые лица) вот не получалось переделать скрипт под массив например логика в процесе ведь не знаю правельная ли она |
рони,
большое спасибо, прямо в точку |
228,
строка 43, n должно быть у всех одно и генерироваться на сервере, о чём вам сказали выше. |
рони,
спасибо, впринципе перебором ее и искал, ведь чужой скрипт читать не всегда легко |
рони,
пытался внедрить скрипт в страницу, но есть загвоздки -при клике на "go" выграшный номер пишется во всех div'ах на странице(впринципе его можно и не писать) -выбирать мне нужно будет не с кнопки, а показывать выбор по прошествию времени-както по условию бы |
228,
строка 45 $('p').text(arr[n]); просто для контроля ставьте свой селектор куда хотите вывести. и условие например в строку 54 if(!r) alert('Победил номер: ' + arr[n]) Цитата:
|
рони, понял, спс
подскажите каким образом можно будет реализовать(куда копать): делаю чтото на подобии лотереи/конкурса(просто запись в бд, отсчет времени, рандом с нее) но без шанса и упрощенно так как многого не шарю...-тема похожая на рулетки всякие -юзер жмякает участвовать и без перезагрузки страници он и все кто сидит на странице видят что в списке +1(какбы динамически подгрузились учасники) -когда участвуют напр. 2 и больше пошло время отсчета(до этого времени не было видно, во время отсчета могут добавлятся новые учасники) -по окончанию запросом выбирается победитель(и появляется та самая крутилка,которая укажет на виннера) -потом все исчезает и снова можно нажимать участвовать,видеть список...) сами запросы,таймер практически реализованы, вот не знаю как/чем визуальную составляющую подтянуть |
228,
пас |
рони,
пробую сделать вместо чисел - картинки, но не выходит есть массив $output в php(там адреса картинок через запятую-какраз для вставки в массив так: /avatars/1444823634.jpg,/avatars/1444823635.jpg,/avatars/1444823636.jpg), вставляю $output в var arr = [...] но пишет же текст, а нужно вывод картинки по-всякому пробовал но не выходит(кажется что это невозможно, а возможно по иду только вывести) подскажите что-то |
228,
$('<li/>',{text : el, заменить на $('<li/>',{html: $('<img/>', {src : el}), |
рони,
в очередной раз спасибо за помощ правда еще есть пару вопросов: -когда переделываю чтобы движение было не снизу-вверх а напр. справа-налево както некоректно отображаются картинки, сплюснуто и остановка не в том месте |
228,
учите css |
рони,
все получилось ... http://jsfiddle.net/rwsj9bdo/ |
228,
:dance: |
было бы интересно увидеть на каком этапе вы сейчас) очень заинтересовала работа)
|
Помогите плиз, кому не жалко 5 минут времени, сделайте уже то что мне нужно, ото я 3 часа пытался сделать, но не получается.
1. Мне нужно чтобы случайное число я мог писать через php. То есть чтобы крутилка, выдавала нужный мне вариант. 2. Нужно чтобы Победный вариант, был по середине других вариантов. То есть к примеру, 3 других варианта с право и лево. 3. Нужно чтобы я мог в место цифр, вставлять картинки. То что тут написано, я пробовал, но у меня в место цифр, ссылки на картинки не катят ;) Там нужно как то по другому, но я не шарю. Последний вариант, наиболее подходящий. Я его пытался изменить под то что мне нужно. http://jsfiddle.net/rwsj9bdo/ Ещё вариант, уже готовый, но я не шарю :) Хотел убрать всё лишнее, чтобы можно было просто использовать сам эффект. <div class="row" id="roulette"> <div class="col-md-12 text-center"> <div class="slider-wrap"> <div class="fix"></div> <div class="carousel-body"> <ul id="carousel"> <li><img src="http://img-host.ucoz.com/_bd/2/51675254.png" alt="#"></li> <li><img src="http://img-host.ucoz.com/_bd/2/51675254.png" alt="#"></li> <li><img src="http://img-host.ucoz.com/_bd/2/92272003.png" alt="#"></li> <li><img src="./ruletca_files/r-img3.png" alt="#"></li> <li><img src="./ruletca_files/r-img4.png" alt="#"></li> <li><img src="http://img-host.ucoz.com/_bd/2/94140269.png" alt="#"></li> <li><img src="http://img-host.ucoz.com/_bd/2/94140269.png" alt="#"></li> <li><img src="./ruletca_files/r-img3.png" alt="#"></li> <li><img src="./ruletca_files/r-img6.png" alt="#"></li> <li><img src="./ruletca_files/r-img7.png" alt="#"></li> <li><img src="./ruletca_files/r-img9.png" alt="#"></li> <li><img src="http://img-host.ucoz.com/_bd/2/94140269.png" alt="#"></li> </ul> </div> </div> </div> </div> <div class="row" id="error_msg" style="display: none;"> <div class="col-md-6 col-sm-8 col-xs-12 col-md-offset-3 col-sm-offset-2 col-xs-offset-0"> <div id="error_message" class="error">Ошибка!</div> </div> </div> <div class="row" id="btn"> <div class="col-md-12 text-center"><button class="spinn" onclick="roulette.run();">Крутить</button></div> </div> .fix { position: absolute; content: ''; background: url([url]http://img-host.ucoz.com/_bd/2/79291116.png[/url]) center top no-repeat; width: 29px; height: 179px; bottom: -20px; left: 50%; margin-left: -15px; z-index: 30; } .slider-wrap .carousel-body, .slider-wrap #carousel { list-style: none; overflow: hidden; position: relative; left: 0px; white-space: nowrap; } .slider-wrap ul { list-style: none; overflow: hidden; position: relative; left: 0px; white-space: nowrap; } .slider-wrap li{ position: relative; border: 1px solid #fdbf03; height: 100px; border-radius: 50%; text-align: center; width: 100px; display: inline-block; margin: 0px 6px; } .slider-wrap li img{ display: block; position: absolute; bottom: 50%; margin-bottom: -20px; right: 50%; margin-right: -40px; width: 80px; height: 40px; } .roulette .spinn{ display: inline-block; border: none; outline: none; background-color: #fdbf03; color: #fff; font-size: 16px; padding: 21px 98px; border-radius: 45px; -webkit-box-shadow: 0px 0px 101px -7px rgba(253,191,3,0.56); -moz-box-shadow: 0px 0px 101px -7px rgba(253,191,3,0.56); box-shadow: 0px 0px 101px -7px rgba(253,191,3,0.56); transition: 0.5s; margin-bottom: 60px; } .roulette .spinn:hover{ background-color: #fdb903; -webkit-box-shadow: 0px 0px 121px -7px rgba(253,191,3,1); -moz-box-shadow: 0px 0px 121px -7px rgba(253,191,3,1); box-shadow: 0px 0px 121px -7px rgba(253,191,3,1); } .r-inf{ display: inline-block; padding-left: 45px; color: #666 !important; position: relative; font-size: 14px; margin-left: 35px; margin-bottom: 50px; } .r-inf:before{ position: absolute; content: ''; left: 0; top: 50%; margin-top: -16px; background-color: #000; width: 31px; height: 31px; border-radius: 50%; } .roulette .left:after{ position: absolute; content: '\f129'; left: 12px; top: 0; font-family: 'FontAwesome'; font-size: 14px; color: #fff; } .roulette .right:after{ position: absolute; content: '\f03a'; left: 8px; top: 0; font-family: 'FontAwesome'; font-size: 14px; color: #fff; } .error{ display: block; text-align: center; font-size: 16px; color: #fff; background-color: #ffa4a4; border-radius: 30px; margin-bottom: 75px; position: relative; padding: 20px 0 17px; } .error:before{ position: absolute; content: '\f071'; font-family: 'FontAwesome'; font-size: 16px; color: #c53852; left: 7%; top: 50%; margin-top: -6px; } var active = true; var running = false; $(window).blur(function () { active = false; }); $(window).focus(function () { active = true; }); var REDIRECT_URL = '/roulette-win.php'; function runRoulette() { if (!running) { running = true; var audio = new Audio('/roulette/case_scroll.wav'); var slot_width = $('.item').outerWidth(true); var offset = slot_width * Math.min(Math.max(Math.random(), .2), .8); var startPos = parseInt($('#carousel').css('margin-left')) - 120; var position = 0; var interval = setInterval(function () { var start_offset = parseInt($('#carousel').css('margin-left')) - startPos + 3; var cPosition = Math.floor(start_offset / (slot_width + 6)); if (cPosition != position && cPosition < 0) { position = cPosition; if (active) { audio.pause(); audio.currentTime = 0; audio.volume = 0.25; audio.play(); } } }, 10); var leftOffset = $('#carousel').find('li[win="1"]').offset().left; var splitterOffset = $('.fix').offset().left; $('#carousel').animate({'margin-left': '-=' + (leftOffset - splitterOffset + offset)}, 10000, 'easeOutCubic', function () { if (interval) clearInterval(interval); setTimeout(function() { $("#winblock").show(); $("#miniprofile").fadeOut(); $("#roulette").fadeOut(); $("#btn").fadeOut(); }, 400) }); } } var exec = 0, roulette = { run: function() { $("#error_msg").hide(); if(!running) { $.ajax({ url: "/roulette/ajax.php", type: "POST", data: {ajax: true}, success: function (data) { console.log(data); data = $.parseJSON(data); switch(data.status) { case 'error': console.log(data.error); $("#error_msg").show(); $("#error_message").html(data.error); break; case 'success': $("#balance").html(parseInt($("#balance").text()) - data.price); $("#carousel").html(""); var winner = ""; for(var i = 0; i < 37; i++) { if(data.items[i].winner == true) { winner = 'win="1"'; $("#what_win_img").attr("src", data.items[i].item_img); $("#what_win").html(data.items[i].item_name); } else { winner = ""; } $("#carousel").append('<li class="item" '+ winner +'><img src="'+ data.items[i].item_img +'" alt="'+ data.items[i].item_name +'"></li>'); } runRoulette(); break; } } }); } console.log("Error: Игра уже идёт!"); } }; Вариант который я скинул, если его кто то настроит просто под эффект, который можно будет использовать. То я буду благодарен. |
Цитата:
создаете массив со ссылками например arr2 = ['http://mashina.png', 'http://babki.png', 'http://stvol.png', 'http://telka.png'] после 'background-color': rgbColor(), вставляете сроку 'background-image': 'url('+arr2[indx]+')' и все работает. или если картинки под цифрами и массив не нужен. |
это я про http://jsfiddle.net/rwsj9bdo/
|
|
А как сохранить на компьютер, чтобы всё работала как должно.
На сайте я вот так вот сделал, всё работает. Цитата:
Цитата:
|
Бикбай,
надо загрузить jquery вначале <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
Спасибо! Помогли!
А как сделать, чтобы нажатие кнопки ещё раз, можно было только после того, когда будет получен результат прошлого. Ещё хотелось бы, чтобы результат показывала по середине, а по бокам, несколько других вариантов. https://youtu.be/NJyp-7GQsaI |
Цитата:
$('[type="button"]').prop('disabled', true); $('[type="button"]').prop('disabled', false); ниже показано куда пихать :write: (function go() { $('[type="button"]').prop('disabled', true); carusel.animate({ left: '-=50' }, 100, function () { var li = $('li:first'); data = li.next().data('i'); if (data == n) {r--;$('[type="button"]').prop('disabled', false);} li.appendTo(carusel) carusel.css({ left: '0px' }); r && go() }) }()) строка 2 и 8 |
Не работает, хоть я и вставлял целиком код что в примере, а по отдельности тоже не работает. Я заменил type="button" на id="button2" для удобства. Конечно я заметил, и заменил на свои. Но всё равно, кнопку можно нажимать много раз.
Ещё у меня не получается изменить случайные цвета, на нужные мне цвета. Типа как с картинками под названия, цвета тоже хочу. Но сделать через переменную как у картинок, чёт не канает у меня. |
http://jsfiddle.net/rwsj9bdo/85/
У меня все работает :-? Ссылки свежие кидайте, я так полагаю из за лейблов невидно. |
А всё спасибо, было уже поздно, а я весь день мутил эту рулетку. От позднего времени, мозги уже не соображали. У меня на кнопке была тоже замена, я использовал </label> в место <input>, час изменил обратно на <input> и всё работает. С случайными цветами в рулетке, с трудом, но разобрался.
https://youtu.be/0SJWj2wSs-8 Как сделать, чтобы эффект рулетки, не брал со страницы всё что используется через <li/> Ото со страницы, всё что под <li/> добавляется в рулетку как вариант. Картинка |
Всем привет. Товарищи выручайте мне данный скрипт очень понравился http://jsfiddle.net/rwsj9bdo/. Но надо сделать что бы result то есть победитель показывался под рулеткой. в стиле document.write и желательно чтобы видели все кто на сайте. Я всю голову сломал ну ни как не пойму как реализовать так как в JS недоучка.
|
|
Спасибо вам огромное! Выручили.
|
Как приз из рулетки отпавить на почту
Пользователь жмет на кнопку рулетки, получает число, (скидка на товар).
Вводит E-mail. Вопрос как это число вставить автоматически в субмит, для дальнейшей отправки вместе с e-mail в обработчик? |
Часовой пояс GMT +3, время: 18:56. |