文字元素:

<p id="yc-msg">你有本事来打我呀!</p>

  

js执行代码:

function ycMsg() {
// 获取 标签
var pObj = document.getElementById('yc-msg');
// 获取文字内容
var text = document.getElementById('yc-msg').innerText;
timeID = setInterval(() => {
var start = text.substring(0, 1);
var end = text.substring(1);
// 拼接字符串
text = end + start;
// 更换符号内容---
pObj.innerHTML = text; }, 400); } ycMsg();//调用函数

已经完成效果!

js代码跑马灯效果-----轮播图字效果!的更多相关文章

  1. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  2. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  3. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  4. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  5. 使用JS实现轮播图的效果

    其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...

  6. jquery里面的attr和css来设置轮播图竟然效果不一致

    /*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...

  7. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  8. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  9. JS应用实例2:轮播图

    在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. Golang:List

    List的接口 func New() *List //创建List func (l *List) Back() *Element //返回List的上一个元素 func (l *List) Front ...

  2. [DBNETLIB][ConnectionOpen(Invalid Instance())] 无效的连接 的解决办法

    Provider=SQLOLEDB.1;Persist Security Info=False;User ID=sa;Data Source=192.168.1.28,1433 连接SQL serve ...

  3. centos7.5 安装mysql8.0

    把这个rpm文件下载下来放到服务器上,或者在linux系统中通过wget命令下载 wget http://dev.mysql.com/get/mysql80-community-release-el7 ...

  4. Quartz错过任务执行时间的处理机制(Misfire处理规则 )

    调度(scheduleJob)或恢复调度(resumeTrigger,resumeJob)后不同的misfire对应的处理规则 CronTrigger withMisfireHandlingInstr ...

  5. powershell脚本找修改的文件

    $sourcedir="D:\workspace" $targetdir="E:\newf" $lastdate="2017-05-19" ...

  6. Vue 去掉#号,让网址像正常的一样

    vue利用hash模式让页面不刷新,但是有时候看起来觉得怪怪的,也可以去掉#,并像#模式一样不刷新页面. 1.在路由里面添加     mode: 'history' 这样就去掉了#号,但是点击页面会发 ...

  7. 别人的Linux私房菜(13)学习Shell脚本

    CentOS6.x以前版本的系统服务启动接口在/etc/init.d/目录下,存放了脚本. Shell脚本因调用外部命令和bash 的一些默认工具,速度较慢,不适合处理大量运算. 执行方式有:直接命令 ...

  8. django学习,session与cookie

    Cookies,某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明.Cook ...

  9. JAVA 8 日期工具类

    JAVA 8 日期工具类 主题描述 JAVA中日期时间的历史 代码成果 主题描述 JAVA的日期时间一直比较混乱,本来以为joda会是巅峰,但是JAVA 8改变了我的思想.但是即便在JAVA 8面前, ...

  10. SAP开发系统中开发和配置客户端请求号变更

    假如102为开发客户端,800为配置客户端 正常操作,创建开发请求,应该在102客户端里去创建,但由于操作疏忽开发请求建在了800客户端,如何调整请求到102? 调整步骤:登陆102,SE09找到80 ...