JS 문제 응용

function animate(ele, tarStyle, tarValue) {
    var fullStyleValue = getComputedStyle(ele)[tarStyle]
    var currentValue = parseFloat(fullStyleValue)
    var animationId = setInterval(function() {
        if (currentValue !== tarValue) {
            currentValue += Math.ceil((tarValue - currentValue) / 10)
        } else {
            clearInterval(animationId)
        }
        ele.style[tarStyle] = currentValue + 'px'
    }, 20)
}

function debounce(fn, delay) {
    var timer = null
    return function () {
        var context = this
        var args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
            fn.apply(context, args)
        }, delay)
    }
}

var lis = document.getElementsByTagName('li')

// 1 -  
document.getElementById('container').addEventListener('click', function(e) {
    if (e.target.nodeName === 'LI') {
        console.log(Array.prototype.indexOf.call(lis, e.target));
    }
})

// 2 -  onclick
Array.prototype.forEach.call(lis, function(item, index) {
    item.onclick = function() {
        console.log(index);
    }
})

// 3 -  onclick， let
for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function() {
        console.log(i);
    }
}

// 4 -  onclick， i 
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = (function(arg) {
        return function() {
            console.log(arg);
        }
    })(i)
}

//  。 getBoundingClientRect() ， 
function offset(t) {
    var top = t.offsetTop
    var left = t.offsetLeft
    var posParent = t.offsetParent
    while (posParent !== null) {
        top += posParent.offsetTop
        left += posParent.offsetLeft
        posParent = posParent.offsetParent
    }
    return { top: top, left: left }
}

//  +  http https  +  （ '-' + '.'） +   +  （'/' +   ） +  
/^(http:\/\/|https:\/\/)?([\w-]+\.)+[\w-]+(\/\S+)+$/