跑马灯效果的文字

原创于 2023-03-26 23:58:25 发布 · 48 阅读

CC 4.0 BY-SA版权

文章标签：

这是一个使用JavaScript和HTML实现跑马灯效果的示例代码，主要涉及变量msg存储消息内容，设置滚动间隔interval，以及通过substring方法动态更新文本输入框lenText的值，形成文字滚动的效果。页面样式使用了CSS进行定制，包括背景色、输入框样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
    <script language="JavaScript">
        var msg="学习前端第17天，继续加油！我是最棒的！"
        var interval=400;
        var seq=0;
        function LenScroll(){
        document.nextForm.lenText.value=msg.substring(seq,msg.length)+“   ”+msg;
        seq++;
        if(seq>msg.length){
        seq=0;
        window.setTimeout("LenScroll()",interval);
        }
    </script>
    <style type="text/css">
        body{
        background-color:#fffff；}
        input{
        background:transparent;
        border:none;
        color:#ffb400;
        font-size:45px;
        font-weight:bold;
        font-family:黑体;
        }

    </style>
</head>
<body onload="LenScroll()">
<center>
    <form name="nextForm">
        <input type="text" name="lenText">
    </form>
</center>
</body>
</html>