javascriptとjqueryでロト７のクイックピックみたいな数字を選択できるものを作りました

2018年12月19日

もう何年もクイックピックという数字の自動選択でロト７を買ってるのですが、当たったためしがないです。
趣向を変えて、自分で７つ数字を選ぼうと思い、作成してみました。

<style>
#slot {
  width: 20em;
  margin: 1em auto;
}
#slot div {
  margin: 0;
  padding-bottom: .5em;
}
#slot_choices span {
  margin: 0;
  padding: 0;
  display:inline-block;
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  position: relative;
}
#slot_choices span.hit {
  color: red;
}
#slot_choices span.now::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2em;
  height: 2em;
  border: 1px solid blue;
  border-radius: 50%;
}
#slot_btns {
  text-align: center;
}
#slot_btns button {
  padding: .5em 1em;
}
</style>

<div id="slot"></div>

<script src="./jquery.min.js"></script>
<script>
"use strict";
var Slot7 = function () {
  var choices = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37];
  var choiced_id = null;
  var stop_flag = true;
  var choiced_count = 0;

  var elem_id = $('#slot');
  var div_choices = $('<div id ="slot_choices"></div>');
  for (var i = 0, len = choices.length; i < len; ++i) {
    div_choices.append('<span class="slot_id_'+choices[i]+'">'+choices[i]+'</span>');
  }
  elem_id.append(div_choices);

  var div_btn = $('<div id="slot_btns"></div>'),
      btn_start = $('<button></button>');
  div_btn
  .append(btn_start)
  elem_id.append(div_btn);

  function reset_choices() {
    if (choiced_id !== null) {
      choices.splice(choiced_id, 1);
    }
    var i, r, tmp;
    for(i = choices.length - 1; i > 0; i--) {
      r = Math.floor(Math.random() * (i + 1));
      tmp = choices[i];
      choices[i] = choices[r];
      choices[r] = tmp;
    }
  }

  function game_slot() {
    if (choiced_id !== null) {
      div_choices.find('.now').removeClass('now');
      div_choices.find('.slot_id_'+choices[choiced_id]).addClass('now');
    }
    if (! stop_flag) {
      return;
    }
    choiced_id++;
    if (choices.length <= choiced_id) {
      choiced_id = 0;
    }
    setTimeout(game_slot, 50);
  }

  function toggle_slot() {
    if (choiced_id === null || ! stop_flag) {
      reset_choices();
      stop_flag = true;
      game_slot();
    } else {
      stop_flag = false;
      div_choices.find('.slot_id_'+choices[choiced_id]).addClass('hit');
      choiced_count++;
    }
    toggle_btn(stop_flag);
    if (choiced_count >= 7) {
      btn_start.attr('disabled', true);
    }
  }

  function toggle_btn(flag) {
    if ( ! flag) {
      btn_start.text('START');
    } else {
      btn_start.text('STOP');
    }
  }
  toggle_btn(false);
  
  btn_start.on('click', function(){
    toggle_slot();
  });
}


$(function() {
  var slot7 = Slot7();
});
</script>

• Tweet