typeWriter.js

index.html

<div class="wrap">
  <a href="#" class="start">Click to print</a>
  <div class="test" data-text="帝旺 則取 2014/1/12 為目標日期，並取 前4天2014/1/8開始 到後4天 2014/1/16 結束 共取9 天"></div>
</div>

script.js

/**
 * http://pixelhunter.me/
 * 
 * text {String} - printing text
 * n {Number} - from what letter to start
 */
function typeWriter(text, n) {
  if (n < (text.length)) {
    $('.test').html(text.substring(0, n+1)+"|");
    n++;
    setTimeout(function() {
      typeWriter(text, n)
    }, 100);
  }
}

$('.start').click(function(e) {
  e.stopPropagation();
  
  var text = $('.test').data('text');
  
  typeWriter(text, 0);
});

style.css

@import url(http://fonts.googleapis.com/css?family=Cutive+Mono);

body {
  font: 16px/20px 'Cutive Mono', serif;
}

a {
  color: #222;
}

.wrap {
  width: 500px;
  margin: 30px auto;
  text-align: center;
}

.test {
  margin-top: 10px;
  text-align: left;
}
  

typeWriter.js.markdown

typeWriter.js

use this simple script to get typewriter effect for your texts

Forked from Dmitri Voronianski's Pen typeWriter.js.

Forked from Dmitri Voronianski's Pen typeWriter.js.

A Pen by mywarr on CodePen.

License.