<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
label{display: block; margin: 20px;}
#box{ 260px; height: 50px; border: solid 1px black; margin-left:20px ;}
</style>
<script type="text/javascript">
//编写一个函数，计算三个数字的大小，按从小到大顺序输出。此处列出了两个方法
function $(id){return document.getElementById(id);}
window.onload = function()
{
oNum1 = $('num1');
oNum2 = $('num2');
oNum3 = $('num3');
oCompare = $('compare');
oBox = $('box');
function count ()
{
a = Number(oNum1.value);
b = Number(oNum2.value);
c = Number(oNum3.value);
//方法一：利用穷取法取尽所有可能并输出
if(a > b)
{
if(a > c)
{
if(b > c)
{
oBox.innerHTML = c + '<' + b + '<' + a;
}else
{
oBox.innerHTML = b + '<' + c + '<' + a;
}
}else
{
oBox.innerHTML = b + '<' + a + '<' + c;
}
}else
{
if( b > c)
{
if(a > c)
{
oBox.innerHTML = c + '<' + a + '<' + b;
}else
{
oBox.innerHTML = a + '<' + c + '<' + b;
}
}else
{
oBox.innerHTML = a + '<' + b + '<' + c;
}
}
}
//方法二：将最大值赋给a，第二大的赋给b，最小的赋给c。
// if( a < b)
// {
// t = a;
// a = b;
// b = t;
// }
// // 先对a和b 进行判断，将大的放在a 运行完第一个if可以保证a > b
// if(b < c)
// {
// t = b;
// b = c;
// c = t;
// }
// // 再对b和c进行判断，将大的放在b 运行完第二个if可以保证b > c
// if(a < b)
// {
// t = a;
// a = b;
// b = t;
// }
// // 最后再次对a和b 进行判断，因为有可能c是最大值，经过第二个if就将b和c中的最大值给了b，所以进行第三次if，将大的放在a 运行完第三个if可以保证a > b > c.
// return oBox.innerHTML=c + '<' + b+ '<' + a;
oCompare.onclick = function()
{
count();
}
}
</script>
</head>
<body>
<label>第一个值：<input type="text" id="num1"/></label>
<label>第二个值：<input type="text" id="num2"/></label>
<label>第三个值：<input type="text" id="num3"/></label>
<label>比较大小：<input type="button" id="compare" value="比较大小" /></label>
<div id="box"></div>
</body>
</html>
效果图 ↓
