js 实现网页一个一个字打印出来的效果_前端根据响应一个字一个字输出_灿尔哈擦苏的博客-程序员宅基地

技术标签: js 实现网页一个一个字打印出来的效果  js  文字逐个显示  

最近看了一个小效果,感觉还挺不错,代码实现起来也挺简单,于是就写了些。

html:

<textarea id="showStr"></textarea> //用来显示逐渐出现的文字
<div style="display:none" id="string">宝贝,我好想好想你,想你想的睡不好觉,想你想的吃不下饭,我爱你爱你爱你,么么么么么么么么,啵啵啵啵啵啵啵
</div>

js:

var index = 0;
var str = document.getElementById("string").innerHTML;
function type() {
if(index == str.length) {
index = 0;
}
document.getElementById("showStr").innerText = str.substring(0, index++);
}
setInterval(type, 200); //通过定时器来让文字逐步显示

这里最主要的就是通过str.substring(x,y)这个函数来进行字符串的截取,然后再通过定时器实现效果,很简单。

今天一口气写了好几篇小文章,都是一些工作中能用的到的小效果。接下来会逐渐的增加一些内容,进行一些框架的学习交流(还在整理中),希望与大家能共同进步,多读指教。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/susuzhe123/article/details/60140081

智能推荐

MCI_OVLY_OPEN_PARMS Structure 结构中的成员 lpstrDeviceType的值_翔云123456的博客-程序员宅基地

MCI 播放设备对应的文件类型在注册表中的位置 lpstrDeviceType Name or constant identifier of the device type. (The name of the device is typically obtained from the registry or SYSTEM.INI file.) If this member is a con

[事件表示] Design and use of the Simple Event Model (SEM)_倪畅的博客-程序员宅基地

事件已成为历史、文化遗产、多媒体和地理等领域数据表示的核心元素。创建简单事件模型(simple event model,SEM)是为了对这些不同领域中的事件进行建模,而不需要对所使用的特定领域词汇表进行假设。SEM的设计基本上是为了保证最大的交互操作性。在本文中,我们讨论了事件模型对web数据的一般要求,并从历史事件和海上安全与安保领域的事件两个用例中给出了实例。结合历史实例,讨论了几种现有事件模型的优缺点。我们讨论了SEM背后的设计决策。SEM与Prolog API相结合,使用户能够创建事件实例,而无需._design and use of the simple event model

根据经纬度获取所在城市以及根据地点获取经纬度_根据经度纬度获取省份_lulu19870526的博客-程序员宅基地

什么是Geocoding?Geocoding API是一个供程序员调用的、http形式的地图服务接口。主要服务那些非网页程序的调用。例如C#、C++、Java等开发语言都能发送http请求且能接收返回数据。用户只需在请求的url字串中拼接好关键字或者经纬度信息,即可获取到相应的百度经纬度或者结构化地理信息。Geocoding API有哪些功能?Geocoding API包括地址_根据经度纬度获取省份

Linux中安装配置hadoop集群(图文搭配详细版)_春树-的博客-程序员宅基地

Linux中安装配置hadoop集群准备工作:创建一个虚拟机,虚拟机名字为hadoop000,创建一个名为hadoop的用户,密码随意​ 软件:SecureCRT ,WinSCP虚拟机使用hadoop用户登陆使用SecureCRT进行终端操作(界面简洁),终端ifconfig查看Linux ip地址,连接SecureCRT.在hadoop...

带你玩转kubernetes-k8s(第49篇:深入分析k8s网络原理-[直接路由,Calico部署])_查看k8s 转发路由表_坚持的道路注定孤独的博客-程序员宅基地

我们知道,docker0网桥上的IP地址在Node网络上是看不到的。从一个Node到一个Node内的docker0是不通的,因为它不知道某个IP地址在哪里。如果能够让这些机器知道对端docker0地址在哪里,就可以让这些docker0互相通信了。这样,在所有Node上运行的Pod就都可以互相通信了。 我们可以通过部署MultiLayer Switch(MLS)来实现..._查看k8s 转发路由表

【OPNET】MANET卫星节点与STK卫星轨道导入问题_stk导入外部航迹数据_我是你的Levi的博客-程序员宅基地

问题1:MANET默认不包含卫星节点 解决方法:步骤1.在创建的场景中插入一个manet_station节点,节点类型为Mobile Node,如图1所示。图1 manet_station节点步骤2.双击插入的manet_station节点,点击命令栏的Interfaces-&gt;Node interfaces,出现如图2所示的属性编辑框,将Node Type栏的satellite对应..._stk导入外部航迹数据

随便推点

【吃亏经验】segment fault 及其原因;stack-overflow 及其原因_怎么这么帅啊的博客-程序员宅基地

文章目录一、 segment fault1、segment fault 起因2、 linux 下的segment fault3、错误引起:二、stack-overflow1、stack-overflow 起因一、 segment fault1、segment fault 起因今天牛客网做笔试的时候,报错segment fault ,起初并不知道什么情况;(不同平台可能隐藏了不同报错的方式)挨个打印发现了是越界问题;之前在windows 环境下越界问题都是报错越界问题;2、 linux 下_segment fault

博科光纤交换机配置及管理 CLI篇_weixin_34037977的博客-程序员宅基地

最近折腾了一下BK300的配置,这篇很实用转载一下本文以Brocade 300 光纤交换机来举例说明。博科交换机的默认IP地址是10.77.77.77,用户名admin,密码:password。1、登陆交换机在网络连接中添加IP地址“10.77.77.**(子网掩码“255.0.0.0)”;开始->运行CMD,输入telnet 10.77.77.77并输入账号密码后,可进入交换机字符管理..._博科交换机 网络进入

charles手机抓包配置教程_charles配置手机抓包_zyanwei2018的博客-程序员宅基地

mac配置charles抓包浏览器和手机_charles配置手机抓包

基于jupyter编程环境下——Python入门:数据类型2(数字)+注释_jupyter转换数据为浮点数_L刘永瑞的博客-程序员宅基地

数据类型2(数字)一、数据类型2:数字二、注释Python资料:Python编程XG:从入门到实践.一、数据类型2:数字在编程中,经常使用数字来记录游戏得分、表示可视化数据、存储Web 应用信息等。Python根据数字的用法以不同的方式处理它们,可执行加(+ ),减(- ),乘(* ),除(/ ),乘方(**)。且支持运算次序。数字有整数和浮点数之分,Python将带小数点的数字都统称为浮点..._jupyter转换数据为浮点数

iOS14发布了!附更新方法,iOS1描述文件_宅哥技术的博客-程序员宅基地

升级方法在最下方哦一图让你看完WWDC20发布的系统!升级方法只需要在宅哥技术公众号发送:【14】或者【体验】即可获取文件! ...

redisson分布式锁与spring注解事务共用产生的一系列问题,及对应解决方案_redisson事务和spring事务_阿啄debugIT的博客-程序员宅基地

前言有锁才有自由,生活中不存在绝对的自由,绝对的自由通常对应的无序和混沌,只有在道德、法律、伦理的约束下的相对自由,才能使人感受到自由。而在多线程编程中,锁是至关重要的,锁就是道德,就是法律约束,没有锁的多线程环境将会是混乱的,所有线程都在争夺资源,最后的结果就是导致系统崩溃,而有了锁之后,多线程环境才能稳定高效的工作。事故现场某些原因,获取锁失败-------没有在至少N/2+1个Redis实例取到锁,或者取锁时间已经超过了有效时间),客户端应该在所有的Redis实例上进行解锁(即便某_redisson事务和spring事务

推荐文章

热门文章

相关标签