目标效果：每过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. （转载）RHEL7(RedHat 7)本地源的配置

    配置yum源 1.首先连接RedHat7的DVD再把挂载DVD光盘到/mnt   因为配置时候路径名里面不能有空格,否则不能识别  [root@ mnt]# mount /dev/cdrom /mnt ...

  2. 【WPF】实现类似QQ聊天消息的界面

    最近公司有个项目,是要求实现类似 QQ 聊天这种功能的. 如下图 这没啥难的,稍微复杂的也就表情的解析而已. 表情在传输过程中的实现参考了新浪微博,采用半角中括号代表表情的方式.例如:“abc[dog ...

  3. Linux合上笔记本不进入休眠模式

      最近一个问题困扰了我很久,入职之前和人事说过工作中会用自己的电脑,但是人事还是坚持要给我发一个电脑,没办法,公司没有补贴,那就领了吧,索性将这个笔记本配置成了Fedora系统,用来当测试机,但是一 ...

  4. 【设计经验】1、Verilog中如何规范的处理inout信号

    在FPGA的设计过程中,有时候会遇到双向信号(既能作为输出,也能作为输入的信号叫双向信号).比如,IIC总线中的SDA信号就是一个双向信号,QSPI Flash的四线操作的时候四根信号线均为双向信号. ...

  5. HTML5之FileReader文件读取接口

    FileReader用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 1.FileReade ...

  6. 微信小程序如何调用API实现数据请求-wx.request()

    前言 微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的.下面就讲一下如何请求数据,简单到不行. wx.requ ...

  7. Java学习笔记36（File类）

    File类可以对操作系统中的文件进行操作: File类的静态成员变量: package demo; import java.io.File; public class FileDemo { publi ...

  8. LabVIEW（十三）：同一个控件的输入和输出转换

    1.实现功能:读取某些文件的数据并将这些数据显示在一个界面上,对界面上的数据进行修改后,将修改后的数据保存到源文件中. 2.显示功能: 程序框图右键>文件I/O>读取分隔符电子表格> ...

  9. localStorage 存满了怎么办？

    先来几道面试题 1.a.meituan.com 和 b.meituan.com 这两个域能够共享同一个 localStorage 吗? 2.在 webview 中打开一个页面:i.meituan.co ...

  10. php函数式编程

    // 函数式编程 $users = array( array('id' => 1, 'name' => 'abc1', 'age' => 29, '性别' => '男'), a ...