目标效果：每过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. .net core mvc发布项目到IIS上出现500错误

    如题,我把.net core mvc项目以应用程序方式挂到IIS默认网站下,结果出现了如下错误:HTTP Error 500.0 - ANCM In-Process Handler Load Fail ...

  2. 锚接口(上)——hashchange api 和 $.uriAnchor

    概述 这是我在单页Web应用这本书上看到的方法,并深入的研究了一下,把结果记录在下面,供以后开发时参考,相信对其它人也有用. 说明一下,这个方法已经过时了,H5有更新的方法:history api,我 ...

  3. LabVIEW（十二）：VI本地化-控件标题内容的修改

    一.对于一般LabVIEW的学习,很少遇到本地化的问题但是我们经常会遇到界面控件标题的显示问题.由于各个技术领域的专业性,往往用户对VI界面的显示有自己的要求,其中就包括控件的标题问题,这可以理解成本 ...

  4. .NET 构造DataTable返回多个json值

    有时候我们使用Ajax链接一般处理程序需要返回多个值,然而这些数据并非在一个查询表内,此时便想到构造一个虚拟的DataTable,这样就可以返回多个值了(当然有很多办法,这是其中一种 ). 首先我们需 ...

  5. FF笔试题整理

    一.选择题 1.怎样能唯一确定一颗二叉树? [解析] 只要知道中序遍历顺序,再加上其余两个遍历中任意一个都可以唯一确定一个二叉树.如果不知道中序遍历顺序,则无法确定. [反例] A-B-C,A是跟,B ...

  6. 课程三(Structuring Machine Learning Projects)，第二周（ML strategy（2）） —— 1.Machine learning Flight simulator：Autonomous driving (case study)

    [中文翻译] 为了帮助您练习机器学习的策略, 在本周我们将介绍另一个场景, 并询问您将如何行动.我们认为, 这个工作在一个机器学习项目的 "模拟器" 将给一个任务, 告诉你一个机器 ...

  7. JsExcelXml.js的源码

    var JSXmlExcel = { ConvertXmlDoc: function (text) { var xmlDoc = null; try { xmlDoc = new ActiveXObj ...

  8. mongodb 语句和SQL语句对应（SQL to Aggregation Mapping Chart）

    SQL to Aggregation Mapping Chart https://docs.mongodb.com/manual/reference/sql-aggregation-compariso ...

  9. 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 ...

  10. Spring Boot - 修改Tomcat默认的8080端口

    前言 默认情况下,Spring Boot内置的Tomcat服务会使用8080端口启动,我们可以使用以下任何技巧去更改默认的Tomcat端口: 注:我们可以通过server.port=0配置,去自动配置 ...