JS題 應(yīng)用

  • 實現(xiàn)一個動畫函數(shù),無需考慮透明度
    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)
    }
    
  • 節(jié)流函數(shù)的實現(xiàn)(類似Vue1的debounce)
    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)
        }
    }
    
  • 點擊li時alert索引

    <ul id="container">
        <li>這是第一條</li>
        <li>這是第二條</li>
        <li>這是第三條</li>
    </ul>
    
    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賦值給內(nèi)部函數(shù)
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = (function(arg) {
            return function() {
                console.log(arg);
            }
        })(i)
    }
    
  • 獲取元素聚頁面左邊、頂部的距離

    // 一直向上獲取目標(biāo)元素的父定位元素。注意不能用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 }
    }
    
  • 常規(guī)URL的正則匹配

    //開始 + 可選的http或https協(xié)議名 + 一個以上的(一個以上的字母或數(shù)字或'-' + '.') + 一個以上的字母或數(shù)字 + 一個以上的('/' + 一個以上的非空格字符 ) + 結(jié)尾
    /^(http:\/\/|https:\/\/)?([\w-]+\.)+[\w-]+(\/\S+)+$/
    
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 單例模式 適用場景:可能會在場景中使用到對象,但只有一個實例,加載時并不主動創(chuàng)建,需要時才創(chuàng)建 最常見的單例模式,...
    Obeing閱讀 2,092評論 1 10
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,807評論 2 17
  • 什么是事件: 我們可以簡單的把事件理解為瀏覽器的感知系統(tǒng)。比如說:他可以感覺到用戶是否點擊(click)了頁面、鼠...
    張松1366閱讀 6,820評論 1 6
  • javascript 是一門弱類型,動態(tài)腳本語言(所有變量通過var聲明,不需要用int char....).它的...
    3hours閱讀 731評論 0 1
  • 薩繆爾杰克遜可能是現(xiàn)在好萊塢最會念臺詞的演員之一了。在最新的《金剛。骷髏島》的開頭,黑老頭帶領(lǐng)自己的直升機編...
    yomas閱讀 199評論 0 0