使用ajax来实现用户在输入框内输入qq号码，点击或者按下回车键就会出来对应的吉凶和讲解（注意：需要借助www.showapi.com 注册一个账号，然后找到对应的QQ号测吉凶api，每天测试的次数是有一定限制的）

html和css部分

  <!-- 引入bootstrap，这里就不一一写样式了 -->
 <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
 <style>
    .container {
      margin-top: 30px;
    }

    #desc {
      height: 200px;
      background-color: #ccc;
    }

    .csjx {
      text-align: center;
      background-color: #2c3e50;
      color: #fff;
      height: 80px;
      line-height: 80px;
    }

    .form-control {
      width: 200px;
      display: inline-block;
    }
  </style>
  <div class="container">
    <div class="form-group">
      <label for="qq">QQ号码:</label>
      <input type="text" class="form-control" id="qq" placeholder="请输入扣扣号">
      <button type="submit" id="btn" class="btn btn-default">测</button>
    </div>
    <div>
      <h3>吉凶：<span id="luck"></span></h3>
      <h3>评分：<span id="score"></span></h3>
      <h3>命理：<span id="analysis"></span></h3>
      <div>
        <h3 class="csjx">测算解析</h3>
        <p id="desc"></p>
      </div>
    </div>

Js部分

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    //给按钮添加点击事件，点击按钮发起ajax请求。
    $("#btn").click(function () {
      $.ajax({
        type: 'post',
        url: 'http://route.showapi.com/863-1',
        dataType: 'json',
        data: {
          "showapi_appid": 'xxxxxx', //这里需要改成自己的appid
          "showapi_sign": '198ab52ebeee436d82089c59e50ad855', //这里需要改成自己的应用的密钥secret
          "qq": $("#qq").val().trim()
        },
        error: function () {
          alert("操作失败!");
        },
        success: function (result) {
          //查询成功，将返回的值显示在页面中，
          if (result.showapi_res_code == 0) {
            let {analysis,desc,grade,score} = result.showapi_res_body;
            $("#luck").html(grade);//凶吉
            $("#score").html(score);//评分
            $("#analysis").html(analysis);//命理
            $("#desc").html(desc);//详细解析
          } 
        }
      })
    });
    function formatterDateTime() {
        var date = new Date()
        var month = date.getMonth() + 1
        var datetime = date.getFullYear() +
          "" // "年"
          +
          (month >= 10 ? month : "0" + month) +
          "" // "月"
          +
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
          "" +
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
          "" +
          (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
          "" +
          (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
        return datetime;
      }
  </script>

效果如下