目标效果：每过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. SDWebImage之UIView+WebCache

    UIView+WebCache是我们能很方便的使用sd_setImageWithURL:系列方法来加载图片的关键类.UIButton(WebCache).MKAnnotationView(WebCac ...

  2. 五花八门的CSS

    一.颜色 rgba(0, 0, 0, 0.5) rgba括号中前3个数字代表着 red green blue三种颜色的rgb值,0-255,最后一个是设定这个颜色的透明度即alpha值.范围从0到1, ...

  3. Android 监听耳机的插拔事件

    一般采用的是动态监听的方式来实现的: package com.renhui.ej; import android.content.BroadcastReceiver; import android.c ...

  4. Yii2 Template 组件框架集封装

    项目简介: Yii2_Template是一个“提供大多数PHP常用的组件去集合成的一套基于Yii2的项目框架”. 该项目是一款秉着提高 开发效率.降低开发成本,遵循高拓展,高可用的原则的进行开发的框架 ...

  5. Java学习笔记37（字节流）

    输出:程序到文件 输入:文件到程序 字节输出流:OutputStream类 作用:在java程序中写文件 这个类是抽象类,必须使用它的子类 方法: 写入: package demo; import j ...

  6. maven配置多仓库的方法

    刚接触maven就是在公司里配置好的,所以一直以来使用都没毛病,所以一直没有去动这些固有的东西. 但是,后来把公司的电脑拿回家之后,发现有的东西就搞不起来了.原因也看一下就明白了,因为在公司的时候用的 ...

  7. 谈谈我们对userAgent的看法，为什么爬虫中需要userAgent？

    首先打开浏览器,按 F12 进入控制台(Console),然后输入:navigator.userAgent,即可看到 UA.例如: 1 2 Mozilla/5.0 (Windows NT 10.0; ...

  8. 配置redis

    配置Redis 配置相关redis.conf bind 127.0.0.1                                                 注释掉 否则其它远程计算机无 ...

  9. Kaggle项目实战一：Titanic: Machine Learning from Disaster

    项目地址 https://www.kaggle.com/c/titanic 项目介绍: 除了乘客的编号以外,还包括下表中10个字段,构成了数据的所有特征 Variable Definition Key ...

  10. 1.Django自学课堂

    1.django manage.py startproject project_name   -->创建工程 2.python manage.py startapp app_name   --& ...