JS实现的打字机效果完整实例


Posted in Javascript onJune 20, 2016

本文实例讲述了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 .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>JS打字机效果</title>
    <meta name="description" content="">
    <meta name="author" content="Administrator">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <style type = "text/css">
   #main {
    width: 80%;
    height: 750px;
    margin: auto;
    padding: 10px;
    background: #cfe1ca;
    border: 10px outset #f9c6aa;
    line-height: 30px;
    color: #9f3c61;
    font-size: 18px;
   }
   p {
    text-indent: 30px;
   }
  </style>
  <script type = "text/javascript">
   var typeWriter = {
    msg: function(msg){
     return msg;
    },
    len: function(){
     return this.msg.length;
    },
    seq: 0,
    speed: 150,//打字时间(ms)
    type: function(){
     var _this = this;
     document.getElementById("main").innerHTML = _this.msg.substring(0, _this.seq);
     if (_this.seq == _this.len()) {
      _this.seq = 0;
       clearTimeout(t);
     }
     else {
      _this.seq++;
      var t = setTimeout(function(){_this.type()}, this.speed);
     }
    }
   }
   window.onload = function(){
    alert("welcome to https://3water.com")
    var msg = "JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可";
    function getMsg(){
     return msg;
    }
    typeWriter.msg = getMsg(msg);
    typeWriter.type();
   }
  </script>
 </head>
 <body>
  <div id = "main"> </div>
 </body>
</html>

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

Javascript 相关文章推荐
javascript编程起步(第五课)
Jan 10 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
jQuery实现的网格线绘制方法
Jun 20 #Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 #Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 #Javascript
Javascript中的arguments对象
Jun 20 #Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 #Javascript
BootStrap selectpicker
Jun 20 #Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 #Javascript
You might like
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
一个取得文件扩展名的函数
2006/10/09 PHP
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
python实现二分查找算法
2017/09/21 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
Wallis官网:英国女装零售商
2020/01/21 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
优秀学生事迹材料
2014/02/08 职场文书
商场消防演习方案
2014/02/12 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
交通安全标语
2014/06/06 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
2016年教师节慰问信
2015/12/01 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL