Phiên bản đầy đủ: jsB@nk » Chữ » Gõ chữ » Chữ chạy kiểu đánh máy với sự kiện onClick
URL: https://www.javascriptbank.com/simple-javascript-typing-text-onclick.html
Với đoạn mã JavaScript này, chúng ta có thể dễ dàng tạo ra hiệu ứng chữ chạy kiểu đánh máy khi người dùng nhấn vào các vùng chứa chữ. Hiệu ứng này cung cấp 3 cách thức để tạo chữ chạy: thêm mới vào một khu vực có trước, thay mới hoàn toàn và lập lại thao tác chạy.
Phiên bản đầy đủ: jsB@nk » Chữ » Gõ chữ » Chữ chạy kiểu đánh máy với sự kiện onClick
URL: https://www.javascriptbank.com/simple-javascript-typing-text-onclick.html
<script type="text/javascript">// Created by: Ilya Gerasimenko | http://www.gerasimenko.com// This script downloaded from www.JavaScriptBank.com// Text to typevar stringOfText1 = '... with a new string of text. Convenient for those "read more..." links.';var stringOfText2 = ' spots on the same page; the animations will be consecutive.';var stringOfText3 = 'Click (and keep clicking) here to retype this text over and over. You don\'t have to, but you can.';// Animationvar textHolder;var textTarget;var letter;var index;var printing;var waiting = false;// StartspellString = function (oId,str) { if (waiting == false) { index = 0; waiting = true; textTarget = document.getElementById(oId); textTarget.innerHTML = ''; textHolder = str.split(''); sendToPrint(); }}// AnimationsendToPrint = function () { if (index<textHolder.length) { printing = window.setTimeout( function () { getLetter(textTarget,index); },1); } else { waiting = false; }}getLetter = function (textTarget,index) { letter = document.createTextNode(textHolder[index]); if (letter.value == '\\') letter.value = ''; printLetter(textTarget,letter);}printLetter = function (textTarget,letter) { textTarget.appendChild(letter); window.clearTimeout(printing); index++; sendToPrint();}// Created by: Simon Willison | http://simon.incutio.com/function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}addLoadEvent(function () {document.getElementById('clickhere1').onclick = function () { spellString('typehere1',stringOfText1); }document.getElementById('clickhere2').onclick = function () { spellString('typehere2',stringOfText2); }document.getElementById('keepclicking').onclick = function () { spellString('keepclicking',stringOfText3); } });</script><!--/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/--><div style="text-align: left; width: 70%;"><p id="typehere1"><span id="clickhere1">Click here to <em>replace</em> this text ...</span></p><p>Can be used in several<span id="typehere2">... <span id="clickhere2">(click here to <em>read more</em>)</span></span></p><p id="keepclicking">Click (and keep clicking) here to <em>retype this text over and over</em>.</p></div>