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

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div id="txt" style="color: white;background-color: red;text-align: center;font-size: 50px;">大甩卖</div>

     <script type="text/javascript">

         setInterval(function ()//通过定时器重复动作

         {

             var oTxt = document.getElementById('txt'); //获取标签

             var txt = oTxt.innerText; //获取标签文本内容

             // console.log(typeof txt)  页面控制台查看是string

             var first_i = txt[0]; //字符串索引取值

             var last_i = txt.slice(1,txt.length);//字符串切片

             var new_txt = last_i + first_i;//字符串拼接

             oTxt.innerText = new_txt; //拼接后的字符串放到标签文本内容

         },1500)

     </script>

 </body>

 </html>

js之跑马灯广告的更多相关文章

  1. js抽奖跑马灯程序

    js抽奖跑马灯程序 点击下载代码

  2. JS实现跑马灯效果(向左，向上)

    <html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...

  3. js文字跑马灯

    实现文字跑马灯效果,主要控制scrollLeft. 效果图如下 代码如下 <html> <head> <script type="text/javascript ...

  4. 原生js实现跑马灯抽奖效果

    目前好多的微信活动都有一些抽奖活动,其中就有跑马灯. <!DOCTYPE html> <html> <head> <title>跑马灯效果</ti ...

  5. JS实现跑马灯效果(鼠标滑入可暂停，离开继续跑)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. js代码跑马灯效果-----轮播图字效果！

    文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...

  7. js图片跑马灯效果

    <style. type="text/css">body{margin:0px auto; padding:0px;}ul,li{margin:0px; padding ...

  8. JS跑马灯

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEA ...

  9. javascript小记五则：用JS写一个图片左右自由滚动的“跑马灯”效果

    之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...

随机推荐

  1. hive 语法 case when 语法

    ' then '精选' else null end as sale_type 注意: end不能少

  2. “全栈2019”Java多线程第三十七章：如何让等待的线程无法被中断

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  3. Mybatis框架一：搭建测试

    Mybatis框架不再介绍: 在JDBC中存在一些问题: 1.频繁连接和释放资源浪费内存 2.编码完成后不便于维护 于是产生了简化数据库操作的框架:Hibernate.Mybatis等等,这里介绍My ...

  4. Zabbix--1

    ZABBIX 与其他监控程序比较.

  5. 学习Python语言 基础语法：变量的基本使用

    Python变量 程序是用来处理数据的,变量就是用来保存数据的,通过给数据定义一个名称来保证方便记忆和识别.使用这个数据.变量可以保存所有类型的数据. Python变量的定义 在Python中,变量的 ...

  6. TCP/IP 笔记 - 防火墙和网络地址转换

    防火墙是位于内部网和外部网之间的屏障,是系统的第一套防线,作用是防止非法用户的进入. 网络地址转换是一种IP数据包通过路由器或防火墙时通过重写来源IP地址或目的地址的技术,可以用来隐藏或保护内部网络, ...

  7. PHP-CPP开发扩展（一）

    PHP-CPP是一个用于开发PHP扩展的C++库.PHP-CPP提供了一系列完善的文档.易于使用和扩展的类,让你可以相对快速的创建PHP的原生扩展. 为什么使用PHP-CPP 很快 用C++编写的代码 ...

  8. hdfs-03-hdfs客户端操作

    1, hdfs中两种连接方式 1), 网页 2), 客户端 文件的切块大小和存储的副本数量,都是由客户端决定! 所谓的由客户端决定,是通过配置参数来定的 hdfs的客户端会读以下两个参数,来决定切块大 ...

  9. mac在命令行中打开某个文件夹

    使用 open 命令,如打开 ~/Download/abc open ~/Download/abc

  10. Android privilege escalation to mediaserver from zero permissions (CVE-2014-7920 + CVE-2014-7921)

    墙外通道:http://bits-please.blogspot.com/2016/01/android-privilege-escalation-to.html In this blog post ...