zoukankan      html  css  js  c++  java
  • js之跑马灯广告

    目标效果:每过1秒重复把广告的第一个字符放到最后,达到动态跑马灯效果

    代码如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <div id="txt" style="color: white;background-color: red;text-align: center;font-size: 50px;">大甩卖</div>
     9     <script type="text/javascript">
    10         setInterval(function ()//通过定时器重复动作
    11         {
    12             var oTxt = document.getElementById('txt'); //获取标签
    13             var txt = oTxt.innerText; //获取标签文本内容
    14             // console.log(typeof txt)  页面控制台查看是string
    15             var first_i = txt[0]; //字符串索引取值
    16             var last_i = txt.slice(1,txt.length);//字符串切片
    17             var new_txt = last_i + first_i;//字符串拼接
    18             oTxt.innerText = new_txt; //拼接后的字符串放到标签文本内容
    19         },1500)
    20     </script>
    21 </body>
    22 </html>
  • 相关阅读:
    数据库与数据仓库的比较Hbase——Hive
    log4j 配置使用
    hadoop Datanode Uuid unassigned
    kafka相关文章引用
    kafka可靠性
    kafka基本原理
    html
    并发编程
    Python之系统交互(subprocess)
    网络编程
  • 原文地址:https://www.cnblogs.com/wenxianfeng/p/10185077.html
Copyright © 2011-2022 走看看