close
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
color: steelBlue;
}
.process{
color: black;
font-size: 20px;
}
li{
margin: 10px 0;
}
.processValue{
color: darkRed;
}
</style>
</head>
<body>
<h2>亂數抽出<br>
<input type="number" min="0" id="min">
到<input type="number" min="0" id="max"><br>之間的數字</h2>
<button id="btn">我抽</button>
<h2>結果是<span class="result"></span></h2>
<hr>
<h2>這都是過程</h2>
<ol>
<li>
<span class="process">Math.random()產出後：
<span class="processValue" id="afterrandom"></span></span>
</li>
<li>
<span class="process">然後乘以
{[最大值<span class="showmax"></span>
減最小值<span class="showmin"></span>
也就是<span class="maxMinusmin"></span>}
後：<span class="processValue" id="aftermultiply"></span>
</span>
<br>（這個值一定會小於<span class="maxMinusmin"></span>）
</li>
<li>
<span class="process">加上
最小值 <span class="showmin"></span> 後：
<span class="processValue" id="afterplus"></span>
</span>
</li>
<li>
<span class="process">
Math.floor後：<span class="processValue result"></span>
</span>
</li>
</ol>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var min=document.getElementById('min').value;
var max=document.getElementById('max').value;
document.getElementsByClassName('showmax')[0].textContent=max;
document.getElementsByClassName('showmin')[0].textContent=min;
document.getElementsByClassName('showmin')[1].textContent=min;
min=parseFloat(min);
max=parseFloat(max);
var rand=Math.random();
var maxMinusmin=max-min;
document.getElementById('afterrandom').textContent=rand;
document.getElementsByClassName('maxMinusmin')[0].textContent=maxMinusmin;
document.getElementsByClassName('maxMinusmin')[1].textContent=maxMinusmin;
var randmuti=Math.random()*maxMinusmin;
document.getElementById('aftermultiply').textContent=randmuti;
var andplusmin=randmuti+min;
document.getElementById('afterplus').textContent=andplusmin;
var gofloor=Math.floor(andplusmin);
document.getElementsByClassName('result')[0].textContent=gofloor;
document.getElementsByClassName('result')[1].textContent=gofloor;
}
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
