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

Why won't my random images display in browser?

本文关键字：显示 浏览器 我的 随机 图像 为什么      更新时间：2023-09-26

我正在尝试使用一些简单的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>

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

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

现在，您将在源中拥有随机数。

它应该是：

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

你不能在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='' />");
相关文章：