编程 Javascript

JS实现的自动打字效果示例

Posted in Javascript onMarch 10, 2017

本文实例讲述了JS实现的自动打字效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset='utf-8'>
  <title>js typing</title>
 </head>
 <body>
  <div id='divTyping'></div>
  <script>
   var str = 'js 实现的 打字效果，感觉蛮有趣的。';
   var i = 0;
   function typing(){
    var divTyping = document.getElementById('divTyping');
    if (i <= str.length) {
     divTyping.innerHTML = str.slice(0, i++) + '_';
     setTimeout('typing()', 200);//递归调用
    }
    else{
     divTyping.innerHTML = str;//结束打字,移除 _ 光标
    }
   }
   typing();
  </script>
 </body>
</html>

运行效果图如下：

JS实现的自动打字效果示例

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现的自动打字效果示例

- Author -

继续去踢波

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

解决JS浮点数运算出现Bug的方法

Mar 12 Javascript

下拉列表select 由左边框移动到右边示例

Dec 04 Javascript

jquery教程限制文本框只能输入数字和小数点示例分享

Jan 13 Javascript

jQuery性能优化的38个建议

Mar 04 Javascript

js检验密码强度(低中高)附图

Jun 05 Javascript

使用JavaScript实现网页版Pongo设计思路及源代码分享

Jun 16 Javascript

Node.js编程中客户端Session的使用详解

Jun 23 Javascript

js实现无限级树形导航列表效果代码

Sep 23 Javascript

深入解析桶排序算法及Node.js上JavaScript的代码实现

Jul 06 Javascript

一个极为简单的requirejs实现方法

Oct 20 Javascript

基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能

May 16 Javascript

JavaScript设计模式之工厂模式简单实例教程

Jul 03 Javascript

jquery实现的table排序功能示例

Mar 10 #Javascript

微信小程序向左滑动删除功能的实现

Mar 10 #Javascript

常用的js方法合集

Mar 10 #Javascript

利用Angular+Angular-Ui实现分页（代码加简单）

Mar 10 #Javascript

JS中利用localStorage防止页面动态添加数据刷新后数据丢失

Mar 10 #Javascript

C#微信小程序服务端获取用户解密信息实例代码

Mar 10 #Javascript

js实现产品缩略图效果

Mar 10 #Javascript