0

我试图让一个页面使用一些简单的 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>
4

3 回答 3

1

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

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

现在您将在源中获得随机数。

于 2013-11-14T04:37:39.303 回答
0

它应该是 ：

document.write("<img src='"+imgNumber+"'.jpg' alt='' />");
于 2013-11-14T04:39:02.030 回答
0

您不能在 JS 中执行以下操作

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

当您将 imgNumber 放在引号中时，它不是一个变量，它只是一个字符串

你所要做的就是把它分开

IE

document.write("<img src='" + imgNumber + ".jpg' alt='' />");
于 2013-11-14T04:39:13.417 回答