Question

我正在尝试使用一些简单的JavaScript代码来获取加载随机图像的页面。我只是想按照家庭作业的指示进行操作，当我打开网络浏览器时，我的图像没有显示。任何帮助都会很棒。这是我的代码

<?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>
<!-- 
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 10
   Review Assignment

   Monroe Public Library
   Author: Collin Klopstein
   Date: November 13, 2013   

   Filename:         mpl2.htm
   Supporting files: mpl2.jpg, mplstyles.css, random.js, 0.jpg - 9.jpg
-->

   <title>Monroe Public Library</title>
   <link href="mplstyles.css" rel="stylesheet" type="text/css" />

   <script type="text/javascript">
        function showImg() {
            /*
                the showImg() function displays a random image from the 0.jpg through 9.jpg files.
                The random image is designed to thwart hackers attempting to enter the library records database by requiring visual confirmation.
            */

            var imgNumber = randomInteger(9);//return a random number from 0 to 9
            document.write("<img src='imgNumber.jpg' alt='' />");
        }

        function randomInteger(size) {
            return Math.floor((size+1)*Math.random());
        }
   </script>
</head>

<body>
<div id="pageContent">
   <div id="head">
      <img src="mpl.jpg" alt="Monroe Public Library" />
   </div>

   <div id="links">
      <span>Quick Links</span>
      <a href="#">Home Page</a>
      <a href="#">Online Catalog</a>
      <a href="#">Friends of MPL</a>
      <a href="#">New Books and Other Good Reading</a>
      <a href="#">Ohio Virtual Library</a>
      <a href="#">Internet Public Library</a>
      <a href="#">Services and Collection</a>
      <a href="#">Adult Programs</a>
      <a href="#">Teen Central</a>
      <a href="#">Children's Room</a>
      <a href="#">Computers at MPL</a>
      <a href="#">Computer Rules and Procedures</a>
      <a href="#">Staff Directory</a>
      <a href="#">Library Records</a>
   </div>

   <div id="main">
      <h2>Library Records</h2>
      <p>To view the library records, enter your username and password.</p>

      <table border="1" cellpadding="5" cellspacing="0">
         <tr>
            <th>Username</th>
            <td><input size="20" /></td>
         </tr>
         <tr>   
            <th>Password</th>
            <td><input type="password" size="20" /></td>
         </tr>
         <tr>
            <td>As a final security check, enter the 5 numbers 
                you see displayed below.</td>
            <td><input size="6" /></td>
         </tr>
         <tr>
            <td colspan="2" class="center">
            <input type="button" value="View Library Records" />
            </td>
         </tr>
         <tr>
            <td colspan="2" class="center">
                <script type="text/javascript">
                    showImg();
                    showImg();
                    showImg();
                    showImg();
                    showImg();
                </script>
            </td>
         </tr>
      </table>
   </div>

   <address>
      <b>Monroe Public Library</b>
      580 Main Street, Monroe, OH &nbsp;&nbsp;45050
      <b>Phone</b>(513) 555-0211  
      <b>Fax</b>(513) 555-0241
   </address>

</div>       

</body>
</html>

Answer 1

您必须在图片元素中使用javascript变量：

document.write("<img src='"+imgNumber+".jpg' alt='' />");

现在，您的来源中将包含随机数。

Answer 2

应该是：

document.write("<img src='"+imgNumber+"'.jpg' alt='' />");

Answer 3

您无法在JS中执行以下操作

var imgNumber = randomInteger(9);//return a random number from 0 to 9
document.write("<img src='imgNumber.jpg' alt='' />");

当你把它只是一个字符串

时，imgNumber不是一个变量

你要做的就是把它拆开

即。

document.write("<img src='" + imgNumber + ".jpg' alt='' />");

为什么我的随机图像不会在浏览器中显示？

3 个答案: