JS实现的打字机效果完整实例
2016-06-20 15:16
756 查看
<!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 //www.jb51.net") 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查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js数组实现图片轮播
- 用PS实现纹理浮雕效果代码
- js可突破windows弹退效果代码
- 用CSS实现的一张图完成的按钮效果
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- css利用A标签的背景可能作出很有意思的效果第1/2页
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表