原生js实现滚动新闻一直滚小练习（利用定时器、scrollTop）_综合

功能：新闻一直滚动，鼠标进入停止，移开继续。
主要利用定时器setInterval和滚动事件的属性：
scrollTop(用来表示或设置滚动的内容，被卷上去内容的高度，结果为数值)
效果如下：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {
    margin: 0;padding: 0;box-sizing: border-box;}#box {
    width: 500px;height: 300px;line-height: 2em;background-color: skyblue;border: solid 1px;margin: 100px auto;padding: 0 10px;overflow: hidden;}li {
    list-style: none;}span {
    margin-right: 10px;}a {
    text-decoration: none;color: black;}a:hover {
    color: orangered;text-decoration: underline;}</style>
</head>
<body>
<div id="box"><ul id="list"><li><span>1.</span><a href="#">央视:丧钟为"港独"势力而鸣 写给彭定康之流</a><li><li><span>2.</span><a href="#">代表建议未成年人刑责年龄起点降至13岁</a><li><li><span>3.</span><a href="#">为娶认识才两个月的保姆 96岁大爷要卖500万的房</a><li><li><span>4.</span><a href="#">纽约州至少4500名新冠肺炎康复者被送至疗养院</a><li><li><span>5.</span><a href="#">女生上课偷吃被老师发现 抬头先是懵住随后反应可爱</a><li><li><span>6.</span><a href="#">长征五号瞄准7月发射火星探测器 工程按计划推进</a><li><li><span>7.</span><a href="#">拨12315举报 黑龙江开展摩托车及电动车头盔价格检查</a><li><li><span>8.</span><a href="#">疫情之后，我国如何补短板？国家发改委回应</a><li><li><span>9.</span><a href="#">屠海鸣：建议督促香港推动国民教育落细落地</a><li><li><span>10.</span><a href="#">周扬青否认删除拒复合言论</a><li><li><span>11.</span><a href="#">郑恺苗苗换情侣童年照头</a><li></ul>
</div>
<script>var box = document.getElementById('box')var list = document.getElementById('list')//复制一遍文档var content = list.innerHTML;list.innerHTML += content;var time = 10;var timer = setInterval(up, time);function up() {
    //滚上去的内容大于ul内容高度的一半，重置高度 0if (box.scrollTop > (list.offsetHeight >> 1)) {
    box.scrollTop = 0} else {
    box.scrollTop++;}}//鼠标移入暂停--清除定时器box.onmouseover = function () {
    clearInterval(timer)}///鼠标移出继续--启动定时器box.onmouseout = function () {
    timer = setInterval(up, time);}</script>
</body>
</html>