使用 javaScript 添加选取框

Question

How can I print the data in the array one by one into the scrolling text using javascript.
How can I print the data in the array one by one into the scrolling text using javascript.
How can I print the data in the array one by one into the scrolling text using javascript.
How can I print the data in the array one by one into the scrolling text using javascript.

var arrayList=[
 ["Ambitioni dedisse scripsisse iudicaretur."],
 ["Ambitioni dedisse scripsisse iudicaretur."],
 ["Ambitioni dedisse scripsisse iudicaretur."],
 ["Ambitioni dedisse scripsisse iudicaretur."],
 ["Ambitioni dedisse scripsisse iudicaretur."],
 ["Ambitioni dedisse scripsisse iudicaretur."],
 ["Ambitioni dedisse scripsisse iudicaretur."]
];

  .quetoBody{
      width: 300px; 
      margin-left: 150px; 
      margin-top: 40px; 
      background-color: aqua; 
      padding: 15px;
  }
  @keyframes slydeAnimation {
    0%   { text-indent: 430px }
    100% { text-indent: -485px }
  }

  @-webkit-keyframes slydeAnimation {
    0%   { text-indent: 430px }
    100% { text-indent: -485px }
  }

  .slyde {
    overflow: hidden;
    white-space: nowrap;
    animation: slydeAnimation 17s linear infinite;
    -webkit-animation: slydeAnimation 17s linear infinite;
  }

  .slyde:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }

<html>
<head></head>
<body>
 <div class="quetoBody">
   <p id="queto" class="slyde">
    Ambitioni dedisse scripsisse iudicaretur.
  </p>
 </div>
</body>
</html>

How can I print the data in the array one by one into the scrolling text using javascript.
How can I print the data in the array one by one into the scrolling text using javascript.
How can I print the data in the array one by one into the scrolling text using javascript.
How can I print the data in the array one by one into the scrolling text using javascript.

Answer 1

只需更改您需要的时间即可开始

function run() {
    setInterval(() => {
        document.querySelector("p").textContent = arrayList[count];
        if (count + 1 == arrayList.length) {
            count = 0;
        } else {
            count++;
        }
    }, 5000);
}

var count = 0;

var arrayList = [
   ["Ambitioni dedisse scripsisse iudicaretur. 1"],
   ["Ambitioni dedisse scripsisse iudicaretur. 2"],
   ["Ambitioni dedisse scripsisse iudicaretur. 3"],
   ["Ambitioni dedisse scripsisse iudicaretur. 4"],
   ["Ambitioni dedisse scripsisse iudicaretur. 5"],
   ["Ambitioni dedisse scripsisse iudicaretur. 6"],
   ["Ambitioni dedisse scripsisse iudicaretur. 7"]
];

  .quetoBody{
      width: 300px; 
      margin-left: 150px; 
      margin-top: 40px; 
      background-color: aqua; 
      padding: 15px;
  }
  @keyframes slydeAnimation {
    0%   { text-indent: 430px }
    100% { text-indent: -485px }
  }

  @-webkit-keyframes slydeAnimation {
    0%   { text-indent: 430px }
    100% { text-indent: -485px }
  }

  .slyde {
    overflow: hidden;
    white-space: nowrap;
    animation: slydeAnimation 5s linear infinite;
    -webkit-animation: slydeAnimation 5s linear infinite;
  }

  .slyde:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }

<html>
<head></head>
<body onload=run()>
 <div class="quetoBody">
   <p id="queto" class="slyde">
    
  </p>
 </div>
</body>
</html>

使用 javaScript 添加选取框

Adding marquee using javaScript

html

javascript

css

marquee