如何使用html元素在javascript中动态创建卡片？
这是一个HTML，CSS，JavaScript电影预告片项目。 我想创建每部电影的卡片，其中显示每部电影的信息
我想用网格格式显示电影卡，就像在html CSS中一样。
那么如何在JavaScript中创建并显示网格格式的卡片
请通过我的HTML，CSS，JavaScript代码，键入任何电影，并请运行我的代码在您的设备上准确的输出
如能提供帮助，将不胜感激。
//APIS
const API_KEY='d0bb61e85a438ea9d517dce9f15693aa';
const URL='https://api.themoviedb.org/3/search/movie?api_key=d0bb61e85a438ea9d517dce9f15693aa&query=furious'
const IMAGE_URL = 'https://image.tmdb.org/t/p/w500'
.header-fixed {
background-color:#292c2f;
box-shadow:0 1px 1px #ccc;
padding: 20px 40px;
height: 80px;
color: #ffffff;
box-sizing: border-box;
top:-100px;
-webkit-transition:top 0.3s;
transition:top 0.3s;
}
.header-fixed .header-limiter {
max-width: 1200px;
text-align: center;
margin: 0 auto;
display: grid;
}
/* The header placeholder. It is displayed when the header is fixed to the top of the
browser window, in order to prevent the content of the page from jumping up. */
.header-fixed-placeholder{
height: 80px;
display: none;
}
/* Logo */
.header-fixed .header-limiter h1 {
float: left;
font: normal 28px Cookie, Arial, Helvetica, sans-serif;
line-height: 40px;
margin: 0;
}
.header-fixed .header-limiter h1 span {
color: #5383d3;
}
/* The navigation links */
.header-fixed .header-limiter a {
color: #ffffff;
text-decoration: none;
}
.header-fixed .header-limiter nav {
font:16px Arial, Helvetica, sans-serif;
line-height: 40px;
float: right;
}
.header-fixed .header-limiter nav a{
display: inline-block;
padding: 0 5px;
text-decoration:none;
color: #ffffff;
opacity: 0.9;
}
.header-fixed .header-limiter nav a:hover{
opacity: 1;
}
.header-fixed .header-limiter nav a.selected {
color: #608bd2;
pointer-events: none;
opacity: 1;
}
/* Fixed version of the header */
body.fixed .header-fixed {
padding: 10px 40px;
height: 50px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
body.fixed .header-fixed-placeholder {
display: block;
}
body.fixed .header-fixed .header-limiter h1 {
font-size: 24px;
line-height: 30px;
}
body.fixed .header-fixed .header-limiter nav {
line-height: 28px;
font-size: 13px;
}
/* Form */
.form-group{
display: grid;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
height: 30px;
}
#search{
color: #ffffff;
background-color: #5383d3;
min-height: 38px;
font-weight: 400;
text-align: center;
cursor: pointer;
font-size: 1rem;
line-height: 1.5;
padding: 0 auto;
border-radius: 25px;
}
.submit_se{
display: flex;
justify-content: center;
align-items: center;
height:30px;
}
#inputValue{
border-radius: 25px;
border: 2px solid gray;
text-align: center;
}
input[type="text"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: center;
}
<!DOCTYPE html>
<!--my javascript is in my html-->
<!--my javascript include the APIs-->
<!--YOU CAN TRY MY CODE FOR BETTER OUTPUT-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie app</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header class="header-fixed">
<div class="header-limiter">
<h1 class="title" >MOVIE TRAILERS</h1>
</div>
</header>
<div class="container">
<form>
<div class="form-group">
<input type="text" id="inputValue" placeholder="search the trailer">
</div>
<div class="submit_se">
<button type="submit" id="search">Search the movie trailer</button>
</div>
</form>
</div>
<div id="movies-searchable">
</div>
<!--JAVASCRIPT-->
<script>
//Selecting elements from DOM
const buttonElement=document.querySelector('#search');
const inputElement=document.querySelector('#inputValue');
const movieSearchable=document.querySelector('#movies-searchable');
buttonElement.onclick = function(event){
event.preventDefault();
const value = inputElement.value;
const newURL =URL +'&query=' + value;
fetch(newURL)
.then((res ) => res.json())
.then((data) => {
console.log('Data:',data);
const movies = data.results;
const movieBlock = replicateMovieCards(movies);
movieSearchable.appendChild(movieBlock);
})
.catch((error)=> {
console.log("error",error);
})
console.log(value);
}
function movieSection(movies){
return movies.filter((movie) => movie.poster_path !== null).map((movie) =>{
return `
<img src =${IMAGE_URL + movie.poster_path} data-movie-id=${movie.id}/>
<h4 class= "title"><b>Name ${movie.title}</b></h4>
<p class = "des">Synopsis ${movie.overview}</p>
`
;
})
}
function replicateMovieCards(movies){
const movieElement = document.createElement('div');
movieElement.setAttribute('class','card');
const movieTemplate =
` <section class="section">
<div class="container">
</div>
${movieSection(movies)}
</section>
` ;
movieElement.innerHTML= movieTemplate;
return movieElement;
}
</script>
</body>
</html>
```null
共有1个答案
您所需要的只是css-grid和一些填充。 我强烈建议您通读以下指南:
https://css-tricks.com/snippets/css/complete-guide-grid/
-
本文向大家介绍如何使用JavaScript和CSS创建可拖动的HTML元素？，包括了如何使用JavaScript和CSS创建可拖动的HTML元素？的使用技巧和注意事项，需要的朋友参考一下 要使用JavaScript和CSS创建可拖动的HTML元素，代码如下- 示例 输出结果 上面的代码将产生以下输出- 通过拖动来移动div时-
-
是否可以在HTML页面上用JavaScript保存动态添加的HTML元素？例如，当我创建一些HTML元素(,,...)使用JavaScript，然后将它添加到一个页面上，它就会以它应有的样子出现在页面上，但当我重新加载或离开页面，然后返回时--所有那些元素都消失了。所以，我如何做，使他们不会消失后，重新加载或离开页面（如果这是可能的）。
-
本文向大家介绍javascript元素动态创建实现方法，包括了javascript元素动态创建实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript元素动态创建实现方法。分享给大家供大家参考。具体分析如下： document.write只能在页面加载过程中才能动态创建 可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用
-
我试图从字符串数组中创建一个新对象，但无法正确创建所需的对象。 我正在尝试创建一个对象，比如： 这是我的代码： null null
-
问题内容： 我是一个新手。有人可以告诉我如何使用原始Javascript（而不是jQuery）删除HTML元素。 当我单击“提交”按钮时，会在很短的时间内消失然后立即出现。单击按钮时，我想完全删除该元素。 问题答案： 发生的情况是正在提交表单，因此页面（带有其原始内容）正在刷新。您正在通过“提交”按钮处理事件。 如果要删除元素 而不 提交表单，请改为处理表单上的事件，然后从处理程序中返回： HTM
-
问题内容： 该网站正在使用Prototype JS库。 页面加载后，它立即执行Ajax请求，该请求会拉出并显示页面的更多元素。 我需要能够选择那些动态创建的元素并使用method 隐藏它们。 我尝试使用选择和隐藏它们，但是这段代码没有“看到”动态元素。 我看到Prototype有方法，但是我不确定应该为我指定哪个Event？我尝试了事件“加载”，但没有成功。 我将不胜感激如何解决此问题的任何提示。
-
本文向大家介绍如何使用jQuery在动态创建的元素上绑定事件？，包括了如何使用jQuery在动态创建的元素上绑定事件？的使用技巧和注意事项，需要的朋友参考一下 要在动态创建的元素上绑定事件，您需要动态加载。您可以尝试运行以下代码，以了解如何在动态创建的元素上绑定事件。在这里，我们将在单击按钮时生成一个新的列表项。 示例
-
问题内容： 我正在尝试运行JMeter脚本，但登录失败。原因是，密码是使用RSA算法（即使用javascript）进行加密的。因此在录制时保存的密码将无法使用，并且由于使用JMeter不支持的javascript对其进行加密，因此无法获得加密密码的动态值。由于运行时使用javascript，因此我无法使用正则表达式查找响应数据，因为这不是响应的一部分。 我试图登录到Tableau报表服务器。 问题