目标效果：每过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. Learning WCF：A Simple Demo

    This is a very simple demo which can help you create a wcf applition quickly. Create a Solution Open ...

  2. a标签嵌套a标签在实际项目开发中遇到的坑

    大家都知道HTML的嵌套规范,其中一个规范是块元素嵌套行内元素,块元素嵌套块元素,行内元素嵌套行内元素,行内元素不能嵌套块元素. 其中需要注意的是行内元素嵌套行内元素,a标签虽然是行内元素,但是a标签 ...

  3. javascript 内存模型

    我对于 JavaScript 的内存模型一直都比较困惑,很想了解在操作变量的时候,JS 是如何工作的.如果你和我有同样的困惑,希望这篇文章能给你一些启发. 译文,喜欢原文的可以直接拉到底部 当我们声明 ...

  4. Linux链接脚本学习--lds

    一.概论 ld: GNU的链接器. 用来把一定量的目标文件跟档案文件链接在一起,并重新定位它们的数据,链接符号引用. 一般编译一个程序时,最后一步就是运行ld进行链接 每一个链接都被一个链接脚本所控制 ...

  5. 脚手架vue-cli系列一：安装与规范

    我很喜欢Vue的一个重要原因就是因为它的vue-cli,这个工具可以让一个简单的命令行工具来帮助我快速地构建一个足以支撑实际项目开发的Vue环境,并不像Angular和React那样要在Yoman上找 ...

  6. 使用Chrome开发者工具调试Android端内网页(微信，QQ，UC，App内嵌页等)

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  7. Ubuntu18.04 下修改 root密码

    首先打开终端输入命令 sudo passwd root 然后依次是当前用户密码,将要设置root密码,确认root密码.切换root看一下 备注: #符号 是系统用户 root$符号 是你创建的用户 ...

  8. MapReduce对交易日志进行排序的Demo(MR的二次排序)

    1.日志源文件 (各个列分别是: 账户,营业额,花费,日期) zhangsan@163.com 6000 0 2014-02-20 lisi@163.com 2000 0 2014-02-20 lis ...

  9. Eclipse 工程目录下的.classpath、.project文件和.settings文件作用

    1..classpath 定义了你这个项目在编译时所使用的$CLASSPATH (注: 每次在更新jar的版本或者增加jar之后,请在SVN提交.classpath文件,否则工程的build path ...

  10. EL表达式报错：  According to TLD or attribute directive in tag file, attribute value does not accept any expressions

    EL表达式报错: According to TLD or attribute directive in tag file, attribute value does not accept any ex ...