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 相关文章推荐
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
vue全局使用axios的操作
Sep 08 Javascript
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
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
python实现二叉树的遍历
2017/12/11 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
python导入坐标点的具体操作
2019/05/10 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
python开发前景如何
2020/06/11 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
2014年幼儿园教学工作总结
2014/12/04 职场文书
初中毕业生感言
2015/07/31 职场文书
周一问候语大全
2015/11/10 职场文书
《正比例》教学反思
2016/02/23 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS
MySQL派生表联表查询实战过程
2022/03/20 MySQL
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript