我目前正在为学校开展一个项目,但我似乎无法将其付诸实践。我试图让scrollingMessage
框实际滚动。我测试了一些事情并发现beginPos
未定义。我以为我是在定义它,但显然我不是。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Lab10-1</title>
<script type="text/javascript">
var adMsg = "** -Danyi's Donuts make great fund-raising items- **"
var beginPos=0;
function scrollingMessage() {
msgForm.scrollingMsg.value = adMsg.substring(beginPos, adMsg.length)+adMsg.substring(0, beginPos);
beginPos = beginPos+1;
if(beginPos > adMsg.length) {
beginPos += 1;
}
window.setTimeout("scrollingMessage", 200)
}
</script>
<style type="text/css">
<!--
.style1 {
color: #990000;
font-weight: bold;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #0000FE;
font-size: 14pt;
}
.center-div {
width: 75%;
margin-right: auto;
margin-left: auto;
}
.header-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
text-align: center;
}
.center-items {
margin-right: auto;
margin-left: auto;
text-align: center;
}
.right-align {
text-align: right;
}
.left-align {
text-align: left;
}
#footer {
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
font-weight:bold;
color: #33C;
text-align:center;
}
</style>
</head>
<body onload="scrollingMessage();">
<div class="center-div">
<p class="center-items"><img src="lab10-1banner.jpg" alt="tri star logo" width="750" height="120"></p>
</div>
<div class="center-div">
<p class="center-items"><span class="style2">Danyi's Donuts Online Ordering System</span></p>
<form name="donutOrder" class="center-div" id="donutOrder">
<table class="center-div">
<tr>
<td class="right-align">
<span class="style1">*</span>Types of Donuts:
</td>
<td>
<select name="donutType">
<option>Select the Type of Donut</option>
<option value=".19">Glazed</option>
<option value=".23">Chocolate</option>
<option value=".24">Jelly Filled</option>
<option value=".21">Strawberry Sprinkle</option>
<option value=".18">Danyi Special</option>
</select>
</td>
</tr>
<tr>
<td class="right-align">
<span class="style1">*</span>Enter the number of donuts: </td>
<td><input type="text" name="count" id="count"></td>
</tr>
<tr>
<td class="right-align">
<input type="button" value="Calculate">
</td>
<td>
<input type="reset">
</td>
</tr>
<tr>
<td class="right-align"><span class="style1">*</span>Cost of donuts: </td>
<td><input type="text" name="donutCost" value=" " size="9"></td>
</tr>
</table></form>
<form id="msgForm">
<p style="text-align:center"><input type="text" name="scrollingMsg" size="25">
</input></p>
</form>
</div>
</body>
</html>