如何用JavaScript编写一个长尾词自动滚动的公告效果？

本文共计1123个文字，预计阅读时间需要5分钟。

原文示例为：本文字例为大家分享了js实现公告自动滚动的具体代码，供大家参考。具体内容如下：++div class=test003+div class=test004+div class=testTop+span class=span1姓名/span+div

修改后为：示例代码：实现公告自动滚动的js代码，供参考。++div class=test003+div class=test004+div class=testTop+span class=span1姓名/span+div

本文实例为大家分享了js实现公告自动滚动的具体代码，供大家参考，具体内容如下

html

<div class="test003">           <div class="test004">             <div class="testTop"><span class="span1">姓名</span>                <span class="span2">状态</span>                <span class="span3">查询积分分数</span>              </div>              <div id="box">               <ul id="list">                  <li><span class="span1">173****3856</span>                     <span class="span2">在11:36查询</span>                     <span class="span3">108分</span>                  <li>               <li><span class="span1">139****1926</span>                   <span class="span2">在11:49查询</span>                   <span class="span3">120分</span>               <li>               <li><span class="span1">137****2575</span>                   <span class="span2">在09:59查询</span>                   <span class="span3">110分</span>               <li>               <li><span class="span1">181****6973</span>                   <span class="span2">在11:08查询</span>                   <span class="span3">120分</span>               <li>               <li><span class="span1">133****1728</span>                   <span class="span2">在13:10查询</span>                   <span class="span3">119分</span>               <li>               <li><span class="span1">186****2048</span>                   <span class="span2">在12:37查询</span>                   <span class="span3">114分</span>               <li>               <li><span class="span1">153****0658</span>                   <span class="span2">在10:22查询</span>                   <span class="span3">120分</span>               <li>               <li><span class="span1">150****3880</span>                   <span class="span2">在12:24查询</span>                   <span class="span3">120分</span>               <li>               <li><span class="span1">189****5792</span>                   <span class="span2">在11:00查询</span>                   <span class="span3">105分</span>               <li>               <li><span class="span1">157****3676</span>                   <span class="span2">在14:55查询</span>                   <span class="span3">192分</span>               <li>               <li><span class="span1">150****3811</span>                   <span class="span2">在14:25查询</span>                   <span class="span3">108分</span>               <li>               <li><span class="span1">173****4713</span>                   <span class="span2">在15:21查询</span>                   <span class="span3">109分</span>               <li>               <li><span class="span1">159****7114</span>                   <span class="span2">在14:40查询</span>                   <span class="span3">106分</span>               <li>               <li><span class="span1">180****2836</span>                   <span class="span2">在15:35查询</span>                   <span class="span3">147分</span>               <li>               <li><span class="span1">187****3546</span>                   <span class="span2">在14:17查询</span>                   <span class="span3">120分</span>                 <li>              </ul>          </div>     </div> </div>

css

<style type="text/css">         .test001 {                 width: 100%;                 border-top: 1px solid black;                 border-bottom: 1px solid black;                 text-align: center;                 font-weight: bold;                 font-size: 17px;                 height: 70px;                 display: flex;                 justify-content: center;                 align-items: center;             }             .test002 {                 margin-top: 15px;                 width: 100%;                 text-align: center;                 font-weight: bold;                 font-size: 21px;                 display: flex;                 justify-content: center;                 align-items: center;             }             .test003 {                 margin-top: 15px;                 width: 100%;                 /* text-align: center; */                 /* font-weight: bold; */                 /* font-size: 21px; */                 display: flex;                 justify-content: center;                 /* border: solid 1px; */                 flex-direction: column;                 align-items: center;             }             .test004 {                 /* margin-top: 15px; */                 width: 90%;                 /* text-align: center; */                 /* font-weight: bold; */                 /* font-size: 21px; */                 display: flex;                 justify-content: center;                 border: solid 1px;                 flex-direction: column;                 align-items: center;             }             .testTop {                 width: 90%;                 font-size: 14px;                 height: 30px;                 display: block;                 font-weight: bold;                 padding-left: 20px;                 padding-top: 15px;             }             .testTop span {                 margin-right: 75px;             }             .testTop .span2 {                 margin-right: 65px;             }             #box {                 width: 90%;                 height: 250px;                 line-height: 2em;                 /* background-color: skyblue; */                 margin-top: 15px;                 /* margin: 100px auto; */                 padding: 0 0px;                 overflow: hidden;             }             #list li {                 margin-top: 10px;                 list-style: none;             }             #list span {                 margin-right: 30px;                 font-size: 14px;                 display: inline-block;                 overflow: hidden;                 text-align: center;             }             #list .span1 {                 width: 80px;             }             #list .span2 {                 margin-right: 40px;                 width: 80px;             }             #list .span3 {                 width: 50px;                 /* margin-right: 50px; */                 /* text-align: left; */                 /* border: 1px solid black; */             }             /* #list a:hover {             color: orangered;             text-decoration: underline;         } */ </style>

js

<script>    var box = document.getElementById('box')    var list = document.getElementById('list')         console.log(box, 'box')         //复制一遍文档         var content = list.innerHTML;         list.innerHTML += content;         var time = 30;         var timer = setInterval(up, time);         function up() {             //滚上去的内容大于ul内容高度的一半，重置高度 0             if (box.scrollTop > (list.offsetHeight >> 1)) {                 box.scrollTop = 0             } else {                 box.scrollTop++;             }         }         //鼠标移入暂停--清除定时器         // box.onmouseover = function () {         //     clearInterval(timer)         // }         ///鼠标移出继续--启动定时器         box.onmouseout = function() {             timer = setInterval(up, time);         } </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。