gacha

by Sure Sure

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<body>
  <div>
<p>Rtd Gacha Simulator</p>
<input type="radio" id="getRate1" name="getRate" value="1" checked="checked"><p1>：降臨！</p1><br>
<input type="radio" id="getRate2" name="getRate" value="2"><p1>：確率アップ！</p1><br>
<input type="radio" id="getRate3" name="getRate" value="3"><p1>：激アップ！</p1><br>
<input type="radio" id="getRate4" name="getRate" value="4"><p1>：激烈アップ！</p1><br>
<br>
<input type="text" id="getNumber" value="">
  <p2> &nbsp;回ガチャを引く！</p2>
<br>
<br>
<button type="button" id="calc">計算！</button>
  &nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" id="clear">クリア</button>
<br>
<p2>計算結果：</p2>
  <input type="text" id="setRate" value="">
<br>
<p3>コメント：</p3><br>
<input type="text" id="msg" value="">
</div>
</body>

CSS

body{
  background: url(http://2.bp.blogspot.com/-FygxA7lZxR4/VXmqlXRFEfI/AAAAAAAAIu8/3jSWUNxh_S0/s0/BG.png) repeat scroll top left;
}
div{
  margin:10px;
  text-align:left;
}
p{
    font-size:x-large;
    border: 0px;
	font-weight: bold;
	letter-spacing: -1px;
	color: #292;
    vertical-align: middle;
}
input, p1{
    vertical-align: middle;
    font-size:normal;
    border: 0px;
	font-weight: bold;
	letter-spacing: -1px;
	color: #111111;
}
#getNumber{
    width:40px;
    height:20px;
    text-align:center;
    font-size:normal;
	font-weight: bold;
	letter-spacing: -1px;
	color: #111111;
}
#setRate{
    vertical-align: middle;
    width:150px;
    height:50px;
    border: 0px;
    text-align:left;
    font-size:x-large;
	font-weight: bold;
	letter-spacing: -1px;
	color: #f02222;
	background-color:transparent;
}
p2{
    height:20px;
    border: 0px;
    text-align:left;
    font-size:normal;
	font-weight: bold;
	letter-spacing: -1px;
	color: #111111;
	background-color:transparent;
}
p3{
    width:100px;
    height:20px;
    border: 0px;
    text-align:left;
    font-size:normal;
	font-weight: bold;
	letter-spacing: -1px;
	color: #111111;
	background-color:transparent;
}
#msg{
    width:100%;
    height:20px;
    border: 0px;
    text-align:left;
    font-size:small;
	font-weight: bold;
	letter-spacing: -1px;
	color: #111111;
	background-color:transparent;
}
button{
    width:70px;  
    height:30px;
    border: 0px;
    text-align:center;
    font-size:normal;
	font-weight: bold;
    color:#fff;
	background-color:#f0a000;
    border-radius: 5px;
}

JavaScript

var calcButton = document.getElementById('calc');
var clearButton = document.getElementById('clear');

calcButton.addEventListener('click', calc);
clearButton.addEventListener('click', clear);

function calc(){
	var getRate1 = document.getElementById('getRate1');
	var getRate2 = document.getElementById('getRate2');
	var getRate3 = document.getElementById('getRate3');
	var getRate4 = document.getElementById('getRate4');
	var getNumber = document.getElementById('getNumber');
	var setRate = document.getElementById('setRate');
	var msg = document.getElementById('msg');
	var rate = 0;
	var textId = 0;
	var text =[
'まず引けません。素直に諦めるか、回数を増やしましょう。',
'まだまだ引けません。引いたら今日は自重した方が良いかも。',
'なかなか引けません。引けたらかなりラッキーでしょう。',
'わりと引けません。野球なら首位打者でしょう。',
'そこそこ引けます。引けなくても泣かない。',
'ぼちぼち引けます。当たるも八卦当たらぬも八卦の域。',
'なかなか引けます。引けなかったらご縁が無いのかも？',
'けっこう引けます。ここらが目安かもしれません。',
'かなり引けます。流石にここまでには引けるでしょう。',
'すごい引けます。外したら逆にすごいかも。',
'あなたが神か。'
  ];

	if(getRate1.checked){
    rate = Math.floor((1 - Math.pow(0.99,getNumber.value))*10000)/100;
		setRate.value = rate +'%';
		textId = Math.floor(parseInt(rate) / 10);
    msg.value = text[textId];
	}
	else if(getRate2.checked){
    rate = Math.floor((1 - Math.pow(0.98,getNumber.value))*10000)/100;
		setRate.value = rate +'%';
		textId = Math.floor(parseInt(rate) / 10);
    msg.value = text[textId];
	}
	else if(getRate3.checked){
    rate = Math.floor((1 - Math.pow(0.97,getNumber.value))*10000)/100;
		setRate.value = rate +'%';
		textId = Math.floor(parseInt(rate) / 10);
    msg.value = text[textId];
	}
	else if(getRate4.checked){
    rate = Math.floor((1 - Math.pow(0.96,getNumber.value))*10000)/100;
		setRate.value = rate +'%';
		textId = Math.floor(parseInt(rate) / 10);
    msg.value = text[textId];
	}
}

function clear(){
	var getNumber = document.getElementById('getNumber');
	var setRate = document.getElementById('setRate');
	var msg = document.getElementById('msg');
	getNumber.value = '';
	setRate.value = '';
	msg.value = '';
}