Форум

Fox- · #1 (**permalink**) 10.01.2018, 02:22

Привет всем, пытаюсь немного подкорректировать код, но не удается.
На данном форуме нашел скрипт рулетку

<!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>

В файле test.txt у меня лежит число, на котором нужно остановить вращение, делаю так

<!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 = 0;
var tempDiv = $('body').append($('<div/>').attr('id', 'temp')).find('#temp');
tempDiv.load("/test.txt");
n = tempDiv.text();
tempDiv.remove();

\\\\\\\\\\\\\\\\\\\\\

        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>

но число 1 выпадает всегда, я никогда не писал на js не разбераюсь, как можно это сделать?

Fox- · #2 (**permalink**) 10.01.2018, 20:12

Ни кто ни знает, это возможно вообще осуществить ??? В test.txt рандомно выбранное число, на этом числе нужно остановить вращение

рони · #3 (**permalink**) 10.01.2018, 20:35

Сообщение от Fox-

В test.txt рандомно выбранное число,

index там а не число ... пробуйте

<!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')
          });

var n = 0;
var tempDiv = $('<div/>');
tempDiv.load("/test.txt", function(data) {
n = +data;
tempDiv.remove();
});


function lotto()
    {

        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>

рони · #4 (**permalink**) 10.01.2018, 20:41

Fox-,
или так

<!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')
          });

var n = 0;
function init()
{
$('p').text("загрузка комбинаций");
var tempDiv = $('<div/>');
tempDiv.load("/test.txt", function(data) {
n = +data;
tempDiv.remove();
lotto()
});
}



function lotto()
    {

        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 : init})
})
  </script>
</head>

<body>
<div>
    <ul id="carusel">

    </ul>
  </div>

    <p></p>
    <input name="" type="button" value="go">
</body>
</html>

Fox- · #5 (**permalink**) 11.01.2018, 17:50

Вращение вообще безостановочное через 1-й и 2-й код, в txt цифра 7, вращение не останавливается не то что на 7, оно вообще не останавливается, у вас работает?

рони · #6 (**permalink**) 11.01.2018, 17:53

Сообщение от Fox-

у вас работает?

да

рони · #7 (**permalink**) 11.01.2018, 18:01

Fox-,
по ссылке живой пример
http://plnkr.co/edit/bFxBOR5pJEeAfOq6pvyz?p=preview
строка 47 уточните путь к файлу, если нужно потом у себя
слева test.txt измените индекс 7, если хотите проверить

Fox- · #8 (**permalink**) 12.01.2018, 16:39

Сообщение от рони

Fox-,
по ссылке живой пример
http://plnkr.co/edit/bFxBOR5pJEeAfOq6pvyz?p=preview
строка 47 уточните путь к файлу, если нужно потом у себя
слева test.txt измените индекс 7, если хотите проверить

В начале вместо 7 выпадала 67. Вместо 3 выпадала 4, при выборе некоторых чисел -например 800 вписывал в txt, то бесконечно вращался снова.
Заменил все цифры на барабане, расставил по порядку и заработал скрипт! Спасиб Рони, от души

рони · #9 (**permalink**) 12.01.2018, 17:02

Сообщение от Fox-

В начале вместо 7 выпадала 67. Вместо 3 выпадала 4, при выборе некоторых чисел -например 800 вписывал в txt, то бесконечно вращался снова.

Сообщение от рони

index там а не число ... пробуйте

чтоб выпало 800 надо в txt написать 6!!!
var arr = [1,4,90,56,3,400,800,67,7,34,12345]
максимальный индекс тут 10!!!
ферштейн?

Fox- · #10 (**permalink**) 12.01.2018, 22:40

Сообщение от Fox-

Заменил все цифры на барабане, расставил по порядку

ладно ...,по индексу, Изменил код, говорю же

var arr = [1,2,3,4,5,6,7,8,9,10,12345]

максимальный индекс 11, 12345 -это 11 число, или не так?
но спасибо, что разъяснил.

Форум

Справочник

Discord чат

Курсы javascript