<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="i1" style="width: 400px;

 height: 300px;

 position: absolute;

 left: 50%;

 top: 50%;

 margin-left: -200px;

 margin-top: -150px; ">欢迎任明霞莅临指导

 </div>

 <script>

     function f() {

         //根据id获取所对应的div,document意思是去整个html文档中找，getElementById是根据ID

         var tag = document.getElementById('i1')

         //拿到div中的文本，注意innertext方法没有括弧

         var content = tag.innerText

         //获取它这个字符串的第一个文字

         var z =content.charAt(0)

         //获取这个文本除第一个字以外的文本，用substring给它起始位置

         var  l = content.substring(1,content.length)

         //把第一个字符放到最后一位拼接起来

         var new_content = l+z

         //用新生成new_content把div中的文本替换掉

         tag.innerText = new_content

     }

     //setInterval是个定时器，第一个参数是要执行的内容，第二个参数是执行间隔，单位为毫秒

     setInterval('f()',100)

 </script>

 </body>

 </html>

JavaScript设置div中的文字滚动起来 实现滚动效果的更多相关文章

  1. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  2. 设置div中的div居中显示

    设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...

  3. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  4. 禁止鼠标多次点击选中div中的文字

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...

  5. CSS之user-select——设置标签中的文字是否可被复制

    详细介绍请参考 http://www.css88.com/book/css/properties/user-interface/user-select.htm CSS样式 user-select:no ...

  6. div中让文字垂直居中

    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...

  7. 如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  8. css之div中纯文字单行和多行垂直居中

    先上效果图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  9. 设置div中文字超出时自动换行

    一.对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准.#wrap{white-space:normal; wid ...

随机推荐

  1. 09-----JS事件流的概念（重点）

    在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 时间的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...

  2. jquery——制作置顶菜单

    置顶菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. Java集合——集合框架Set接口

    1.Set接口 一个不包含重复元素的collecyion.更确切的讲,set不包含满足e1.equals(e2)的元素e1和e2,并且最多包含一个null元素. 2.HashSet 类实现Set接口, ...

  4. JDBC让java程序连上数据库(mysql数据库)

    一.小论异常: 其实JDK已经提供了一组API让java程序连上数据库,并执行SQL语句,其实说起来也蛮简单的,但是绝对是一个细致活,因为稍不留神,异常就铺天盖地的来了,下面说说这些异常吧(声明一下: ...

  5. 利用BenchmarkDotNet 测试 .Net Core API 同步和异步方法性能

    事由: 这两天mentor给我布置了个任务让我用BenchmarkDotNet工具去测试一下同一个API 用同步和异步方法写性能上有什么差别. 顺带提一下: 啊啊啊啊 等我仔细看文档的时候文档 发现它 ...

  6. Javascript Events

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件句柄 html4.0的新特性之一是有能力使html事件触发浏览器中的动作action,比如当用户点击某个html元素时启动一段Ja ...

  7. 使用HTML5 canvas做地图（3）图片加载平移放大缩小

    终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...

  8. Qt安装教程

    一.Qt下载 官网下载链接http://download.qt.io/archive/qt/,下载最新版 5.10 官网的下载网站有的时候可能会抽风,也可以选择国内的镜像下载源http://mirro ...

  9. redis在Windows下以后台服务一键搭建集群(单机--伪集群)

    redis在Windows下以后台服务一键搭建集群(单机--伪集群) 一.概述 此教程介绍如何在windows系统中同一台机器上布置redis伪集群,同时要以后台服务的模式运行.布置以脚本的形式,一键 ...

  10. 再回首win98

    因为一个软件只能运行在win98上,所以上个win98虚拟机. 下载的是经典的Win98.SE.iso 307M. 真是小巧呀,感慨现在的win8.1的3.69G,真是没法比. 原来是没有用过老古董的 ...