世界のナベアツ製造器

3の倍数と3が付く数字のときだけアホになるツール

by noriaki

HTML

<h1>
    世界のナベアツ製造器
</h1>
<p>
    <strong>3</strong>の倍数と<strong>3</strong>が付く数字のときだけアホになります
</p>

<h2></h2>
<div id="result"></div>
<input id="nabeatsu" type="button" value="ナベアツ+1" />
<input id="clear" type="button" value="clear" />
<div id="result2"></div>

CSS

body { background-color: #DDDDDD; font: 30px sans-serif; }

strong {
    font-weight: bold;
    color: red;
}

span {
    margin: 10px;
}

.aho {
    font-size: 200%;
    font-style: italic;
}

.normal {
    color: gray;
}

JavaScript

// automatic Nabeatsu
//  DOM, for, if
var result = document.getElementById("result");
for(var i=1; i<=40; i++) {
    var element = document.createElement('span');
    element.innerHTML = i;

    if(i % 3 == 0 || i % 10 == 3 || parseInt(i / 10, 10) == 3) {
        element.className = "aho";
    } else {
        element.className = "normal";
    }
    result.appendChild(element);
}

// manually Nabeatsu
//  Lib(jQuery), event
jQuery(function($) {
    $("#clear").on("click", function(e) {
        $("#result2").empty();
    });
    var i = 1;
    $("#nabeatsu").on("click", function(e) {
        var span = $("<span>").text(i);
        if(i % 3 == 0 || i % 10 == 3 || parseInt(i / 10, 10) == 3) {
            span.addClass("aho");
        } else {
            span.addClass("normal");
        }
        $("#result2").append(span);
        i += 1;
    });
});