JS for循环有关变量类型的问题/魔兽世界样式的tooltip

<script>
    var num = 100;
    for (var i=num-5;i<num+5;i++){
        // console.log(typeof(i));
        console.log("i");
    }
</script>

这段代码控制台会输出10次i;

<script>
    var num = "100";
    for (var i=num-5;i<num+5;i++){
        // console.log(typeof(i));
        console.log("i");
    }
</script>

因为"100" - 5是95，而"100" + 5是1005

这段代码会输出几百次i;是为什么？？区别仅仅是赋值给变量num的是字符串或数字

---

text-shadow的立体效果，opacity透明；

Jade,Ejs,Handlebars三种模板的对比；

Modernizr,Html5,Css3特性检测库

参考的代码

CSS部分：图标的出现，样式等

.wow-item {
    position: absolute;
    color: white;
    background-color: rgba(10, 0, 5, 0.8);
    font-family: "friz", serif;
    font-size: 12px;
    font-weight: normal;
    padding: 0.5em 0.6em;
    text-shadow: 0 1px 0 black;
    box-shadow: -1px -1px 1px rgba(10, 0, 5, 0.5), -1px 1px 1px rgba(10, 0, 5, 0.5), 1px 1px 1px rgba(10, 0, 5, 0.5), 1px -1px 1px rgba(10, 0, 5, 0.5);
    max-width: 24em;
    -webkit-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s;
    -o-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s;
    transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s;
}

.wow-item.hidden {
    visibility: hidden;
    opacity:;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s, visibility 0.01s linear 0.15s;
    -o-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s, visibility 0.01s linear 0.15s;
    transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s, visibility 0.01s linear 0.15s;
}

.wow-icon, .wow-item {
    border-style: solid;
    border-width: 5px;
    border-image: url(../img/wow-tooltip-border-2.png) 5 repeat;
    border-radius: 4px;
}

$wowIcons.on('mouseover.wow', function (e) {
    var $this = $(this);
    var $html;
    if (!lastHovered || !lastHovered.is($this)) {
        var id = $this.data('item-id');
        $html = $(template(items[id]));
        $body.find('.wow-item').remove();
        $body.append($html);
        $html.css({
            left: e.clientX + 20,
            top: e.clientY - 10
        });
        lastHovered = $this;
    } else {
        $html = $('.wow-item');
    }
    setTimeout(function () {
        $html.removeClass('hidden');
    }, 10);
    $this.on('mousemove.wow', function (e) {
        $html.css({
            left: e.clientX + 20,
            top: e.clientY - 30
        });
    });
});
$wowIcons.on('mouseout.wow', function (e) {
    $body.find('.wow-item').addClass('hidden');
    $(this).off('mousemove.wow');
});
$body.on('mouseover.wow', '.wow-item', function (e) {
});
$body.on('mouseout.wow', '.wow-item', function (e) {
    $(this).addClass('hidden');
});

上面JS部分就是鼠标事件

Handlebars.js 模板引擎