JavaScript

javascript 学習メモ

スロットです。

1 元になっている整数はgetJSONで取得してきたYouTubeの閲覧値です。
ランダムな整数をスロットのように表示して、下の値から順に停止させる。
下の値から順に停止させるスピードもランダムに生成。

var arrNum = [];
var origin = 0;
var maxLength = 7;//任意のNUMです。

function getAjax(){
  $.when(
     $.getJSON(''),
    $.getJSON('')
  )
  .done(function(object_a, object_b) {
    count01 = object_a[0].items[0].statistics.viewCount;//1
    count02 = object_b[0].items[0].statistics.viewCount;//1
    AddviewCount = parseInt(count01) + parseInt(count02);//文字列を整数に変換します。
    stringNum = String(AddviewCount);
    arrNum = Array.prototype.slice.call(stringNum);//配列に変換
    origin = arrNum.length;

   for(var f = 0; f < maxLength-origin; f++){
     arrNum.unshift(0);
   }
    shuffle(arrNum);
  });
}

//randamな整数を出して、スロットのように表示させる関数
function shuffle(data){
  var listId = document.getElementById('conutNum');
  var li = listId.querySelectorAll('li');
  var liLength = li.length;
  var f;
  var target = [];
  var shuffleTimer = [];
  var value = maxLength;

    for(var f = maxLength-1; f >= 0; f--){//下の値からのloop
      target[f] = li[f].getElementsByTagName('img');
      function timer(x){
        shuffleTimer[f] = setInterval(function(){
          var j = Math.floor(Math.random()*(9))+1;//ランダムな整数
          $(x).attr("src", urlです + j + ".png");
        },100);
      };timer(target[f]);

      var i = -f + liLength + 1;

      function stopTimer(x,y){
        setTimeout(function(){
          clearInterval(shuffleTimer[value]);
          $(target[value]).attr("src", urlです + y[value] + ".png");
            value--;
          if(value == 0){
            setTimeout(function(){
            playAjax();
          },1000);
          }
        },300 + (i * 600));
      }
      stopTimer(shuffleTimer[f],data);
    }
}

var num = 0;
var playAjaxnum = 0;
var numMax = 100;

function playAjax(){
    conutNum = document.getElementById('conutNum');
    ul = conutNum.querySelector('ul');
    ul.innerHTML = "";

    var callback = function(object){

        fragment = document.createDocumentFragment();

        for(var i = 0; i < arrNum.length; i++){
          li = document.createElement("li");
          p = document.createElement("p");
          img = document.createElement("img");
          img.setAttribute("src", urlです + arrNum[i] + ".png");
          img.className = "shuffle";
          li.appendChild(p);
          p.appendChild(img);
          fragment.appendChild(li);
        }
        ul.appendChild(fragment);
    }
      callback()

//randamなspeedの生成
function rand(){
  var min = 500;
  var max = 3000;
  var l = Math.floor( Math.random() * (max + 1 - min) ) + min;
  return l;
}

    var numchange = function(){
      if(playAjaxnum <= (numMax)){
          playAjaxnum++;
          numAdd = AddviewCount + playAjaxnum;
          stringNum = String(numAdd);
          arrNum = Array.prototype.slice.call(stringNum);
          xxx=arrNum.length;
         for(var f = 0; f < maxLength-xxx; f++){
           arrNum.unshift(0);
         }
        for(var i = maxLength-1; i >= 0; i--){
          target = conutNum.querySelectorAll('li')[i].getElementsByTagName('img');
          $(target).attr("src", urlです + arrNum[i] + ".png");
        }
      }
    }
    var looplimed = 0;
    function originloop(){
      looplimed++;
      var randamNum = rand();
      numchange();
      if(looplimed < 100){
        setTimeout(function(){
          originloop();
        },randamNum);
      }
    }
  originloop();