基于 jquery的网页自动打字特效 JS实现打字机特效

分类网络杂谈时间2026-07-14 12:09:57发布heikeyh浏览15

导读：基于 jquery的网页自动打字特效 JS实现打字机特效打字机式字符输出是一种常见的JavaScript动态效果，用于模拟老式打字机逐个输出字符的过程，增强网页的互动性与趣味性，常用于网站欢迎语、展示文本或游戏对话框等场景。本资源包通过HTML与JavaScript结合，利用定时器函数（setTimeout/setInterval）控制字符逐字显示，配合D...

打字机式字符输出是一种常见的JavaScript动态效果，用于模拟老式打字机逐个输出字符的过程，

增强网页的互动性与趣味性，常用于网站欢迎语、展示文本或游戏对话框等场景。

本资源包通过HTML与JavaScript结合，利用定时器函数（setTimeout/setInterval）控制字符逐字显示，

配合DOM操作实现动态文本更新。通过学习该特效项目，开发者可以掌握时间控制、字符串拼接、

DOM操作等核心技术，并能拓展实现暂停、重播、速度调节等交互功能，提升网页用户界面的生动性。

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>I want to send you a letter</title>
</head>
<body>
<div id="autotype" style="margin-top:200px;text-align: center;font-family: 楷体;font-size: 20px;"></div><div id="l" style="text-align: center;color: #fff;"></div>
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>
	l = document.getElementById('l');
	l.innerHTML='我爱你';
	$.fn.autotype = function (str, speed) {
    	div = document.getElementById('autotype');
    	div.style.color = '#000';
    	console.log('其实我爱你,但是我不敢说,怕你离开我.你也许根本就看不到....');
        var self = this,
                defaultStr = '我希望有个如你一般的人.<br><br>'
                          +'如山间清爽的风.<br><br>'
                          +'如古城温暖的光.<br><br>'
                          +'从清晨到夜晚.<br><br>'
                          +'由山野到书房.<br><br>'
                          +'只要最后是你，就好.<br><br>'
                          +'　　　　　　-Hackyh',//将要添加的元素的默认内容
                defaultSpeed = 100,
                str = str || defaultStr,
                speed = speed || defaultSpeed,
                index = 0,
                timer = setInterval(function () {
                    var current = str.substr(index, 1);
                    if (current == '<') {
                        index = str.indexOf('>', index) + 1;
                    } else {
                        index++;
                    }
                    self.html(str.substring(0, index) + ( (index & 1) && (index != str.length) ? '_|' : ''));
                    if (index >= str.length) {
                        clearInterval(timer);
                    }
                }, speed);
                
    };
    $("#autotype").autotype();
 //    window.onmouseenter=function(){
	// 	div = document.getElementById('autotype');
	// 	div.innerHTML='嗯,再见';
	
	// }
	
</script>
</body>
</html>

网络技术网络杂谈

网页特效简易的JavaScript文字跟随鼠标移动特效漂亮实用的字体包下载商业字体包下载包含多种字体选择

↑

召唤伊斯特瓦尔

基于 jquery的 网页自动打字特效 JS实现打字机特效

相关内容

基于 jquery的网页自动打字特效 JS实现打字机特效