上市电影+他们的海报

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

"for" loops

createElement()

appendChild()

insertRow()

insertCell()

innerHTML

Template Literals

详情在演示中评论

演示

/* 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,我如何以编程方式获取其海报图像?

电影口碑与海报图像的相关性分析

用JAVA生成老电影海报

刷爆外网!中国天才设计师火到日本,30 张神仙海报看完真的服!

解决方案电影标题中缺少代码的片段,完成挑战更多[关闭]

我心中的前三佳作品