文字元素:

<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. hive资料

    Hive基本操作 Hive 解锁操作 之前使用Hive,出现过一种情况:在代码正在执行insert into或insert overwrite时,中途手动将程序停掉,会出现卡死情况,只能执行查询操作, ...

  2. Java Swing实现展示数据,以及过滤排序

    public class RelationCostctrTable extends DefaultTableModel { public RelationCostctrTable(Vector< ...

  3. centos/RHEL 7.6 使用yum安装php7.3(方便wordpress的php7.3需求,并解决了libphp7.so缺失问题)

    我最近想安装一个wordpress, 但是官网介绍需要php7.3以上版本,但是百度了一下,都是要编译安装. 为此,我想,centos..., php... 两大当红辣子鸡没有yum安装方式,简直不可 ...

  4. SQL视图命名规则:一般以V_xxx_xxxxxx

  5. 开发HR人事考试系统介绍

    确定好需要开发的模块以及功能 一套人事考试系统主要模块: 1)组织管理:公司部门成员信息 2)人事管理:人事信息,离职管理,职务管理,岗位管理: 3)考勤管理:班次设置,停工放假,假日设置,刷卡记录, ...

  6. -1.记libgdx初次接触

    学习一门技术最难的是开发环境变量配置和工具配置,以下为我初次接触libgdx时遇到的问题 几个难点记录下 gradle 直接用下到本地,然后放到d盘,链接到就行(gradle-wrapper.prop ...

  7. go语言的运算符

    什么是运算符:运算符用于在程序运行时执行数学或逻辑运算 go语言的运算符如下: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 一,算数运算符 运算符 描述 实例 + 相加 A ...

  8. git撤销commit-hard

    场景: 不小心commit了一个不应该commit的修改,但是还没有push,想撤销那个commit 命令: a)git log b)git reset --hard commit_id 具体步骤如下 ...

  9. 第二次OO总结

    作业5——多线程电梯 好像失忆了,竟然对这三部电梯很陌生,我尽量回忆一下当时挣扎的场景orz 整体思路和第二次电梯差不多,但是将调度器类套在了电梯类里 优点可能是没有无效,足矣!!!缺点emmmm要是 ...

  10. JavaScript基础视频教程总结(131-140章)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...