编写一个函数，计算三个数字的大小，按从小到大的顺序打印。
效果图
HTML：
首先我们要先获得用户输入的三个数字，这里我们使用3个输入框来获取。再添加一个按钮和一个用来显示排序结果的span标签：
第一个数字：<input id="num1" type="number" placeholder="请输入第一个数字">
第二个数字：<input id="num2" type="number" placeholder="请输入第二个数字">
第三个数字：<input id="num3" type="number" placeholder="请输入第三个数字">
<button id="btn">比较大小</button><br>
大小顺序为：<span id="result"></span>
当点击按钮的时候我们要使用JS获取到三个输入框的值，并且将大小顺序显示在span内：
btn.onclick = function () {
result.innerText = compare(num1.value, num2.value, num3.value);
}
排序compare()：
在上边的代码中我们使用了compare()这个自定义函数，这是我们用来排序的函数。
首先我们整理一下思路：
- 3个数字按从小到大排序，我们先比较前两个数字，如果
num1大于num2那么我们交换一下它们的值，把值较小的排在前边：
var k = 0;
if (num1 > num2) {
k = num1;
num1 = num2;
num2 = k;
}
- 然后我们比较
num1和num3，如果num1>num3那么我们交换一下它们的值，这一步我们就保证了当前num1的值是最小的：
if (num1 > num3) {
k = num1;
num1 = num3;
num3 = k;
}
- 最后比较一下
num2和num3的值，如果num2>num3那么我们交换一下它们的值，这样我们就保证了num3的值是最小的：
if (num2 > num3) {
k = num2;
num2 = num3;
num3 = k;
}
经过这3步之后，我们通过交换值的方式将这三个值按从小到大的顺序排列了起来，下面我们解决当有相等的值的时候的情况。
首先我们判断一下num1和num2是否相等，然后再分别判断num2h和num3是否相等：
if(num1 !== num2){ //num1不等于num2
if(num2 !== num3){ //num1不等于num2 并且 num2不等于num3
return num1 + "<" + num2 + "<" + num3;
} else{ //num1不等于num2 并且 num2等于num3
return num1 + "<" + num2 + "=" + num3;
}
} else{ //num1等于num2
if(num2 !== num3){ //num1等于num2 并且 num2不等于num3
return num1 + "=" + num2 + "<" + num3;
} else{ //num1等于num2 并且 num2等于num3
return num1 + "=" + num2 + "=" + num3;
}
}
这样就可以解决有相等值的情况了：
效果图
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>编写一个函数，计算三个数字的大小，按从小到大的顺序打印。</h1>
第一个数字：<input id="num1" type="number" placeholder="请输入第一个数字">
第二个数字：<input id="num2" type="number" placeholder="请输入第二个数字">
第三个数字：<input id="num3" type="number" placeholder="请输入第三个数字">
<button id="btn">比较大小</button><br>
大小顺序为：<span id="result"></span>
<script>
btn.onclick = function () {
result.innerText = compare(num1.value, num2.value, num3.value);
console.log(compare(num1.value, num2.value, num3.value));
}
function compare(num1, num2, num3) {
num1 = Number(num1);
num2 = Number(num2);
num3 = Number(num3);
var k = 0;
if (num1 > num2) {
k = num1;
num1 = num2;
num2 = k;
}
if (num1 > num3) {
k = num1;
num1 = num3;
num3 = k;
}
if (num2 > num3) {
k = num2;
num2 = num3;
num3 = k;
}
if(num1 !== num2){
if(num2 !== num3){
return num1 + "<" + num2 + "<" + num3;
} else{
return num1 + "<" + num2 + "=" + num3;
}
} else{
if(num2 !== num3){
return num1 + "=" + num2 + "<" + num3;
} else{
return num1 + "=" + num2 + "=" + num3;
}
}
}
</script>
</body>
</html>
网友评论