这篇文章主要介绍了 JS 实现的打字机效果, 结合完整实例形式分析了 javascript 定时触发自定义函数模拟打字输出效果的相关实现技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 http://www.phperz.com")
- var msg = "JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可";
- function getMsg(){
- return msg;
- }
- typeWriter.msg = getMsg(msg);
- typeWriter.type();
- }
- </script>
- </head>
- <body>
- <div id = "main"> </div>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0302/264723.html