JavaScript重写HTML
因此，我在解决问题方面取得了一些进展，但遇到了一些意想不到/令人困惑的问题。我已经能够将我的脚本添加到我的网页中，但是，这两个脚本不能一起工作。如果没有脚本，页面将按我所希望的方式显示。使用脚本，脚本将运行并覆盖网页。屏幕左上角会显示一张随机图片，但html文件中没有显示任何内容。我已经包括了我所有的代码（html、javascript、css），如果有人能提供一些指导，我将不胜感激JavaScript重写HTML,javascript,html,Javascript,Html,因此，我在解决问题方面取得了一些进展，但遇到了一些意想不到/令人困惑的问题。我已经能够将我的脚本添加到我的网页中，但是，这两个脚本不能一起工作。如果没有脚本，页面将按我所希望的方式显示。使用脚本，脚本将运行并覆盖网页。屏幕左上角会显示一张随机图片，但html文件中没有显示任何内容。我已经包括了我所有的代码（html、javascript、css），如果有人能提供一些指导，我将不胜感激 <!DOCTYPE html> <html lang="en"> <head&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
<title>Monroe Public Library</title>
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
<ul class = "nav">
<span>Quick Links</span>
<li><a href="#">Home Page</a></li>
<li><a href="#">Online Catalog</a></li>
<li><a href="#">Friends of MPL</a></li>
<li><a href="#">New Books and Other Good Reading</a></li>
<li><a href="#">Ohio Virtual Library</a></li>
<li><a href="#">Internet Public Library</a></li>
<li><a href="#">Services and Collection</a></li>
<li><a href="#">Adult Programs</a></li>
<li><a href="#">Teen Central</a></li>
<li><a href="#">Children's Room</a></li>
<li><a href="#">Computers at MPL</a></li>
<li><a href="#">Computer Rules and Procedures</a></li>
<li><a href="#">Staff Directory</a></li>
<li><a href="#">Library Records</a></li>
</ul>
</div>
<div id="main">
<h2>Library Records</h2>
<p>To view the library records, enter your username and password.</p>
<form id="login" method="post" action="">
<p>
<label for="username" class="center" id="input"> Username:</label>
<input type="text" id="username" name="username" size="20" />
</p>
<p>
<label for="password" class="center" id="input"> Password:</label>
<input type="password" id="password" name="password" size="20" />
</p>
<p>
<label for="captcha" id="input">As a final security check, enter the 5 numbers you see displayed below.</label>
<input type="text" id="captcha" name="captcha" size="6" />
</p>
<p id="login"> </p>
<p id="login">
</p>
<script src="mpl.js"></script>
<p align="center"><img src="" alt="" name="number1" width="70" height="100" id="number1"><img src="" alt="" name="number2" width="70" height="100" id="number2"><img src="" alt="" name="number3" width="70" height="100" id="number3"><img src="" alt="" name="number4" width="70" height="100" id="number4"><img src="" alt="" name="number5" width="70" height="100" id="number5"></p>
<div id="images">
</div>
<p align="center">
<input type="submit" value="View Library Records" />
</p>
</form>
</div>
<div id="address">
<span class="addressBold">Monroe Public Library</span>
580 Main Street, Monroe, OH 45050
<span class="addressBold">Phone</span>(513) 555-0211
<span class="addressBold">Fax</span>(513) 555-0241
</div>
</div>
</body>
</html>
window.onload = function ()
{
//http://www.java-scripts.net/javascripts/Random-Image-Script.phtml
var pictureNumbers=new Array()
//specify random images below. You can have as many as you wish
pictureNumbers[1]="0.jpg"
pictureNumbers[2]="1.jpg"
pictureNumbers[3]="2.jpg"
pictureNumbers[4]="3.jpg"
pictureNumbers[5]="4.jpg"
pictureNumbers[6]="5.jpg"
pictureNumbers[7]="6.jpg"
pictureNumbers[8]="7.jpg"
pictureNumbers[9]="8.jpg"
pictureNumbers[10]="9.jpg"
var randomNumber = Math.floor(Math.random()*pictureNumbers.length)
if (randomNumber==0)
{
randomNumber=1
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==1)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==2)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==3)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==4)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==5)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==6)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==7)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==8)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==9)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==10)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
}
@charset "UTF-8";
/* CSS Document */
body
{
margin-top:0;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#FFC;
}
#head
{
background-color:orange;
}
#page
{
width: auto;
margin" 0 auto;
background-color: white;
border-top: none;
}
#links
{
position:absolute;
width:10em;
border: 1px solid blue;
top: 72px;
background-color: white;
}
#main
{
margin-left: 12em;
}
#login
{
padding-top: 1em;
padding-left: 2em;
padding-bottom: 5em;
border: 1px solid blue;
}
#address
{
padding-top: 2em;
padding-left: 2em;
border-top: 1px solid blue;
}
#pageContent #main h2 {
color: #00F;
}
#input
{
background-color: orange;
padding-right: 20%;
}
门罗公共图书馆
快速链接
图书馆记录
要查看库记录，请输入用户名和密码
用户名：
密码：
作为最后的安全检查，输入下面显示的5个数字。
门罗公共图书馆
俄亥俄州门罗市大街580号，邮编45050
电话（513）555-0211
传真（513）555-0241
window.onload=函数（）
{
//http://www.java-scripts.net/javascripts/Random-Image-Script.phtml
var pictureNumbers=新数组（）
//指定下面的随机图像。您可以拥有任意数量的图像
pictureNumbers[1]=“0.jpg”
pictureNumbers[2]=“1.jpg”
pictureNumbers[3]=“2.jpg”
pictureNumbers[4]=“3.jpg”
pictureNumbers[5]=“4.jpg”
pictureNumbers[6]=“5.jpg”
pictureNumbers[7]=“6.jpg”
pictureNumbers[8]=“7.jpg”
pictureNumbers[9]=“8.jpg”
pictureNumbers[10]=“9.jpg”
var randomNumber=Math.floor（Math.random（）*pictureNumbers.length）
如果（随机数==0）
{
随机数=1
文件。写入（“”）
}
else if（randomNumber==1）
{
文件。写入（“”）
}
else if（randomNumber==2）
{
文件。写入（“”）
}
否则如果（随机数==3）
{
文件。写入（“”）
}
否则如果（随机数==4）
{
文件。写入（“”）
}
否则如果（随机数==5）
{
文件。写入（“”）
}
否则如果（随机数==6）
{
文件。写入（“”）
}
否则如果（随机数==7）
{
文件。写入（“”）
}
否则如果（随机数==8）
{
文件。写入（“”）
}
否则如果（随机数==9）
{
文件。写入（“”）
}
否则如果（随机数==10）
{
文件。写入（“”）
}
}
@字符集“UTF-8”；
/*CSS文档*/
身体
{
边际上限：0；
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
背景色：#FFC；
}
#头
{
背景颜色：橙色；
}
#页面
{
宽度：自动；
保证金“0自动；
背景色：白色；
边界顶部：无；
}
#链接
{
位置：绝对位置；
宽度：10em；
边框：1px纯蓝色；
顶部：72px；
背景色：白色；
}
#主要
{
左侧边缘：12 em；
}
#登录
{
垫面：1米；
左：2米；
垫底：5em；
边框：1px纯蓝色；
}
#地址
{
垫面：2米；
左：2米；
边框顶部：1px纯蓝色；
}
#页面内容#主h2{
颜色：#00F；
}
#输入
{
背景颜色：橙色；
右：20%；
}
var pictureNumbers=[]，
pictureCount=10
对于（var i=1；i来说，要扩展@Gary对原始帖子的评论：
对document.write（…）
的调用是导致您出现问题的原因。触发“onload”事件后，浏览器将关闭文档进行写入。随后对document.write的任何调用都将覆盖整个页面
要解决此问题，您需要执行以下两项操作之一：
调用文档。在窗口外写入。onload事件
按照他的回答中提到的@MBottens做，在DIV标记中添加新的
元素
为什么你有很多条件分支，它们都做同样的事情？我猜你只是把所有的代码都粘贴在那里，而你的代码实际上并不是这样。不要使用文档。写。问题是什么，你能详细说明一下吗？你说的“HTML文件中没有任何内容出现”是什么意思"？如果您在浏览器的调试器中单步执行代码，在什么情况下它的行为会与您预期的不同？非常抱歉，但我并不真正理解您的代码。我知道您向我提供了一些应该很明显的内容，但我对这一点不熟悉，我根本不理解。您能否解释一下这些内容代码？？？如果你有d
var parent = document.getElementById("parent"),
img = document.createElement("img")
img.setAttribute("src","your-file-name.jpg")
parent.appendChild(img)
<div id="picture-frame"></div>
var pictureNumbers = [],
pictureCount = 10
for ( var i = 1; i <= pictureCount; i++ )
pictureNumbers[i] = i + ".jpg"
var randomNumber = Math.ceil(Math.random()*(pictureNumbers.length - 1)),
element = document.getElementById("picture-frame"),
image = document.createElement("img")
image.setAttribute("src", pictureNumbers[randomNumber])
element.appendChild(image)