纯js实现打字机效果

2024-10-28 13:03:16

本文实例为大家分享了js实现打字机效果的具体代码，供大家参考，具体内容如下

效果图

应用场景

用处不大，只是看到网上有类似的效果，写了四五十行看不懂的代码，于是尝试能不能简单的实现

html

<h2 id="text-box"></h2>
<!--一行也是代码-->
css

        h2 {
   width: 800px;
   line-height: 40px;
   border-bottom: 1px solid;
   margin: 200px auto;
   font-size: 24px;
  }

  .animate {
   display: inline-block;
   padding: 0 5px;
   vertical-align: 3px;
   font-size: 20px;
   font-weight: normal;
  }

  .animate.on {
   animation: fade 1.5s infinite forwards;
  }

  @keyframes fade {
   from {
    opacity: 0;
   }
   to {
    opacity: 1;
   }
  }

let textBox = $('#text-box');
let index = 0;
let str = 'Welcome to my website!';

  let len = str.length;

  function input() {

   textBox.html(str.substr(0, index) + '<span class="animate">|</span>');

   setTimeout(function() {
    index++;

    if(index === len + 1) {
     $('.animate').addClass('on');
     return;
    }

    input();

   }, Math.random() * 600)

   console.log(index);
  }

  input();

实现原理

通过定时器结合字符串截取实现类似于打字机的顿挫感，并通过递归累加index。相当于第1s时，截取一个字节，第二秒时，截取两个字节，以此类推……定时器时间取随机数，模拟打字的停顿感更好。递归调用中加结束循环条件，结束之前启动动画，模拟光标的跳动。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

javascript之textarea打字机效果提示代码推荐

比较不错的应用 function $(id){return document.getElementById(id);} var msgall="一个专业的收藏精品脚本学习资料的网站,修正错误,努力打造精品脚本学习站,我们将会为大家附上游戏脚本资源,源码,软件等信息" var msg = "输入问题内容,点击"我要提问"." ; var interval = 100 var spacelen = 100; var space10=" &q
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.具体的链接我写在下方. 一.前言相信大家都还记得吧,在某些新闻里会有一些惨不忍睹的结果是用像打字机一样的方式把文字弄出来.那么今天的主要目的就是要办到这个. 就在9月5日的时候,我在办公室里起了个做这种程序的念头,并且有了点思路.我首先想用调margin的方法,按理说是作出来了,但很不让人满意,毕竟很麻烦,并且技术也差.所以我打算用上数组和循环.9月13日我抽空写出来了,但由于这几天很忙,基本上在工
js打字机效果代码

Type Writea{text-decoration:none} // please keep these lines on when you copy the source // made by: Nicolas - http://www.javascript-page.com var current = 0 var x = 0 var speed = 70 var speed2 = 2000 function initArray(n) { this.length = n; for (var
JS实现的打字机效果完整实例

本文实例讲述了JS实现的打字机效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the
纯js实现打字机效果

本文实例为大家分享了js实现打字机效果的具体代码,供大家参考,具体内容如下效果图应用场景用处不大,只是看到网上有类似的效果,写了四五十行看不懂的代码,于是尝试能不能简单的实现 html <h2 id="text-box"></h2>  css h2 { width: 800px; line-height: 40px; border-bottom: 1px solid; margin: 200px auto; font-
纯js实现手风琴效果

本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效果这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis
纯js实现手风琴效果代码

我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果. HTML代码如下结构非常简单就5个li盒子,js代码会渲染图片上去 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)

核心代码: <script> function removeTransition(event) { if (event.propertyName !== 'transform') return; // 过滤其中一种事件 event.target.classList.remove('playing'); // 移除高亮的样式 } function playSound(event) { const audio = document.querySelector(`audio[data-key=&qu
纯JS半透明Tip效果代码

Test function opacity(id, opacStart, opacEnd, millisec) { //speed for each frame var speed = Math.round(millisec / 100); var timer = 0; //determine the direction for the blending, if start and end are the same nothing happens if(opacStart > opacEnd)
jquery库文件略庞大用纯js替换jquery的方法

jquery库文件略庞大,在某些情况下,需要尽量减少加载的文件(文件大小),需要用纯js来编写效果 $('#layer') document.getElementById('layer') $('#layer span') var layer = document.getElementById('layer'); var span = layer.getElementsByTagName('span'); $('#inner').parent() document.getElementById(
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)

JavaScript30 – 一个月纯 JS 挑战中文指南 JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战.项目免费提供了 30 个视频教程.30 个挑战的起始文档和 30 个挑战解决方案源代码.目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用 https://github.com/soyaine/JavaScript30 中文指南作者:缉熙Soyaine JavaScript30 教程作者:Wes Bos 完整指南在 GitHub
纯js+html和纯css+html制作手风琴效果

本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效果这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis
纯JS打造网页中checkbox和radio的美化效果

图片素材: 效果图: <head> <style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5% } LABEL { MARGIN-RIGHT: 1.2em } .custom-checkbox { POSITION: relative } .custom-rad

纯js实现打字机效果

效果图

应用场景

实现原理

相关推荐

随机推荐