JavaScript 使用 setInterval 更改图像和计数器答案

【问题标题】：JavaScript changing an image and counter with setIntervalJavaScript 使用 setInterval 更改图像和计数器
【发布时间】：2014-10-17 23:18:34
【问题描述】：

所以我正在使用 JavaScript 进行家庭作业，我遇到的问题是创建 changeAd() 函数，以在 5 秒后用函数中的其他图像之一替换表中的起始图像。我很迷茫，所以非常感谢任何帮助或指点！这是我目前所拥有的：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CVR1</title>
</head>
<body onLoad="startAdPage()">
<script type="text/javascript">
/* <![CDATA[ */
function startAdPage() {
	setInterval(changAd(),5000);
	setInterval(startCountdown(),1000);
}
function changeAd() { 
	THIS NEEDS WORK should change the image every 5 seconds to replace the one in the table, i think this needs to be an array/list
	cvb1.gif;
	cvb2.gif;
	cvb3.gif;
}
var count() = 15;
function startCountdown() { 
	while count >= 0;
	THIS NEEDS WORK
	should change the value of textfield to countdown from 15 to 0 decrease by one each time it executes, when count reaches 0 clear both intervals and redirect browser to CVR2.html
}
/* ]]> */
</script>
<table>
  <tr>
    <td><img src="cvb1.gif"></td>
    <td><p>Advertisement</p><p>The Central Vally Realtors home page will be displayed in TEXTFIELD seconds.</p><p><a href="CVR2.html">Skip Advertisement</a></p></td> 
  </tr>
</table>
</body>
</html>

【问题讨论】：

标签： javascript

【解决方案1】：

首先，您应该从 setInterval 中的函数调用中删除括号。
其次，我假设你知道如何声明一个数组来保存图像的名称，完成后你可以去这里 http://stackoverflow.com/questions/5915096/get-random-item-from-javascript-array 看看如何从此数组中获取随机元素。
最后要更改 javascript 中的图像，您应该参考这里 http://stackoverflow.com/questions/7312553/change-image-source-with-javascript。
我希望这会有所帮助。

【讨论】：

【解决方案2】：

这是我要使用的最终工作代码，我认为我没有正确使用 startCountdown 函数中指向的 Textfield，但它可以工作。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CVR1</title>
</head>
<body onLoad="startAdPage()">
<script type="text/javascript">
/* <![CDATA[ */
function startAdPage(){
	setInterval("changeAd()", 5000);
	setInterval("startCountdown()",1000);
}
pix = new Array();
 
pix[0] = "pictures/cvb2.gif";
pix[1] = "pictures/cvb3.gif";
pix[2] = "pictures/cvb1.gif";

var x = 0;

function changeAd(){
document.images.pic.src = pix[x];
x = x + 1;
if (x > (pix.length-1)) {x = 0} 
}

var messages = new Array(
	"15",
	"14",
	"13",
	"12",
	"11",
	"10",
	"9",
	"8",
	"7",
	"6",
	"5",
	"4",
	"3",
	"2",
	"1",
	"0"
);
var count = 1;
function startCountdown() {
	document.getElementById("timer").value = messages[count];
	if(count < messages.length -1){
		count++;
	}
	else {
		count = 0;
		location.assign ("CVR2.html");
	}
}
/* ]]> */
</script>

<table>
  <tr>
    <td><form><img name="pic" src="pictures/cvb1.gif"></form></td>
    <td><p>Advertisement</p><p>The Central Vally Realtors home page will be displayed in <form><input type="text" id="timer" value="15" /></form> seconds.</p><p><a href="CVR2.html">Skip Advertisement</a></p></td> 
  </tr>
</table>
</body>
</html>

【讨论】：