gpt4 book ai didi

Javascript:设置计时器每分钟运行不同的链接

转载 作者:行者123 更新时间:2023-12-03 03:16:45 25 4
gpt4 key购买 nike

在这个程序中,我创建了对象及其实例,并将这些实例存储在数组中。我通过获取分钟与数组长度的模来检索数组索引。我正在尝试在 div 标签中显示链接,我应该能够每分钟看到不同的链接。单击链接后,它应该显示不同的网址。并将计时器设置为每分钟运行一次。为此我创建了 setInterval()。但它似乎不起作用。谁能帮我吗?

代码:

<!DOCTYPE html>
<html>
<head>
<style>

.myDiv{
width: 750px;
height: 150px;
border: #CED8BC 3px solid;
border-radius: 20px;
position: absolute;
top: 30%;
left: 20%;
}

div p {
text-align: center;
font-family: monospace;
font-size: 30px;
}

a{
text-align: center;
text-decoration: none;
color: #3bb570;

}

a:hover{
color:#efa5db
}

</style>
<title>lab15</title>

</head>
<body background="lab15_images/pink.jpg">
<div class="myDiv" id="div">
<p> Click on the link to see a website. </p>
<!-- <p><b><a href="#" id="link"> </a></b></p> -->
<p id="link"> </p>
</div>

<script>
function site(the_url, website_name) {
this.the_url = the_url;
this.website_name = website_name;
}

var myWebsite = new site("http://www.cnn.com/", "CNN");
var myWebsite2 = new site("http://www.bbc.com/news", "BBC");
var myWebsite3 = new site("http://www.foxnews.com/", "FOX NEWS");
var myWebsite4 = new site("http://abcnews.go.com/", "ABC NEWS");
var myWebsite5 = new site("https://www.cbsnews.com/", "CBS NEWS");

var instances = new Array(myWebsite, myWebsite2, myWebsite3, myWebsite4, myWebsite5);


setInterval(changeLink, 60000);

function changeLink() {

var n = new Date().getMinutes();
var index = n % instances.length
var site = instances[index]
var counter = 0;

var ele = document.getElementbyId("link");
ele.innerHTML = instances[counter];
counter++;

if(counter >= instances.length) {
counter = 0;
}

var a = document.createElement('a');
var myDiv = document.getElementbyId("div");
a.href = site.the_url;
a.innerHTML = site.website_name
myDiv.appendChild(a);
document.body.appendChild(myDiv);

}

</script>
</body>
</html>

最佳答案

修复了分号和 getElementById 拼写错误。这是工作代码。

function site(the_url, website_name) {
this.the_url = the_url;
this.website_name = website_name;
}

var myWebsite = new site("http://www.cnn.com/", "CNN");
var myWebsite2 = new site("http://www.bbc.com/news", "BBC");
var myWebsite3 = new site("http://www.foxnews.com/", "FOX NEWS");
var myWebsite4 = new site("http://abcnews.go.com/", "ABC NEWS");
var myWebsite5 = new site("https://www.cbsnews.com/", "CBS NEWS");

var instances = new Array(myWebsite, myWebsite2, myWebsite3, myWebsite4, myWebsite5);

// call changeLink once to display on page load
changeLink();
// interval changed to 3 seconds so that you dont need to wait a minute for the result
setInterval(changeLink, 3000);

function changeLink() {
var n = new Date().getMinutes();
var index = n % instances.length;
var site = instances[index];
var counter = 0;
var ele = document.getElementById("link");
counter++;

if (counter >= instances.length) {
counter = 0;
}

var a = document.createElement('a');
var myDiv = document.getElementById("div");
a.href = site.the_url;
a.innerHTML = site.website_name;
ele.innerHTML = '';
ele.appendChild(a);

}
.myDiv {
width: 750px;
height: 150px;
border: #CED8BC 3px solid;
border-radius: 20px;
position: absolute;
top: 30%;
left: 20%;
}

div p {
text-align: center;
font-family: monospace;
font-size: 30px;
}

a {
text-align: center;
text-decoration: none;
color: #3bb570;
}

a:hover {
color: #efa5db
}
<!DOCTYPE html>
<html>

<head>
<style>

</style>
<title>lab15</title>

</head>

<body background="lab15_images/pink.jpg">
<div class="myDiv" id="div">
<p> Click on the link to see a website. </p>
<!-- <p><b><a href="#" id="link"> </a></b></p> -->
<p id="link"> </p>
</div>
</body>

</html>

关于Javascript:设置计时器每分钟运行不同的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46742043/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com