<!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. context.xml

    <?xml version='1.0' encoding='utf-8'?> <!-- Licensed to the Apache Software Foundation (ASF ...

  2. div可编辑 可拖动

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.可编辑: <div id="move" contentEditable="true">可编 ...

  3. Unity MonoBehaviour.Invoke 调用

    使用 Invoke() 方法需要注意 3点: 1 :它应该在 脚本的生命周期里的(Start.Update.OnGUI.FixedUpdate.LateUpdate)中被调用: 2:Invoke(); ...

  4. java里如何实现循环打印出字符或字符数组里的内容

    不多说,直接上干货! java里如何实现循环打印出字符里的内容 没写,暂时不会 java里如何实现循环打印出字符数组里的内容 public class test { public static voi ...

  5. flask --db-Column属性

    db.Column 中其余的参数指定属性的配置选项. 选项名 说 明 primary_key 如果设为 True,这列就是表的主键 unique 如果设为 True,这列不允许出现重复的值 index ...

  6. [LeetCode]3. Longest Substring Without Repeating Characters无重复字符的最长子串

    Given a string, find the length of the longest substring without repeating characters. Example 1: In ...

  7. 第2章 TCP-IP的工作方式

    第2章 TCP-IP的工作方式 TCP/IP协议系统 为了实现TCP的功能,TCP/IP的创建者使用了模块化的设计.TCP/IP协议系统被分为不同的组件,每个组件分别负责通信过程的一个步骤.这种模块化 ...

  8. axios拦截器+mockjs

    //main.js中 //引入你mock.js文件 require('./mock.js') //封装api请求 //src/axios/api.js import axios from 'axios ...

  9. path的join和resolve

    连接路径:path.join([path1][, path2][, ...]) path.join()方法可以连接任意多个路径字符串.要连接的多个路径可做为参数传入. path.join()方法在接边 ...

  10. Android rxjava2的disposable

    rxjava+retrofit处理网络请求 在使用rxjava+retrofit处理网络请求的时候,一般会采用对观察者进行封装,实现代码复用和拓展.可以参考我的这篇文章:rxjava2+retrofi ...