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 &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
利用js对象弹出一个层
Mar 26 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
PHP中soap的用法实例
2014/10/24 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
详解JS函数防抖
2020/06/05 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
Python实现线程池代码分享
2015/06/21 Python
Python 中的with关键字使用详解
2016/09/11 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
python实现验证码识别功能
2018/06/07 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Python如何急速下载第三方库详解
2020/11/02 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
德国电子商城:ComputerUniverse
2017/04/21 全球购物
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
建设投标担保书
2014/05/13 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
运动员入场前导词
2015/07/20 职场文书
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers