我也写个打字机
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name='viewport' content='width=device-width'>
- <meta charset="UTF-8">
- <title > 打字机 </title>
- <style>
- body{
- margin: 0;
- padding: 0 0 50px;
- background: #CDDC39;
- font-family: 'STXinwei';
- color: #333;
- font-size: 16px;
- }
- div:first-child{
- padding: 35px 0 15px;
- text-align: center;
- }
- button{
- margin: 0 50px;
- width: 100px;
- height: 35px;
- border: 0;
- outline: 0;
- background: #fff;
- font-weight: 800;
- border-radius: 5px;
- font-size: inherit;
- font-family: inherit;
- }
- #wrap{
- margin: 0 auto;
- padding: 20px 15px;
- width: 800px;
- max-width: 85%;
- background: #fff;
- border-radius: 10px;
- text-align: justify;
- line-height: 1.3em;
- font-family: inherit;
- }
- </style>
- </head>
- <body>
- <div>
- <button id="start"> 开始打字 </button>
- <button id="change"> 切换光标 </button>
- </div>
- <pre id="wrap">
- // 打字机
- function Typewriter(arg){
- //options
- var el = arg.el;
- var cursorFlash = arg.cursorFlash;
- var wordFlash = arg.wordFlash instanceof Array? arg.wordFlash : [0,400];
- var m = wordFlash[0];
- var n = wordFlash[1];
- // 创建过就不要再创建了
- if(!el.typewriter){
- el.typewriter = true;
- }else{
- return false;
- }
- // 初始化
- var text = el.innerHTML;
- var len = 0;
- var text_box = document.createElement('span');
- var cursor_box = document.createElement('span');
- cursor_box.innerHTML = '|';
- el.innerHTML = '';
- el.appendChild(text_box);
- el.appendChild(cursor_box);
- // 光标闪闪
- setInterval(function (){
- if(cursor_box.show){
- cursor_box.style.opacity = 1;
- cursor_box.show = false;
- }else{
- cursor_box.style.opacity = 0;
- cursor_box.show = true;
- }
- },cursorFlash);
- // 添加字符
- function addWords(){
- if(len<=text.length){
- text_box.innerHTML = text.slice(0,len);
- len++;
- setTimeout(addWords,Math.random()*(n-m)+m);
- }
- }
- //API
- this.changeCursor = function (){
- cursor_box.innerHTML = cursor_box.innerHTML == '|'? '_' : '|';
- }
- this.startWrite = function(){
- if(!text_box.canadd){
- text_box.canadd = true;
- addWords();
- }
- }
- }
- var wrap = document.querySelector('#wrap');
- var start = document.querySelector('#start');
- var change = document.querySelector('#change');
- // 创建打字机
- var tw = new Typewriter({
- el: wrap,
- cursorFlash: 400,
- wordFlash: [0,400]
- });
- // 开始
- start.onclick = tw.startWrite;
- // 切换光标
- change.onclick = tw.changeCursor;
- </pre>
- <script>
- // 打字机
- function Typewriter(arg){
- //options
- var el = arg.el;
- var cursorFlash = arg.cursorFlash;
- var wordFlash = arg.wordFlash instanceof Array? arg.wordFlash : [0,400];
- var m = wordFlash[0];
- var n = wordFlash[1];
- // 创建过就不要再创建了
- if(!el.typewriter){
- el.typewriter = true;
- }else{
- return false;
- }
- // 初始化
- var text = el.innerHTML;
- var len = 0;
- var text_box = document.createElement('span');
- text_box.id = 'typewriter-text';
- var cursor_box = document.createElement('span');
- cursor_box.id = 'typewriter-cursor';
- cursor_box.innerHTML = '|';
- el.innerHTML = '';
- el.appendChild(text_box);
- el.appendChild(cursor_box);
- // 光标闪闪
- setInterval(function (){
- if(cursor_box.show){
- cursor_box.style.opacity = 1;
- cursor_box.show = false;
- }else{
- cursor_box.style.opacity = 0;
- cursor_box.show = true;
- }
- },cursorFlash);
- // 添加字符
- function addWords(){
- if(len<=text.length){
- text_box.innerHTML = text.slice(0,len);
- len++;
- setTimeout(addWords,Math.random()*(n-m)+m);
- }
- }
- //API
- this.changeCursor = function (){
- cursor_box.innerHTML = cursor_box.innerHTML == '|'? '_' : '|';
- }
- this.startWrite = function(){
- if(!text_box.canadd){
- text_box.canadd = true;
- addWords();
- }
- }
- }
- var wrap = document.querySelector('#wrap');
- var start = document.querySelector('#start');
- var change = document.querySelector('#change');
- // 创建打字机
- var tw = new Typewriter({
- el: wrap,
- cursorFlash: 400,
- wordFlash: [0,400]
- });
- // 开始
- start.onclick = tw.startWrite;
- // 切换光标
- change.onclick = tw.changeCursor;
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/32244/625cff209281135d4618315c2097c833.html