2017-10-14 67 views
0

在這個程序中,我創建了它的對象和實例,並將這些實例存儲在數組中。我通過獲取數組長度的模分數來檢索數組索引。我正嘗試在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> 
+1

'的document.getElementById()'應該是'的document.getElementById()' – guest271314

+0

@ChrisHappy不知道你是什麼意思? – guest271314

+0

@ChrisHappy在你的Answer中沒有使用'.getElementById()'的鏈接到document.getElementById()的目的是什麼? – guest271314

回答

1

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

+0

讓我試着在加載頁面時告訴你 – pari

+0

爲什麼它不直接顯示任何鏈接? – pari

+0

更新了答案。所有你需要做的就是在設置定時器之前調用'changeLink()'。 – davidchoo12

0

移動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); 

} 
+1

_「將'var counter = 0;'移出函數。」_這不是Question中代碼的唯一問題。 'document.getElementbyId()'不是函數 – guest271314

+0

@Chris它不工作... – pari

+0

@pari現在怎麼樣?剛剛更新後得到「開明」的客人271314 –

相關問題