view source

JavaScript

$(function(){
  document.title = 'ダイス(サイコロ)をふる | ランダムな数値を生成する';
  var $form = $('<form>');
  var $div = $('<div>');
  var $input = $('<input>',{type:'number', min:'1', max:'999',title:'最大値'}).val(6);
  var $result = $('<div>',{id:'result'});
  var $resultChild = $('<div>',{id:'resultChild'});
  var $resultNum = $('<span>');
  var $log = $('<textarea>',{title:'記録'});
  var $img = $('<img>', {src:'dice-6.svg', title:'ダイスをふる'});
  var se = new Audio('dice.mp3');
  se.volume = 0.05;

  $result.on('click', function(){
    var max = Number($input.val());
    var n = Math.floor(Math.random()*max)+1;
    se.currentTime = 0;
    se.play();
    var nn = n;
    if(max !== 6){
      nn+= '/' + max;
    }
    console.log(n);
    $log.val($log.val() + nn + ', ');
    if(max< 7 && n < 7){
      $img.attr({src:'dice-'+n+'.svg'});
      $resultNum.text('');
    } else {
      $img.attr({src:'dice-0.svg'});
      $resultNum.text(n);
    }
    return false;
  });
  $('#demo')
    .append($form);
  $div
    .append($input)
    .append($log)
  $result
    .append($resultChild)
  $resultChild
    .append($img)
    .append($resultNum)
  $form
    .append($div)
    .append($result);
});

CSS

@font-face {
	font-family: 'LeagueGothic';
	src: url(/fonts/LeagueGothic-Regular.ttf);
}
html,body{
  overflow:hidden;
  font-family: LeagueGothic, 'Meiryo';
}


form{
  width:100%;
  margin:0 auto;
  padding:0;
  text-align:center;
}
form >div{
  display:flex;
  flex-direction: row;
  flex: 2;
}

input, button, textarea{
  display:block;
  font-size:40px;
  width:100%;
}
input[type="number"]{
  text-align:center;
  font-size:40px;
  font-weight:bold;
  width:20%;
  height:60px;
}
textarea{
  width:80%;
  height:60px;
  font-size:16px;
}
#result{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:120px;
  text-align:center;
  border:0;
  width:100%;
  height:calc(100vmin - 120px);
  user-select:none;
  cursor:pointer;
}
#resultChild{
  position:relative;
  top:0;
  left:0;
  text-align: center;
  width:100%;
  height:calc(100vmin - 120px);
}
#result img{
  display:inline-block;
  /*transform: translate(-50%, -50%);*/
  height:calc(100vmin - 120px);
}
#result span{
  display:inline;
  position:absolute;
  top: 0;
  left: 0;
  font-size:60vh;
  vertical-align: bottom;
  padding:10vmin 0;
  height:calc(100vmin - 120px);
  width:100%;
  font-weight:bold;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-number-random-dice/

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。