$(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);
});

@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;
}

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

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