js实现打字机效果---Day06

2023-05-16

我常想象这样一幅画面:素雅的大背景,伴着可心的音乐,优雅旋转着的芭蕾舞者,旁边那不断打出的文字,仿佛就这样娓娓道来他们那美美的故事;也常想象:呼喇啦甩动的大旗下,一双双充满希冀的眼神,那不停诉说的,可是他们心中那无限的向往;也会想象:肃穆庄重的殿堂里,温文尔雅的男人,俏丽迷人的女人又为何喜极而泣,那悠悠闪现的,岂不就是他们那美好的希冀和幸福的甜蜜;也曾想象....

思路一开,总像潮水一样澎湃,怎奈这世间如此多的美丽,让人喜不胜收。我喜欢这样,勾勒一幅幅美丽的画面,看着就满满的都是幸福,我试着尝试在网页上把他实现,终于让我找到了,就是用打字机的效果。

那么究竟该怎样去做呢?接下来来实现一下(因为是动态的,就不截取画面了,看不出效果来)

首先:根据想要得到的效果,分析实现的原理

想要的效果就是一个个不断出现的文字:随着时间推移,将需要显现的文字慢慢呈现,而不是一下子全部显示,仅此而已。既然效果有了,我们改如何是实现呢?

将一段文字逐渐显示完全,就是说:先显示部分字符串,然后将之后的字符串不断拼接上;或者说先显示部分,随着时间不同,显示的部分越大。这样我们来简化一点说,就是将这个问题简化到了:字符串的操作;

其次:我们来简单的编写一下

在body中

<div id="myBody" class=".myBody" style="width:500px;min-height:300px;background-color:cyan;"></div>
-----------只是为了显示文字

在js中的实现,这里是重点,也是关键点

<script>
var msg="测试用的语言";
function showMsg(postion,msg,time){
var count=0;
var timer=null;
timer=setInterval(function(){
if(count>msg.length){clearInterval(timer);}
else{postion.innerHTML=msg.substring(0,count);count++}
},time)
}
window.οnlοad=function(){
var myBody=document.getElementById("myBody");
showMsg(myBody,msg,30);
}
</script>
基本原理即是: 定时器+字符创的不同截取

说到这里你会了么,打开你最美的想象力,让我们共同的来感受这个世界的美好吧...



本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js实现打字机效果---Day06 的相关文章

  • 串口打印中途无log出来,显示console:$字样,一段时间后才再显示

    调试时 xff0c 我们在外接串口打印log时 xff0c 发现lk打印完成后跳转到kernel阶段 xff0c 显示console 字样 xff0c 过一段时间后才重新开始打印log xff0c 这样导致我们抓取的log不全 xff0c
  • 【Hexo】域名绑定篇

    关于Hexo的一切 我的Hexo专栏 零 前言 继上篇 xff0c 本篇主要讨论购买域名以及如何绑定并进行解析 一 购买 我这里只推荐两个平台 xff1a 阿里云官网和 腾讯云官网 xff0c 选择你中意的即可 我买的是一个很辣鸡的域名ww
  • 配置一个好看的PowerShell

    工作生活中用到 PowerShell 的时刻其实有很多 xff0c 但是那深蓝色的背景实在让人想吐槽几句 今天我们就来美化一下它 xff0c 几十种花里胡哨的主题任你选择 用到的是oh my posh xff0c 跟oh my zsh类似
  • scikit-learn介绍-非常流行的python机器学习库

    scikit learn是一个建立在Scipy基础上的用于机器学习的Python模块 在不同的应用领域中 xff0c 已经大展出为数众多的基于Scipy的工具包 xff0c 他们统称为Scikits 而在所有的分支版本中 xff0c sci
  • redis

    redis Redis 是一个Key Value 数据库 xff0c 主要用于存储缓存 redis支持的数据类型 xff1a String字符串 xff1a 设置key值 xff1a set key value string类型是二进制安全
  • 多生产者——多消费者问题

    问题背景 假设有四个人 xff1a 父亲 母亲 女儿 儿子 xff0c 和一个空盘子 xff0c 里面最多放一个水果 父亲每次向盘子中放一个苹果 xff0c 女儿只会吃苹果 母亲每次向盘子中放一个橘子 xff0c 儿子只会吃橘子 这个问题可
  • Android-MVVM-Databinding的原理、用法与封装

    前言 说起 DataBinding ViewBinding 的历史 xff0c 可谓是一波三折 xff0c 甚至是比 Dagger Hilt 还要传奇 说起依赖注入框架 Dagger2 Hilt xff0c 也是比较传奇 xff0c 刚出来
  • day03 Python基础

    day03 Python基础 版权声明 xff1a 本博客转载自路飞学城Python全栈开发培训课件 xff0c 仅用于学习之用 xff0c 严禁用于商业用途 xff0c 未经授权 xff0c 严禁转载 欢迎访问路飞学城官网 xff1a h
  • 最新Spire.pdf Spire.Doc Spire.Xls等无水印使用

    Aspose与Spire功能都很强大 xff0c 为什么要选择Spire xff0c Spire支持WPF组件 xff0c Aspose默认没有 新建 net6控制台程序 xff0c 用NuGet包添加Spire PDF引用 添加代码 us
  • 使用Pyinstaller发布带界面的程序(解决找不到文件问题)

    Pyinstaller Pyinstaller可以用来打包python代码 xff0c 生成可执行文件 xff08 主流平台都可以 xff09 xff0c 介绍就不说了 xff0c 可以百度或者去官网看看 xff1a https www p
  • 动态分配内存——new/delete

    动态分配内存 1 使用new分配内存2 使用delete释放内存3 例子 xff1a 数组编译时分配内存和运行时分配内存4 动态数组补充 xff1a 程序的内存分配 1 使用new分配内存 使用格式 xff1a span class tok
  • Spring学习(一) Spring环境配置

    工具原料 xff1a JDK Eclipse IDEA 开始学Spring xff0c 应该已经安好java环境了 xff0c 这里我就不赘述了 xff0c 直接开始开始下一步的教程 配置spring环境需要导入spring相关的jar包
  • vue-lottie动画效果(进阶篇)

    vue lottie动画效果 以下是个人见解部分 个人见解 xff1a 优点 xff1a 简单高效 xff0c 动画文件小 xff0c 丝滑流畅 xff0c 动画可控性强 缺点 xff1a 依赖包非常重 xff0c 对动画要求不高的项目不太
  • Ubuntu18.04设置开机自启动自己的程序、脚本

    Ubuntu18 04设置开机自启动自己的程序 脚本 本文使用的机器是win10 43 Ubuntu18 04双系统 xff0c 虚拟机上的Ubuntu18 04操作一样 xff0c 均可参考此文 参考链接 xff0c 言简意赅 xff0c
  • 【Qt】【QDebug】【日志】实用的Qt日志打印-打印时间-线程-数据等信息

    Qt QDebug 日志 实用的Qt日志打印 打印时间 线程 数据等信息 在开发audio和video相关软件时 xff0c 收发速率很关键 xff0c 我们需要打印时间和线程等相关信息等日志 include lt QDebug gt 获取
  • DNS(域名解析协议)详解

    DNS协议 我们之前已经了解过ARP协议 如果说ARP协议是用来将IP地址转换为MAC地址 xff0c 那么DNS协议则是用来将域名转换为IP地址 xff08 也可以将IP地址转换为相应的域名地址 xff09 我们都知道 xff0c TCP
  • Mybatis之使用注解开发CRUD

    上一篇演示了如何使用XML来操作Mybatis实现CRUD xff0c 但是大量的XML配置文件的编写是非常烦人的 因此 Mybatis也提供了基于注解的配置方式 xff0c 下面我们来演示一下使用接口加注解来实现CRUD的的例子 首先是创
  • 查看windows服务器的I/O的3种方法

    http blog chinaunix net uid 20344928 id 5597137 html 碎碎念 xff1a 感觉第二种简单 windows查看I O的方法有3种 xff1a 1 任务管理器 打开任务管理器 xff0c 点击
  • 【Tensorflow】辅助工具篇——scikit-image介绍

    很多时候我们跑deep learning算法的难点不在于搭建网络 xff0c 而是数据获取与处理 xff0c 当你看到大量的数据却无从下手时该是怎样的心情 xff01 这几篇我将为大家介绍目前很多paper代码复现中比较流行的辅助工具 首先
  • 一劳永逸,wsl2出现“参考的对象类型不支持尝试的操作”的解决办法

    wsl在使用是会出现 参考的对象类型不支持尝试的操作 的故障导致无法使用 出现上述问题原因是使用代理软件 xff0c 或游戏加速服务 xff0c winsock出现问题 可以通过注册表的方式 xff0c 排除从winsock中排除wsl即可

随机推荐