JavaScript的一个问题

1、先使用 HTML和CSS 进行页面布局,将多出的文本先溢出隐藏。
2、使用定时器将文本每过1秒钟向上走,达到文本自动切换的功能
3、当鼠标滑过文本时,文本停止向上走,当鼠标离开文本时,文本将每过1秒
钟向上走
内容:
1.每时每课,给你新机会
2.HTML定义了网页的内容

根据你的描述:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="cter">
        <div id="text">1.每时每课,给你新机会<br><br>2.HTML定义了网页的内容<br><br></div>
    </div>
    <script src="index.js"></script>
</body>
</html>

index.js

const text = document.getElementById("text");
var inv;
const startS = () => {
    inv = setInterval(()=>{
        text.innerHTML += `1.每时每课,给你新机会<br><br>2HTML定义了网页的内容<br><br>`
        text.style.top = text.style.top.split("px")[0]-50+"px";
    },1000);
}

text.addEventListener("mouseenter",()=>{
    clearInterval(inv);
});

text.addEventListener("mouseleave",()=>{
    startS();
});

startS();

style.css

#text {
    top: 0;
    font-size: 25px;
    line-height: 25px;
    position: absolute;
    transition: top 1s;
}

.cter {
    position: relative;
    height: 30px;
    overflow: hidden;
}

有用采纳,需要讲解欢迎留言
看看是不是你想要的效果