其他
【每日一练】67—通过获取电影资源API来实现一个电影网站页面
写在前面
另外，如果你还想了解更多的影视资源网站的话，我已经把它整理在了我们的【博客网站】里的【影视资源导航】里了。
影视导航资源地址：http://www.webqdkf.com/webdh/videodh.html
有兴趣的伙伴可以去了解一些，有的影视资源网站打开的话，需要自备梯子，所有影视资源网站里的各类广告，请大家不要随意点击参与，如果造成钱财人才损失，后果自负。
影视网站资源，我们大家在上面就看看免费的电影电视剧就好了。
接下来，我们再来看一下今天练习的详细源码。
HTML代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>【每日一练】67—通过API来实现一个电影网站页面</title> </head> <body> <header> <form id="form"> <input type="text" id="search" class="search" placeholder="Search"> </form> </header> <main id="main"></main> </body></html>
:root { --primary-color: #22254b; --secondary-color: #373b69;}
* { box-sizing: border-box;}
body { background-color: var(--primary-color); font-family: 'Poppins', sans-serif; margin: 0;}
header { padding: 1rem; display: flex; justify-content: flex-end; background-color: var(--secondary-color);}
.search { background-color: transparent; border: 2px solid var(--primary-color); border-radius: 50px; font-family: inherit; font-size: 1rem; padding: 0.5rem 1rem; color: #fff;}
.search::placeholder { color: #7378c5;}
.search:focus { outline: none; background-color: var(--primary-color);}
main { display: flex; flex-wrap: wrap; justify-content: center;}
.movie { width: 300px; margin: 1rem; background-color: var(--secondary-color); box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; border-radius: 3px;}
.movie img { width: 100%;}
.movie-info { color: #eee; display: flex; align-items: center; justify-content: space-between; gap:0.2rem; padding: 0.5rem 1rem 1rem; letter-spacing: 0.5px;}
.movie-info h3 { margin-top: 0;}
.movie-info span { background-color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: 3px; font-weight: bold;}
.movie-info span.green { color: lightgreen;}
.movie-info span.orange { color: orange;}
.movie-info span.red { color: red;}
.overview { background-color: #fff; padding: 2rem; position: absolute; left: 0; bottom: 0; right: 0; max-height: 100%; transform: translateY(101%); overflow-y: auto; transition: transform 0.3s ease-in;}
.movie:hover .overview { transform: translateY(0);}const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="'
const main = document.getElementById('main')const form = document.getElementById('form')const search = document.getElementById('search')
// 获取初始电影地址getMovies(API_URL)
async function getMovies(url) { const res = await fetch(url) const data = await res.json()
showMovies(data.results)}
function showMovies(movies) { main.innerHTML = ''
movies.forEach((movie) => { const { title, poster_path, vote_average, overview } = movie
const movieEl = document.createElement('div') movieEl.classList.add('movie')
movieEl.innerHTML = ` <img src="${IMG_PATH + poster_path}" alt="${title}"> <div class="movie-info"> <h3>${title}</h3> <span class="${getClassByRate(vote_average)}">${vote_average}</span> </div> <div class="overview"> <h3>Overview</h3> ${overview} </div> ` main.appendChild(movieEl) })}
function getClassByRate(vote) { if(vote >= 8) { return 'green' } else if(vote >= 5) { return 'orange' } else { return 'red' }}
form.addEventListener('submit', (e) => { e.preventDefault()
const searchTerm = search.value
if(searchTerm && searchTerm !== '') { getMovies(SEARCH_API + searchTerm)
search.value = '' } else { window.location.reload() }})写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号