$(function() 写一个接口请求

很抱歉，我并不清楚你所说的 "$(function()" 是什么意思。不过，如果您想要一个接口请求的示例，可以参考以下代码：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

这是一个基于 JavaScript 的 Fetch API 的示例，它会向 https://api.example.com/data 发送一个 GET 请求，并将响应数据解析为 JSON 格式。如果请求成功，会将数据打印到控制台上；如果请求失败，会将错误信息打印到控制台上。

相关问题

写一个接口请求动画

好的，以下是一个简单的接口请求动画的实现：

HTML：

<div id="animation">
  <div class="loading"></div>
  <div class="loading"></div>
  <div class="loading"></div>
  <div class="loading"></div>
  <div class="loading"></div>
</div>

CSS：

#animation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loading {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 50%;
  background-color: #ccc;
  animation: loading 0.8s ease-in-out infinite;
}

@keyframes loading {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

JS：

const animation = document.getElementById('animation');

// 显示动画
function showLoading() {
  animation.style.display = 'flex';
}

// 隐藏动画
function hideLoading() {
  animation.style.display = 'none';
}

// 发送请求时显示动画
showLoading();

// 请求完成时隐藏动画
axios.get('/api/data').then((response) => {
  hideLoading();
  // 处理数据
}).catch((error) => {
  hideLoading();
  // 处理错误
});

以上代码使用了 CSS 动画和 JavaScript 控制元素显示/隐藏的方法，实现了一个简单的接口请求动画效果。当发送请求时，显示动画，请求完成时隐藏动画。

写一个接口请求小人动画

好的，以下是一个简单的接口请求小人动画的实现：

HTML：

<div id="animation">
  <div class="loader">
    <div class="loader-inner"></div>
    <div class="loader-inner"></div>
    <div class="loader-inner"></div>
  </div>
  <div class="person">
    <div class="person-head"></div>
    <div class="person-body"></div>
    <div class="person-legs"></div>
  </div>
</div>

CSS：

#animation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loader {
  margin-right: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-inner {
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background-color: #ccc;
  border-radius: 50%;
  animation: loader-rotate 1s ease-in-out infinite;
}

@keyframes loader-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.person {
  position: relative;
  width: 50px;
  height: 100px;
}

.person-head {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
}

.person-body {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 10px;
  height: 30px;
  background-color: #333;
}

.person-legs {
  position: absolute;
  top: 60px;
  left: 15px;
  width: 20px;
  height: 30px;
}

.person-legs::before,
.person-legs::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 15px;
  background-color: #333;
}

.person-legs::before {
  left: 0;
  transform: rotate(30deg);
  transform-origin: bottom left;
}

.person-legs::after {
  right: 0;
  transform: rotate(-30deg);
  transform-origin: bottom right;
}

.loading {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 50%;
  background-color: #ccc;
  animation: loading 0.8s ease-in-out infinite;
}

@keyframes loading {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

JS：

const animation = document.getElementById('animation');

// 显示动画
function showLoading() {
  animation.style.display = 'flex';
}

// 隐藏动画
function hideLoading() {
  animation.style.display = 'none';
}

// 发送请求时显示动画
showLoading();

// 请求完成时隐藏动画
axios.get('/api/data').then((response) => {
  hideLoading();
  // 处理数据
}).catch((error) => {
  hideLoading();
  // 处理错误
});

以上代码使用了 CSS 动画和 JavaScript 控制元素显示/隐藏的方法，实现了一个简单的接口请求小人动画效果。当发送请求时，显示小人在原地踏步，请求完成时小人停止踏步。