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判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
js动态为代码着色显示行号
May 29 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
js中less常用的方法小结
Aug 09 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python通过socket查询whois的方法
2015/07/18 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python 字典(dict)按键和值排序
2016/06/28 Python
python配置文件写入过程详解
2019/10/19 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
4s店市场专员岗位职责
2014/04/09 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
Python 键盘事件详解
2021/11/11 Python
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP