上市电影+他们的海报
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上市电影+他们的海报相关的知识，希望对你有一定的参考价值。
我正在制作一个示例网站，我必须使用javascript代码创建一个包含五个电影标题和海报的表格。我有点卡住了 - 我可以使用html创建一个表 - 但是如何在Javascript中创建一个表来显示电影呢？我还必须为每部电影添加海报，并使用表格和元素数组。
到目前为止，我有一个起始html页面（start.html），用户点击一个按钮。当他们点击“是”按钮时，它会跳转到应该显示Javascript表的movies.html。
的start.html
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<body>
<h1> Do You Like Action Movies?</h1>
<button id="yesButton" class="float-left submit-button" >Yes</button>
<script type="text/javascript">
document.getElementById("yesButton").onclick = function () {
location.href = "actionmovies.html";
};
</script>
</body>
</html>movies.html
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<body>
My 5 Favorite Action Movies
<table border ="5">
<tr>
<th>Rank</th><th>Name of the movie</th><th>Poster</th>
</tr>
<tr>
<td>1</td><td>Titanic</td><th><img src="titanic_poster.jpg" alt="Titanic" height="50" width="50" ></th>
</tr>
<tr>
<td>2</td><td>Jurassic Park</td><th><img src="park.jpg" alt="Park"height="15" width="15"></th>
</tr>
<tr>
<td>3</td><td>WestWorld</td><th><img src="park.jpg" alt="Park"height="15" width="15"></th>
</tr>
<tr>
<td>4</td><td>Alien</td><th><img src="park.jpg" alt="Park"height="15" width="15"></th>
</tr>
<tr>
<td>4</td><td>Terminator</td><th><img src="park.jpg" alt="Park"height="15" width="15"></th>
</tr>
</table>
</body>
</html>答案
我只是给你一个示例代码供你参考：
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="javascript">
var movieInfo=new Array();
movieInfo["Titanic"]="titanic_poster.jpg";
movieInfo["Jurassic Park"]="park.jpg";
function showMovieInfo()
{
var result=$("#result");
var table=document.createElement("table");
table.style.border="5";
result.empty();
result.html("My 5 Favorite Action Movies");
for (var key in movieInfo)
{
row=table.insertRow(table.rows.length);
cell=row.insertCell(row.cells.length);
cell.innerHTML=key;
img=document.createElement("img");
img.src=movieInfo[key];
cell=document.createElement("th");
cell.appendChild(img);
row.appendChild(cell);
}
result.append(table);
}
</script>
</head>
<body>
<h1> Do You Like Action Movies?</h1>
<button id="yesButton" class="float-left submit-button" onclick="showMovieInfo()">Yes</button>
<div id="result">
</div>
</body>
</html>
另一答案
以下演示将创建一个包含2行和5列的<table>。我知道你需要5行2列，但我故意这样做，所以你可以学习“for”循环是如何工作的。特别注意HTML，因为它是HTML5。 HTML的前3行是HTML4，我认为是XML。你应该知道很多事情，如果这是一个家庭作业，而你正在为这门课程付费，那就拿回你的钱了。
References
详情在演示中评论
演示
/* Array of movie titles
|| Each title is a string, all strings are wrapped in quotes or
|| backticks (ex. "string", 'string', or `string`)
|| Each string must be delimited by a comma
*/
var titles = ["Pulp Fiction", "300", "Matrix", "Fight Club", "Saving Private Ryan"];
/* Array of movie posters
|| Each poster is a string of a url of an image
*/
var posters = ['http://t2.gstatic.com/images?q=tbn:ANd9GcRz_2nKTNlxhVtzbh29kgL3m2ebLv3TlYyzrbyqBtEUxt6mBuZ-', 'http://t1.gstatic.com/images?q=tbn:ANd9GcTBzEJIRKwczo3BJhL94O9uTH-WptCG23FPKFX8KCNpbEyPuYWR', 'http://t0.gstatic.com/images?q=tbn:ANd9GcQq3pIz-aKgkmYX1dJ-EL-AlHSPcOO7wdqRIJ5gJy9qNinXpmle', 'http://t2.gstatic.com/images?q=tbn:ANd9GcRo6_dvAhH0Q-gebUiYJVsZLj3eZuLoDsUrhK_T0dGe9EcTgcPL', 'http://t2.gstatic.com/images?q=tbn:ANd9GcR0lDhR_dXAKTm9wysp3nWu6kP0V5skJBVbCNC_Q8urAWcr4iF_'];
// Create a <table> tag
var table = document.createElement('table');
// Add that <table> tag to the <body>
document.body.appendChild(table);
/* 2 "for" loops
|| 1st loop will insert a <tr> into <table> - 2 times
|| 2nd loop will insert a <td> into <tr> - 5 times for each <tr>
*/
/* Start i at 0; stop after the 2nd loop; increment i by 1
|| Before this loop goes on to the next loop...
*/
for (let i = 0; i < 2; i++) {
// Insert <tr> into <table>
var row = table.insertRow();
/* ...it must go and do 5 loops here
|| Start j at 0; stop after the 5th loop; increment j by 1
*/
for (let j = 0; j < titles.length; j++) {
// Insert a <td> into <tr>
var cell = row.insertCell();
/* if this is the 1st <tr> then add a title from the
|| titles array
|| This will be done 5 times once for each <td>
*/
if (i === 0) {
cell.innerHTML = titles[j];
/* Otherwise (This is the for the 2nd <tr>)
|| Parse a string (a special string called Template Literal)
|| into HTML and add a different url from the posters array
|| for the last 5 loops
*/
} else {
cell.innerHTML = `<img src="${posters[j]}" width="50">`;
}
}
}td {
text-align: center;
border: 1px solid #000;
width: 70px
}<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
<!--CSS can go here-->
</style>
</head>
<body>
<script>
<!--JavaScript can go here-->
</script>
</body>
</html>以上是关于上市电影+他们的海报的主要内容，如果未能解决你的问题，请参考以下文章
给定一个 IMDB 电影 ID，我如何以编程方式获取其海报图像？