a/22010112/1636522

by wared

HTML

<div id="time">Total time: 3 hours and 15 minutes</div>
<label>Hours &nbsp;&nbsp;<input name="hours" value="3" /></label>
<label>Minutes <input name="minutes" value="15" /></label>

CSS

*{font-family:Consolas,Courier}
label{display:block}
#time{border-bottom:1px solid #999;padding-bottom:.5em;margin-bottom:.5em}

JavaScript

var refreshTime = function () {
    var el = document.getElementById('time');
    var tpl = new Function('return [' + (
        el.innerHTML.replace(/'/g, '\\\'').replace(
            /^(\D+)\d+(\D+)\d+(.+)$/, 
            '\'$1\',this.hours,\'$2\',this.minutes,\'$3\''
        )
    ) + '].join(\'\');');
    return function (data) {
        el.innerHTML = tpl.call(data);
    };
}();

$('input').keyup(function () {
    refreshTime({
        hours: $('[name="hours"]').val(),
        minutes: $('[name="minutes"]').val()
    });
});