欢迎来的我的小院，恭喜你今天又要涨知识了！

案例内容

利用JavaScript实现文字逐步展现的动画效果。

演示

学习

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>小院里的霍大侠</title>

  </head>

  <body>

    <div class="container"></div>

  </body>

  <script>

    const containerEI=document.querySelector(".container");

    const careers=["跟着我","每天学习一点点","让你不再枯燥","不再孤单"];

    let careerIndex=0;

    let characterIndex=0;

    updateText();

    function updateText() {

      characterIndex++;

      containerEI.innerHTML=`

      <h1>欢迎来到我的小院${careers[careerIndex].slice(0,characterIndex)}</h1>

      `;

      if(characterIndex===careers[careerIndex].length){

        careerIndex++;

        characterIndex=0;

      }

      if(careerIndex===careers.length){

        careerIndex=0;

      }

      setTimeout(updateText,400);

    }

  </script>

  <style>

    body {

      margin: 0;

      display: flex;

      justify-content: center;

      height: 100vh;

      align-items: center;

      background-color: #fd946a;

      font-family: "Permanent Marker", cursive;

    }

  </style>

</html>

总结思考

学习点：
1、document.querySelector()返回container元素的信息
2、innerHTML：更改html元素的内容，可以设置或返回表格行的开始和结束标签之间的HTML
3、slice(参数1，参数2) :从已有的数组中返回选定的元素
参数1：从何处开始选取
参数2：从何处结束选取
4、setTimeout()：定时执行一个函数或指定的一段代码

使用JavaScript完成文字的逐步展现，可以做一个简短的动画，让界面更加生动有趣。

关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单..

全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信：huodaxia_xfeater
二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号：有个小院（微信公众号：yougexiaoyuan）
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）

Web入门：JavaScript文字动画的更多相关文章

  1. 奇思妙想 CSS 文字动画

    之前有些过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文 ...

  2. 松软科技Web课堂:JavaScript HTML DOM 动画

    基础页面 为了演示如何通过 JavaScript 来创建 HTML 动画,我们将使用一张简单的网页: 实例 <!DOCTYPE html> <html> <body> ...

  3. 8、web入门回顾/ Http

    1 web入门回顾 web入门 1)web服务软件作用: 把本地资源共享给外部访问 2)tomcat服务器基本操作      : 启动:  %tomcat%/bin/startup.bat 关闭: % ...

  4. 2015年10个最佳Web开发JavaScript库

    2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...

  5. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  6. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  7. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  8. Web入门

    目录 Web入门 学习web路线 前端基础 三剑客的作用 BS架构 数据格式 HTTP协议 四大特性 数据格式 HTTP 状态码分类 状态码列表 案例:简易的BS架构 Web入门 什么是前端? 任何与 ...

  9. Web 页面如何实现动画效果

    Web 页面可以使用多种方式实现动画效果,其中最常用的有两种: CSS 动画:通过 CSS 中的 transition 和 animation 属性来实现动画效果.CSS 动画实现起来简单,性能消耗小 ...

  10. .NET Web入门到高级路线（新版本）

    .NET Web入门到高级路线 C# 基础语法 .NET Core 基础知识 ASP.NET Core基础知识概述 Blazor ASP.NET Core 官方文档 ORM FreeSql Entit ...

随机推荐

  1. kafka搭建 一、单机版

    系列导航 一.kafka搭建-单机版 二.kafka搭建-集群搭建 三.kafka集群增加密码验证 四.kafka集群权限增加ACL 五.kafka集群__consumer_offsets副本数修改 ...

  2. freeswitch xml_rpc模块

    概述 freeswitch有非常多的周边模块,给我们提供各种各样的功能,有些功能在适当的场景下可以极大的方便我们的开发和应用. 今天我们介绍一个不常用的模块mod_xml_rpc. freeswitc ...

  3. 同步FIFO设计

    FIFO有一个读口和一个写口,读写时钟一致是同步FIFO,时钟不一致就是异步FIFO IP设计中通常使用的是同步FIFO 异步FIFO通常使用在跨时钟域设计中 RAM(Random Access Me ...

  4. javaweb 项目!号 解决方案

    1:右击项目工程名称2:Properties3:  Jvav Build Path4:  Libraries5:  Add External JARS6:  找到"E:\apache-tom ...

  5. 【OpenVINO】基于 OpenVINO Python API 部署 RT-DETR 模型

    目录 1. RT-DETR 2. OpenVINO 3. 环境配置 3.1 模型下载环境 3.2 模型部署环境 4. 模型下载与转换 4.1 PaddlePaddle模型下载 4.2 IR模型转换 5 ...

  6. Nginx的日志处理

    Nginx的日志处理 背景 之前一直被各种咨询nginx的使用问题. 大部分都是性能, 加模块, 以及一些tcp端口等的问题. 其实这些都还好, 还有一个比较麻烦的问题时日志相关的. nginx的日志 ...

  7. K8S_IPV6 POD与数据库联通方法以及快速网络调试的一个思路

    K8S_IPV6 POD与数据库联通方法以及快速网络调试的一个思路 背景 前端时间搭建了一套K8S only IPV6 Single Stack的测试环境 因为自己长时间不搞K8S了, 并且IPV6的 ...

  8. [转帖]Tomcat部署及优化

    目录 一.Tomcat简介 1 Tomcat的三大核心组件 2 Java Servlet 3 JSP全称Java Server Pages 4 Tomcat 功能组件结构 5 Tomcat 请求过程 ...

  9. [转帖]Linux下进程管理知识（详细）总结

    一.简介 本文主要详细介绍进程相关的命令的使用.进程管理及调度策略的知识. 二.常用的命令解析 1.ps命令 命令选项 解析 -a 显示一个终端所有的进程 -u 显示进程的归属用户和内存占用情况 -x ...

  10. [转帖]nginx 启动、重启、关闭命令详解

    https://www.jianshu.com/p/d70006f18a6d 作者:Gakki nginx 命令详解 输入命令:nginx -h   nginx -h -?,-h:查看帮助 -v:显示 ...