JQuery 打字机

2025年3月17日 | 阅读 8 分钟

jQuery Typewriter 是一个简单而强大的插件，可以实现酷炫的打字机效果。它是一个轻量级的 jQuery 插件，允许你在文本数组上应用人类打字/删除效果。在本文中，我们将详细了解 jQuery Typewriter。

以下是 jQuery Typewriter 的示例。

示例 1

<! DOCTYPE html>
<html>
	<head>
		<title> jQuery typewriter Example </title>
		<meta charset = "UTF-8" />
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"> </script>
<style>
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
.typewriter {
  background-color: #fff;
  min-width: 500px;
  padding: 1em 2em 1em 1.5em;
  border: solid 1px #e6e6e6;
  border-radius: 2.8em;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25);
  margin: 2em;
  display: flex;
  align-items: center;
}
html {
  margin: 0;
  height: 100%;
  text-align: center;
  font-family: 'Oxygen Mono', monospace;
  color: #999;
}

h1  {
  line-height: 1em; 
  padding-bottom: 1px;
  text-transform: none;
  font-size: 1.7em;
 font-weight: bold;
  font-style: italic;
 font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
}
p {
  text-align: left;
  margin: 0;
  text-transform: lowercase;
  font-size: 10pt;
  font-weight: 900;
  width: 50%;
  display: none;
}
#table {
	display: table;
	width: 100%;
	height: 100%;
  background-color: #e5e5e5;
}
#centeralign {
	display: table-cell;
	vertical-align: middle;
}
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}

</style>
<body>
<h1> Example </h1>
<h2> JQuery Typewriter </h2>
<div id = "table">
  <div id = "centeralign">
    <h1> Sample typing effect. </h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante arcu, dignissim non risus id, posuere efficitur felis. Vestibulum arcu diam, semper non ipsum quis, dictum ultricies diam. </p>
  </div>
</div>
<script>
function typeEffect(element, speed) {
	var text = element.innerHTML;
	element.innerHTML =  " ";
	var i = 0;
	var timer = setInterval(function() {
    if (i < text.length) {
      element.append(text.charAt(i));
      i++;
    } else {
      clearInterval(timer);
    }
  }, speed);
}
var speed = 75;
var h1 = document.querySelector('h1');
var p = document.querySelector('p');
var delay = h1.innerHTML.length * speed + speed;
typeEffect(h1, speed);
setTimeout(function(){
  p.style.display = "inline-block";
  typeEffect(p, speed);
}, delay);
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 插件创建了一个简单的打字机效果。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>
<html>
	<head>
		<title> jQuery typewriter Example </title>
		<meta charset = "UTF-8" />
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"> </script>
<script src = "https://rawgit.com/Ashish-Bansal/jquery-typewriter/master/jquery.typewriter.js" defer = " "> </script>
<style>
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
#typewriter-prefix {
text-align: left;
 color: #E8175D;
}
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
#typewriter-suffix {
  color: white;
}
#typewriter-text {
  color: #c8c7c7;
}
#typewriter-prefix, #typewriter-text{
  font-weight: 400;
}
.flexboxcontainer {
    min-height: 500px;
  display: flex;
  padding-left: 20%;
 align-items: center;
  justify-content: center; 
}
h1 {
  font-size: 2em;
}
body {
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
</style>
<body>
<h1> Example </h1>
<h2> JQuery Typewriter </h2>
<div class= "flexboxcontainer">
  <h1> hello  </h1> <h1 id="typewriter"> </h1>
</div>
<script>
$(document).ready(function() {
    $("#typewriter").typewriter({
        prefix : "Ram",
        text : ["hii", "hie", "hy", "byee"],
        typeDelay : 100,
        waitingTime : 1500,
        blinkSpeed : 800
    });
});
</script>
</body>
</html> 

说明

在上面的示例中，我们使用 jQuery Typewriter 插件创建了一个带有删除效果的简单打字机效果。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
	<head>
		<title> jQuery typewriter  Example </title>
		<meta charset = "UTF-8" />
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"> </script>
<style>
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
h1 {
  line-height: 1em; 
  padding-bottom: 1px;
  text-transform: none;
  font-size: 1.7em;
 font-weight: bold;
  font-style: italic;
 font-family: "Lucida Console", "Courier New", monospace;
  color: white; 
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
}
.typewriter {
  background-color: #fff;
  min-width: 500px;
  padding: 1em 2em 1em 1.5em;
  border: solid 1px #e6e6e6;
  border-radius: 2.8em;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25);
  margin: 2em;
  display: flex;
  align-items: center;
}
.wrapper {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.centeredBox {
	width: 100%;
	text-align: center;
}
#typewriter  {
  line-height: 2em; 
  padding-bottom: 5px;
  text-transform: none;
  font-size: 1.7em;
 font-weight: bold;
  font-style: italic;
 font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
}
.cursor {
	border-left: 4px solid white;
}
</style>
<body>
<h1> Example </h1>
<h2> Jquery Typewritter </h2>
<div class = "wrapper">
	<div class = "centeredBox"> 
		<span id = "typewriter" data-array = " "> </span>
		<span class = "cursor"> </span>
	</div>
</div>
<script>
var typeWriterElement = document.getElementById('typewriter');
var textArray = ["Hey, I'm ram.","I like JavaScript.","I Love to Develop.", "I like this Typewriter."];
function delWriter(text, i, cb) {
	if (i >= 0 ) {
		typeWriterElement.innerHTML = text.substring(0, i--);
				var rndBack = 10 + Math.random() * 100;
		setTimeout(function() {
			delWriter(text, i, cb);
		},rndBack); 
	} else if (typeof cb == 'function') {
		setTimeout(cb,1000);
	}
};
function typeWriter(text, i, cb) {
	if ( i < text.length+1 ) {
		typeWriterElement.innerHTML = text.substring(0, i++);
				var rndTyping = 250 - Math.random() * 100;
		setTimeout( function () { 
			typeWriter(text, i++, cb)
		},rndTyping);
	} else if (i === text.length+1) {
		setTimeout( function () {
			delWriter(text, i, cb)
		},1000);
	}
};
function StartWriter(i) {
	if (typeof textArray[i] == "undefined") {
		setTimeout( function () {
			StartWriter(0)
		},1000);
	} else if(i < textArray[i].length+1) {
		typeWriter(textArray[i], 0, function () {
			StartWriter(i+1);
		});
	}  
};
setTimeout( function () {
	StartWriter(0);
},1000);
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 插件创建了一个简单的打字机效果。

输出

以下是这个例子的输出。

示例 4

<! DOCTYPE html>
<html>
	<head>
		<title> jQuery typewriter Example </title>
		<meta charset = "UTF-8" />
		<script src = "typewriter.js"> </script>
<link href = "https://www.jqueryscript.net/css/jquerysctipttop.css" rel = "stylesheet" type = "text/css">
	<link href = 'https://fonts.googleapis.com/css?family=Cutive+Mono' rel = 'stylesheet' type = 'text/css'>


<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"> </script>
<script src = "https://rawgit.com/Ashish-Bansal/jquery-typewriter/master/jquery.typewriter.js" defer = " " > </script>
<style>
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
body {
	font-family: 'Cutive Mono', 'monospace';
  background: gray;
}
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
.computer {
	color: whitesmoke;
	background-color: black;
	width: 880px;
	height: 450px;
	margin: 0 auto;
  margin-top: 70px;
	border: 40px solid #0E0D0D;
	border-radius: 20px;
	padding: 30px;
	font-size: 1.5em;
}
.green {
	color: lime;
}
.purple {
	color: yellow;
}
h1  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
</style>
<body>
<h1> Example </h1>
<h2> JQuery Typewriter </h2>
	<div class = "computer">
		<span> <span class = "green"> ABOUT ME </span> : <span class = "purple"> ~ </span> $ </span>
		<span class = "typewriter">
Hi, this is just a test message...
		</span>
	</div>
 <script>
	$(function() {
    $(".typewriter").typewriter({'speed':100});
  });
  </script>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<script>
(function($, w, d, undefined) {
  function typewriter() 
    var self = this, speed;
    function init(element, options) {
      var str;
      var indice = 0;
      self.options = $.extend( {}, $.fn.typewriter.options, options );
      $currentElement = $(element);
      elementStr = $currentElement.text().replace(/\s+/g, ' ');
      dataSpeed  = $currentElement.data("speed") || self.options.speed;
      console.log(dataSpeed)
      $currentElement.empty();
      var showText = setInterval(
				function(){
					if (indice++ < elementStr.length) {
			      $currentElement.append(elementStr[indice]);
			    }else{
			    	clearInterval(showText);
			    }
				}, dataSpeed);   
    }  
    return {
      init: init
    }
  }
  $.fn.typewriter = function(options) {
    return this.each(function () {
    	var writer =  new typewriter();
      writer.init(this, options);
      $.data( this, 'typewriter', writer);
    });
  };
  $.fn.typewriter.options = {
    'speed' : 300
  };
})(jQuery, window, document);
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 插件创建了一个简单的控制台打字机效果。

输出

以下是这个例子的输出。

示例 5

<! DOCTYPE html>
<html>
	<head>
		<title> jQuery typewriter Example </title>
		<meta charset = "UTF-8" />
		<script src = "typewriter.js"> </script>
<link href = "https://www.jqueryscript.net/css/jquerysctipttop.css" rel = "stylesheet" type = "text/css">
	<link href = 'https://fonts.googleapis.com/css?family=Cutive+Mono' rel = 'stylesheet' type = 'text/css'>
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"> </script>
<script src = "https://rawgit.com/Ashish-Bansal/jquery-typewriter/master/jquery.typewriter.js" defer = ""> </script>
<style>
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.btn:hover {
  color: #fff;
  outline: 0;
}
btn:focus {
  color: #fff;
  outline: 0;
}
.first {
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.first:hover {
  box-shadow: 0 0 40px 40px #e74c3c inset;
}
body
{
  padding: 1%;
  color: #ccc;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
}
.console
{
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  font-size: 20px;
  color: black;
}

input[type="button"]
{
  cursor: pointer;
}
h1  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
</style>
<body>
<h1> Example </h1>
<h2> JQuery Typewriter </h2>
	<p>
    <input type = "text" id = "user-caption? class = "btn first" value = "Type something here!" />
    <input type = "button" id = "test-typing" class = "btn first" value = "Test Typing Effect" />
    <input type = "button" id = "test-erasing" class = "btn first" value = "Test Erasing Effect" />  
</p>
<p class = "console">
    <span> C:\ <b> </span> <span id = "caption"> </span> <span id = "cursor"> | </span>
</p>
 <script>
	var captionLength = 0;
var caption = '';
$(document).ready(function() {
    setInterval ('cursorAnimation()', 600);
    captionEl = $('#caption');
    $('#test-typing').click(function(){
        testTypingEffect();
    });
    $('#test-erasing').click(function(){
        testErasingEffect();
    });
});
function testTypingEffect() {
    caption = $('input#user-caption').val();
    type();
}
function type() {
    captionEl.html(caption.substr(0, captionLength++));
    if(captionLength < caption.length+1) {
        setTimeout('type()', 50);
    } else {
        captionLength = 0;
        caption = '';
    }
}
function testErasingEffect() {
    caption = captionEl.html();
    captionLength = caption.length;
    if (captionLength>0) {
        erase();
    } else {
        $('#caption').html("You didn't write anything to erase, but that's ok!");
        setTimeout('testErasingEffect()', 1000);
    }
}
function erase() {
    captionEl.html(caption.substr(0, captionLength--));
    if(captionLength >= 0) {
        setTimeout('erase()', 50);
    } else {
        captionLength = 0;
        caption = '';
    }	
}
function cursorAnimation() {
    $('#cursor').animate({
        opacity: 0
    }, 'fast', 'swing').animate({
        opacity: 1
    }, 'fast', 'swing');
}
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 插件创建了一个简单的打字机效果。在此，我们还可以删除您输入的内容。

输出

以下是这个例子的输出。

下一主题JQuery 产品导览

JQuery 打字机

示例 1

示例 2

示例 3

示例 4

示例 5

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery 打字机

示例 1

示例 2

示例 3

示例 4

示例 5

相关帖子

jQuery 在 5 秒后重定向到另一个页面

jquery cookie 同意插件

JQuery UI 控件组

jQuery jTippy 工具提示插件

使用 jQuery 延迟加载图像

JQuery 输入掩码电话号码验证

使用带有 Bootstrap 的 jQuery 动态添加删除输入字段

使用 HTML 和 CSS 和 jQuery 创建 3D 文本效果

在悬停时创建菜单项动画

使用 Jquery 的图片拼图游戏

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器