Question

在这个程序中，我创建了它的对象和实例，并将这些实例存储在数组中。我通过获取数组长度的分钟模数来检索数组索引。我试图在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>

Answer 1

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

＆＃13;

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);

}

＆＃13;

.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
}

＆＃13;

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

＆＃13;

Answer 2

将var counter = 0;移出功能。

此外，正如@guest271314指出的那样，您必须对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);

}

最终代码：

    <div class="advanced-search">
       Some code
    </div>

    <a class="show-advanced-search">Advanced Search</a>

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

2 个答案: