js实现键盘自动打字效果
2019/6/27 21:32:42
本文主要是介绍js实现键盘自动打字效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>AutoType</title> </head> <body> <div id="autotype"></div> <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <script> $.fn.autotype = function (str, speed) { var self = this, defaultStr = '<p>我希望有个如你一般的人.</p><br>' +'<p>如山间清爽的风.</p><br>' +'<p>如古城温暖的光.</p><br>' +'<p>从清晨到夜晚.</p><br>' +'<p>由山野到书房.</p><br>' +'<p>只要最后是你,就好.</p><br>',//将要添加的元素的默认内容 defaultSpeed = 100, str = str || defaultStr, speed = speed || defaultSpeed, index = 0, timer = setInterval(function () { var current = str.substr(index, 1); if (current == '<') { index = str.indexOf('>', index) + 1; } else { index++; } self.html(str.substring(0, index) + ( (index & 1) && (index != str.length) ? '_' : '')); if (index >= str.length) { clearInterval(timer); } }, speed); }; $("#autotype").autotype(); </script> </body> </html>
本人才疏学浅,总觉得自己写的方法比较简陋,于是搜索了一波资料,发现有个不错的jQuery插件Typed.js。
Type.js的基础使用
<script src="jquery.js"></script> <script src="typed.js"></script> <script> $(function(){ $(".element").typed({ strings: ["First sentence.", "Second sentence."], typeSpeed: 0 }); }); </script> ... <span class="element"></span>
插件为用户定制了许多默认设置与效果
<script> $(function(){ $(".element").typed({ strings: ["First sentence.", "Second sentence."], // Optionally use an HTML element to grab strings from (must wrap each string in a <p>) stringsElement: null, // typing speed typeSpeed: 0, // time before typing starts startDelay: 0, // backspacing speed backSpeed: 0, // shuffle the strings shuffle: false, // time before backspacing backDelay: 500, // loop loop: false, // false = infinite loopCount: false, // show cursor showCursor: true, // character for cursor cursorChar: "|", // attribute to type (null == text) attr: null, // either html or text contentType: 'html', // call when done callback function callback: function() {}, // starting callback function before each string preStringTyped: function() {}, //callback for every typed string onStringTyped: function() {}, // callback for reset resetCallback: function() {} }); }); </script>
具体用法可以看看GitHub地址,带注释的源码400多行,不算复杂。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持找一找教程网!
这篇关于js实现键盘自动打字效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist