JavaScript--获取用户输入的值进行比较--小案例

最新推荐文章于 2022-06-12 22:03:13 发布

Maple-Ning

最新推荐文章于 2022-06-12 22:03:13 发布

阅读量789

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_57443373/article/details/119764473

版权

这是一个很简单的JS小例子，主要使用getElementById获取Input中输入的值，再将这三个值来进行比较，输出结果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>判断</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .container{
    width: 400px;
    height: 400px;
    margin: 100px auto;
  }
  .container input{
    display: block;
    width: 300px;
    height: 30px;
    margin: 30px auto;
  }
</style>
<script>
  // 比较函数
  function test(a,b,c){
    var n=0;
    if(a>b){
      n=a;
      a=b;
      b=n;
    }
    if(a>c){
      n=a;
      a=c;
      c=n;
    }
    if(b>c){
      n=b;
      a=c;
      c=n;
    }
    alert("这三个数的顺序为"+a+"<"+b+"<"+c)
  }
  // 点击函数--获取输入内容
  function start(){
    var x=document.getElementById("a").value;
    var y=document.getElementById("b").value;
    var z=document.getElementById("c").value;
    test(x,y,z)
  }
</script>
<body>
  <div class="container">
    <form action="">
      <input type="text" name="a" id="a" placeholder="a">
      <input type="text" name="b" id="b" placeholder="b">
      <input type="text" name="c" id="c" placeholder="c">
      <input type="button" value="计算" onclick="start()">
    </form>
  </div>
</body>
</html>