- <!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>