JavaScript设置div中的文字滚动起来 实现滚动效果

时间：2024-09-26 22:04:02
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="i1" style="width: 400px;

 height: 300px;

 position: absolute;

 left: 50%;

 top: 50%;

 margin-left: -200px;

 margin-top: -150px; ">欢迎任明霞莅临指导

 </div>

 <script>

     function f() {

         //根据id获取所对应的div,document意思是去整个html文档中找，getElementById是根据ID

         var tag = document.getElementById('i1')

         //拿到div中的文本，注意innertext方法没有括弧

         var content = tag.innerText

         //获取它这个字符串的第一个文字

         var z =content.charAt(0)

         //获取这个文本除第一个字以外的文本，用substring给它起始位置

         var  l = content.substring(1,content.length)

         //把第一个字符放到最后一位拼接起来

         var new_content = l+z

         //用新生成new_content把div中的文本替换掉

         tag.innerText = new_content

     }

     //setInterval是个定时器，第一个参数是要执行的内容，第二个参数是执行间隔，单位为毫秒

     setInterval('f()',100)

 </script>

 </body>

 </html>

JavaScript设置div中的文字滚动起来 实现滚动效果

相关文章