<!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. BZOJ 3673 可持久化并查集 by zky && BZOJ 3674 可持久化并查集加强版 可持久化线段树

    既然有了可持久化数组,就有可持久化并查集.. 由于上课讲过说是只能按秩合并(但是我也不确定...),所以就先写了按秩合并,相当于是维护fa[]和rk[] getf就是在这棵树中找,直到找到一个点的fa ...

  2. BufferedReader readLine

    import org.apache.commons.codec.binary.Base64;import org.apache.commons.codec.digest.DigestUtils; In ...

  3. js——swiper.js

    一款用于PC端和移动端的滑动效果插件. 中文网站:http://www.swiper.com.cn/#   点击中文教程.使用方法 1. initialSlide:初始索引值,从0开始 2.pagin ...

  4. Matrix Power Series POJ - 3233 矩阵幂次之和。

    矩阵幂次之和. 自己想着想着就想到了一个解法,但是还没提交,因为POJ崩了,做了一个FIB的前n项和,也是用了这个方法,AC了,相信是可以得. 提交了,是AC的 http://poj.org/prob ...

  5. 使用PHP导入Excel和导出数据为Excel文件

    有时需要将Excel表格的数据导入到mysql数据库中,我们使用PHP的一个开源项目PHP-ExcelReader可以轻松实现Excel的导入.另外将mysql数据导出为Excel与本站上篇文章中导出 ...

  6. Dede友情链接和分页列表和内容分页去掉小圆点LI标签

    我用了一个比较老式的模板,友情链接和列表页底下的一段分页导航会自动获取LI标签,导致错位.每段文字前还多出一个可恶的黑色实心小圆点,心想肯定是LI标签在搞怪,于是把模板文件和样式文件都翻看了一个底朝天 ...

  7. <s:property>的用法

    1,访问Action值栈中的普通属性: <s:property value="attrName"/> 2,访问Action值栈中的对象属性(要有get set方法):  ...

  8. Pod管理的iOS项目修改工程名

    声明:本文大部分内容来自于以下网址,其余的部分是自己尝试的总结和补充. http://www.jianshu.com/p/5f088acecf64 完整修改iOS工程名1 http://www.cnb ...

  9. Arduino连接pH计

    关于arduino连接ph,核心的东西就是对ph传感器返回的信号值进行一系列的操作,注意因为返回的信号很弱,而且外部环境对其影响也很大,所以需要在电路设计上加入一些功能,比如信号放大.滤波等,电路设计 ...

  10. HTML5&CSS挑战

    地址:https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp 开始学习HTML标签:欢迎来到编程训练营的第一个编程挑战!你可以 ...