文字元素:

<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. 杨其菊201771010134《面向对象程序设计(java)》第十四周学习总结

    第十四周学习总结 第一部分:理论知识 理论知识:本周学习Swing用户界面 内容:Swing与模型-视图-控制器设计模式:布局管理概述:文本输入 :选择组件:菜单:复杂的布局管理:对话框: 第二部分: ...

  2. C# 互通操作 (一)

    回顾一下自己学习的内容然后从互通的基础案例开始写起. 这次实现一个很简单的互通demo,就是 在unity里  在c#里调用windows窗体的MessageBox 消息提示 public class ...

  3. canvas用数组方式做出下雨效果

    效果图 1.做出canvas画布和声明一个用来存储雨滴的数组 var c=document.getElementById('myCanvas'); var ctx= c.getContext('2d' ...

  4. Linq语言,由红色部分可直接代替绿色(List,dictionary)

    /// <summary> /// 获取最近5分钟缓存的车量 /// </summary> /// <param name="carNo">&l ...

  5. Web性能和负载测试工具补充

    压力测试文档:https://yq.aliyun.com/articles/377543https://www.cnblogs.com/ahjxxy/archive/2012/09/17/268899 ...

  6. 京东Alpha平台开发笔记系列(一)

    2018京东Alpha开发者大赛是由京东智能面向广大开发者举办的大型语音技能开发比赛,参赛者将通过Skill开放平台开发技能,在实现开发者自身价值的同时,为京东智能活跃用户提供更优质.更便捷.更智能的 ...

  7. How to setup Visual Studio without pain

    Visual Studio (VS) can be very hard to install. If you are lucky, one whole day may be enough to ins ...

  8. Windows + Apache + WSGI 部署Django

    注意Python Apache和mod_wagi的版本要一致哦 1.安装Apache服务器(下载后,解压即可,目录不能有中文) 2.安装mod_wsgi (pip install 它的路径) 3.打开 ...

  9. linux_批量关闭进程

    以下环境是 fedora24 linux 系统中的情况: 仿真中遇到意外弹出上百个图片,无法一下全部关闭. 可以使用: ps -ef|grep LOCAL=NO|grep -v grep|cut -c ...

  10. 31.Stack

    在Java中Stack类表示后进先出(LIFO)的对象堆栈.栈是一种非常常见的数据结构,它采用典型的先进后出的操作方式完成的.每一个栈都包含一个栈顶,每次出栈是将栈顶的数据取出,如下: Stack通过 ...