Javascript：设置定时器每分钟运行不同的链接

在这个程序中，我创建了它的对象和实例，并将这些实例存储在数组中。我通过获取数组长度的模分数来检索数组索引。我正尝试在div标签中显示链接，我应该能够每分钟看到不同的链接。点击链接后，它应显示不同的网址。并将计时器设置为每分钟运行一次。为此我创建了setInterval（）。但它似乎并不奏效。谁能帮我？Javascript：设置定时器每分钟运行不同的链接

代码：

<!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>

来源

2017-10-14 pari

'的document.getElementById（）'应该是'的document.getElementById（）' – guest271314

@ChrisHappy不知道你是什么意思？ – guest271314

@ChrisHappy在你的Answer中没有使用'.getElementById（）'的链接到document.getElementById（）的目的是什么？ – guest271314

固定的分号和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>

来源

2017-10-14 07:49:57 davidchoo12

让我试着在加载页面时告诉你 – pari

为什么它不直接显示任何链接？ – pari

更新了答案。所有你需要做的就是在设置定时器之前调用'changeLink（）'。 – davidchoo12

移动var counter = 0;该功能的。

而且，@guest271314指出，你必须capitialize的by在：

var ele = document.getElementById("link"); 
/* ... */ 
var myDiv = document.getElementbyId("div");

最终代码：

var counter = 0; 

function changeLink() { 

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

    var ele = document.getElementById("link"); //Capitalize By 
    ele.innerHTML = instances[counter]; 
    counter++; 

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

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

}

来源

2017-10-14 07:38:33

_“将'var counter = 0;'移出函数。”_这不是Question中代码的唯一问题。 'document.getElementbyId（）'不是函数 – guest271314

@Chris它不工作... – pari

@pari现在怎么样？刚刚更新后得到“开明”的客人271314 –

Javascript：设置定时器每分钟运行不同的链接

回答

相关问题