调用API Fetch使用 | 土味情话_土味情话api接口-CSDN博客

本文链接：https://blog.csdn.net/dddd46464646/article/details/131004841

效果：

代码：

<!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>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
        <div class="container">
            <h3>DONT LAUHT CHALLENGE</h3>
                <div id="joke" class="joke">土味情话</div>
                <button id="jokeBtn" class="btn"> Get </button>
        </div>
        
        <script src="index.js" ></script>
</body>
</html>

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    background-color: #686de0;
    font-family: sans-serif;
    display: flex;
    height: 100vh;
    /* 垂直浮动 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(208, 196, 196, 0.1),0px 6px 6px rgba(0, 0, 0, 0.1);
    padding: 50px 20px;
    text-align: center;
    width: 800px;
    /* 如果不足800px 会使用100% */
    max-width: 100%;

}   

h3{
    opacity: 0.5;
    letter-spacing: 2px;

}

.joke{
    font-size: 30px;
    letter-spacing: 1px;
    line-height: 40px;
    margin: 50px auto;
    /* background-color: pink; */
    width: 600px;
    max-width: 80%;

}

.btn{
    background-color: #b244e9;
    color: white;
    border: 0;
    border-radius: 10px;
    padding: 14px 40px;
    /* 鼠标放上去会变成小手状态 */
    cursor: pointer;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1),0px 6px 6px rgba(0, 0, 0, 0.1);
}

.btn:active{
    background-color: #8f65a8;
    transform: scale(0.98);
}


.btn:hover{
    cursor: pointer;
    animation: jelly 0.5s;
}

@keyframes jelly {

    0%,
    100% {
        transform: scale(1, 1);
    }

    33% {
        transform: scale(0.9, 1.1);
    }

    66% {
        transform: scale(1.1, 0.9);
    }
}

@keyframes jelly {

    0%,
    100% {
        transform: scale(1, 1);
    }

    25%,
    75% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

}

const jokeEl = document.getElementById('joke');
const jokeBtn = document.getElementById('jokeBtn');


// 当按钮被点击时调用此函数
async function getJoke() {
  // const apiKey = '4672b3bbee5dbb8810e353f0921d6d4c';
  const apiUrl = `https://api.uomg.com/api/rand.qinghua`;

  try {
    // 使用Fetch API发送GET请求
    const response = await fetch(apiUrl);
    console.log("response=>",response);
    if(!response.ok)  throw new Error('请求失败了');
    const data = await response.json();
    console.log("data=>",data);


    // 将获取的数据显示在文本中
    // console.log(data);
    // console.log(data.result.content);
    jokeEl.innerHTML = data.content;
  } catch (error) {
    // 处理任何错误
    console.error(error);
  }
  jokeBtn.innerHTML = "Get Moretime"
}

// 当按钮被点击时调用getJoke函数
jokeBtn.addEventListener('click', getJoke);