JavaScript实现跑马灯效果

一段简单的代码,实现类似公司大屏幕上“欢迎XX领导莅临指导”,在JavaScript中可以轻松实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<span id="txt"> 恭喜杜杜的老公攒到人生第一个一百万</span>
<script type="text/javascript">function show() {//html中哦通过DOM找到文本内容var content = document.getElementById('txt');var dataString = content.innerText;//让文字动起来var firstChar = dataString[0];var otherChar = dataString.substring(1, dataString.length);var nenwString = otherChar + firstChar//在html中更新内容content.innerText = nenwString;}//定时器setInterval(show,1000);
</script>
</body>
</html>

代码如上
在JavaScript中要写一个函数,函数做的事情就是把第一个字符不断地放到文本的末尾,通过定时器循环调用这个函数即可实现效果,前端代码玩一下很有意思。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/795635.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024.4.5-[作业记录]-day10-CSS 布局模型(层模型)

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 作业 2024.4.5-学习笔记1 CSS定位1.1 相对定位 relative1.2 绝对定位 absolut…

python 进度条如何控制

首先&#xff0c;我们需要创建一个新的python文件&#xff0c;点击工具栏上方的file按钮&#xff0c;然后在弹出的选项中选择新建&#xff0c;找到如图所示的新建python file&#xff0c;创建一个新文件。 按照提示给我们的新文件命名&#xff0c;然后在创建的文件中输入我们需…

C++——位图和布隆过滤器

在C中&#xff0c;哈希这种思想的应用场景有很多&#xff0c;位图就是其中的一种。 位图 位图&#xff1a;位图是一种哈希思想的产物&#xff0c;可以通过它来对数据进行快速的查找的方法&#xff0c;在位图中&#xff0c;有2种状态来表示在或者不在&#xff0c;即1/0。 位图…

刷题日记——由浅入深的大数加法(高精度加法)

例题 代码 #include <cstdio>int main(){long long a,b;scanf("%lld %lld",&a,&b);printf("%lld\n",ab);}例题——高精度加法 编程计算&#xff1a;12345678912345678912121211231212121212121212121222222111112121&#xff1f; 分析 加…

来个自定义的电子木鱼吧

<!DOCTYPE html> <html><head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale1"><title>自定义木鱼</title> </head> <body style"background-…

题目:小怂爱水洼(蓝桥OJ 4234)

问题描述&#xff1a; 解题思路&#xff1a; 记录每个格子的水量&#xff0c;再比较找最大水量。计算水量使用dfs。 注意点&#xff1a;属于同一个水洼的每个格子&#xff0c;只需要计算一次dfs就好了&#xff0c;因为每个格子的dfs都相同 。 代码&#xff1a; #include <b…

VLAN间路由

部署了VLAN的传统交换机不能实现不同VLAN间的二层报文转发&#xff0c;因此必须引入路由技术来实现不同VLAN间的通信。VLAN路由可以通过二层交换机配合路由器来实现&#xff0c;也可以通过三层交换机来实现&#xff1b; VLAN间通讯限制 每个VLAN都是一个独立的广播域&#xff…

如何获取 Microsoft 365 Copilot

您已观看视频&#xff0c;也听到了相关讨论&#xff0c;您迫不及待地想要使用 Microsoft 365 Copilot。但在哪里可以找到它&#xff1f;何时可以使用它&#xff1f;本文提供详细信息。 可以执行哪些操作&#xff1f; Microsoft 365 Copilot 将无缝集成在用户每天使用的应用当…

rust 面向对象编程特性、模式与模式匹配、高级特征

面向对象编程OOP 学习了结构体、枚举&#xff0c;它们可以包含自定义数据字段&#xff0c;也可以定义内部方法&#xff0c;它们提供了与对象相同的功能。 面向对象的四大特征&#xff1a;封装、继承、多态 通过pub标记为公有的结构体&#xff0c;在其他模块中可以访问使用这…

红黑树平衡艺术:最大化与最小化红色结点比值的策略与实现

红黑树平衡艺术&#xff1a;最大化与最小化红色结点比值的策略与实现 一、 最大比值的红黑树构造1.1 伪代码示例&#xff1a;1.2 C代码示例&#xff1a; 三、最小比值的红黑树构造3.1 伪代码示例&#xff1a;3.2 C代码示例&#xff1a; 四、结论 红黑树是一种自平衡的二叉搜索树…

electron入门教程

Electron 快速上手教程 electron 简介 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用macOS和Linux不需要本地开发经验 Elec…

云知识库真的对企业很重要,提高工作效率的利器!

在今天的信息化时代&#xff0c;大数据、人工智能和机器学习等科技概念席卷各行各业。而作为这些潮流中不可忽视的一环&#xff0c;云知识库也越来越受企业们的青睐。云知识库&#xff0c;简单来说&#xff0c;就是在云端存储、管理和检索企业数据资讯的一种服务。那么云知识库…

开源中文大语言模型汇总

基于英文模型增量预训练的中文模型 LLama系列&#xff1a; llama作为开源社区的宠儿&#xff0c;有许多基于它的中文模型&#xff0c;下面列举比较流行的一些模型 hfl/chinese-llama-2&#xff1a;https://github.com/ymcui/Chinese-LLaMA-AlpacaLinly-Al/Chinese-LLaMA-2&a…

dfs,LeetCode 1026. 节点与其祖先之间的最大差值

一、题目 1、题目描述 给定二叉树的根节点 root&#xff0c;找出存在于 不同 节点 A 和 B 之间的最大值 V&#xff0c;其中 V |A.val - B.val|&#xff0c;且 A 是 B 的祖先。 &#xff08;如果 A 的任何子节点之一为 B&#xff0c;或者 A 的任何子节点是 B 的祖先&#xff0…

Linux高级IO——多路转接之select

文章目录 0. 前言1. 五种IO模型2. 非阻塞IO3. selectselect_serverselect缺点 0. 前言 在应用层用户调用read或者write方法读写的时候&#xff0c;本质上是是拷贝函数。 例如调用read的时候&#xff0c;如果底层接收缓冲区没有数据&#xff0c;那么就会阻塞式的等待&#xff1…

Berkeley CS

Eta Kappa Nu (HKN), Mu Chapter61 A计算机科学 61A — 计算机程序的结构和解释&#xff08;4 学分&#xff09; Python4 61 B计算机科学 61B — 数据结构&#xff08;4 学分&#xff09; Java4 61 C计算机科学 61C — 机器结构&#xff08;4 学分&#xff09;4 CS 70计算机…

真--开源个人收款系统方案--部署方案

继上文:真--个人收款系统方案,今天主要推出部署方案 1.下载源码 首先需要下载源码,源码地址:PayServer: 个人收款系统方案 - Gitee.com 并且pip下载依赖库: Flask2.5.1 Flask-Cors3.0.10 gevent23.6.0 websockets10.9 urllib31.26.1 2.修改配置 路径下有两个py文件&#xf…

Docker简单介绍、特点、与虚拟机技术的区别、核心概念及在CentOS 7 中安装卸载Docker

目录 一、什么是Docker 二、特点 三、Docker与虚拟机技术的区别 四、Docker的核心概念 Docker仓库与仓库注册服务器的区别 五、CentOS7在线安装Docker 安装配置 卸载 一、什么是Docker Docker是一个开源的容器化平台&#xff0c;用于打包、部署和运行应用程序。它利用…

C语言——找单身狗1

题目描述&#xff1a; 在一个整形数组中&#xff0c;只有一个数字出现一次&#xff0c;其他数组都是成对出现的&#xff0c;找出那个只出现一次的数字。 例如&#xff1a; 数组中&#xff1a;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;4&#xff0c;3…

【airtest】自动化入门教程(四)Poco元素定位

目录 一、基础操作 1、通过属性名等方式 2、通过属性组合 3、子节点方式 4、子节点加属性组合方式 5、孙节点offspring 6、兄弟节点sibling 7、父节点parent 8、正则表达式 9、直到某个元素出现 10、直到某个元素消失 二、通过局部坐标定位 1、使用局部坐标系的cli…