Snippets > 文字を一文字ずつ表示

一文字ずつ

HTML

<p id="foo"></p>

JavaScript

/**
 * typo.js 
 *
 * It displays one character at a time. 
 *
 * Copyright 2012 Sawai Hiroshi
 * http://www.info-town.jp
 *
 */
/**
 * typographic object
 */
var typo = {};

// implement typo object
(function() {

    /**
     * transform string to array
     *
     * @private
     * @param {String} text
     * @return {Array} arr
     */

    function _strToArr(str) {
        var arr = [];
        for (i = 0; i < str.length; i++) {
            arr.push(str.charAt(i));
        }
        return arr;
    }

    /**
     * insert text to dom
     *
     * callback of setTimeout
     *
     * @private
     * @param {jQuery} elem
     * @param {String} text
     * @param {Number} timer_id Timer ID
     */

    function _insert(text, elem) {
        // argument elem, text is free variable
        return function _callback() {
            elem.innerHTML = text; // insert text
            clearTimeout(_callback.timer);
        };
    }

    /**
     * rendering text used timer
     *
     * @private
     * @param {Array} arr
     * @param {jQuery} elem
     */

    function _rendering(text, elem) {
        var arr = _strToArr(text),
            timer = [],
            text,
            _timercallback,
            i;
        for (i = 0; i < arr.length; i++) {
            text = arr.slice(0, i + 1).join('');
            _timercallback = _insert(text, elem);
            _timercallback.timer = setTimeout(_timercallback, i * 100);
        }
    }
    typo.rendering = _rendering;
}());
var elem = document.getElementById('foo');
typo.rendering('It displays one character at a time', elem);