这些是我用来从API接收数据的代码，但我想添加一个功能，但我不知道如何添加。
我想在从API 获取数据之前添加一个加载动画
有人知道我该怎么做吗？
我尝试了很多方法，但都没有成功。
//variables from html
var city = document.querySelector('#city')
var myCity = document.querySelector('#myCity')
var temp = document.querySelector('#temp')
var desc = document.querySelector('#desc')
var box = document.querySelector('.tempBox')
console.log(city)
var myVar;
//this is the api key
var myId = '006eee17b0b83d4de4dfca972d666b87'
function getCityTemp(){
var a = city.value
getData(a)
}
//function to get the name of the city and the weather
function getData(newCity){
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${newCity}&appid=${myId}`)
.then(function(res){
return res.json()
})
//the function used to receive specific data
.then(function(data){
myCity.textContent = data.name
temp.textContent = data.main.temp
weather.textContent = data.weather[0].description
wind.textContent = data.wind.speed
sunrise.textContent = data.sys.sunrise
box.style.display = 'block'
})
.catch(function(err){
console.log(err)
})}.container{
border: none;
display: flex;
justify-content: center;
flex-direction: column;
height: 5px;
margin: 3rem 10rem;
}
.cityName{
display: flex;
justify-content: center;
margin-top: 10px;
background-color: aqua;
padding: 7px;
border-radius: 20px;
margin-left: 38rem;
margin-right: 38rem;
}
.input1{
border: none;
border-radius: 5px;
padding: 7px;
margin-top: 1em;
margin-left: 25rem;
margin-right: 25rem;
margin-bottom: 1rem;
}
.button1{
margin-bottom: 10px;
margin-right: 27rem;
margin-left: 27rem;
color: azure;
background-color: indigo;
border: none;
padding: 10px;
border-radius: 5px;
transition: 0.5s;
}
.button1:hover{
color: aqua;
background-color: black;
transition: 0.5s;
}
.tempBox{
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
background-color : greenyellow;
margin-top: 5em;
padding-top: 1em;
padding-bottom: 1em;
margin-left: 30rem;
margin-right: 30rem;
display: none;
}
body{
background-color: #7267CB;
}
img{
border-radius: 40px;
margin-left: 46%;
width: 100px;
}
p {
margin-left: 7em;
}
.CityName {
margin-left: -10px;
border-radius: 20px;
padding: 5px;
color: black;
background-color: #E2C2B9;
}
#myCity {
margin-left: 20px;
border-radius: 20px;
padding: 5px;
background-color: #DD4A48;
}
.Temp{
margin-left: -10px;
border-radius: 20px;
padding: 5px;
color: black;
background-color: #E2C2B9;
}
#temp{
margin-left: 20px;
border-radius: 20px;
padding: 5px;
background-color: #DD4A48;
}
.Weather1{
margin-left: -10px;
border-radius: 20px;
padding: 5px;
color: black;
background-color: #E2C2B9;
}
#weather {
margin-left: 20px;
border-radius: 20px;
padding: 5px;
background-color: #DD4A48;
}
.Wind {
margin-left: -10px;
border-radius: 20px;
padding: 5px;
color: black;
background-color: #E2C2B9;
}
#wind {
margin-left: 20px;
border-radius: 20px;
padding: 5px;
background-color: #DD4A48;
}
.Sunrise {
margin-left: -10px;
border-radius: 20px;
padding: 5px;
color: black;
background-color: #E2C2B9;
}
#sunrise {
margin-left: 20px;
border-radius: 20px;
padding: 5px;
background-color: #DD4A48;
}
html {
height: 100%;
}
body {
background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="weather.css">
</head>
<body>
<img src="https://www.vmcdn.ca/f/files/via/images/weather/rain-umbrella-vancouver-weather.jpg;w=960" alt="weatherImage">
<label class="cityName" for="city">City Name:</label>
<div class="container">
<input class="input1" type="text" id="city"/>
<button class="button1" type="button" onclick="getCityTemp()">Result</button>
<div id="loading"></div>
</div>
<div class="tempBox">
<p><span class="CityName">City Name : </span><span id="myCity"></span></p>
<p><span class="Temp">Temp : </span><span id="temp"></span></p>
<p><span class="Weather1">Weather : </span><span id="weather"></span></p>
<p><span class="Wind">Wind : </span><span id="wind"></span></p>
<p><span class="Sunrise">Sunrise : </span><span id="sunrise"></span></p>
</div>
<script src="weather.js"></script>
</body>
</html>还有：这是输出
为show和hide loader创建一个函数displayLoading和hideLoading并设置超时，然后在调用api时调用displayLoadings，在得到响应后调用hideLoadings
var city = document.querySelector('#city')
var myCity = document.querySelector('#myCity')
var temp = document.querySelector('#temp')
var desc = document.querySelector('#desc')
var box = document.querySelector('.tempBox')
console.log(city)
var myVar;
//this is the api key
var myId = '006eee17b0b83d4de4dfca972d666b87'
function getCityTemp(){
var a = city.value
getData(a)
}
const loader = document.querySelector("#loading");
// showing loading
function displayLoading() {
loader.classList.add("display");
// to stop loading after some time
setTimeout(() => {
loader.classList.remove("display");
}, 3000);
}
// hide loading
function hideLoading() {
loader.classList.remove("display");
}
//call here
function getData(newCity){
displayLoading()
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${newCity}&appid=${myId}`)
.then(res => res.json())
}
.then(json => {
hideLoading()
}
)
/* creating css loader */
#loading {
width: 2rem;
height: 2rem;
border: 5px solid #f3f3f3;
border-top: 6px solid #9c41f2;
border-radius: 100%;
margin: auto;
visibility: hidden;
animation: spin 1s infinite linear;
}
#loading.display {
visibility: visible;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}