- 实现一个动画函数，无需考虑透明度
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) }
- 节流函数的实现（类似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赋值给内部函数 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 } } -
常规URL的正则匹配
//开始 + 可选的http或https协议名 + 一个以上的（一个以上的字母或数字或'-' + '.'） + 一个以上的字母或数字 + 一个以上的（'/' + 一个以上的非空格字符 ） + 结尾 /^(http:\/\/|https:\/\/)?([\w-]+\.)+[\w-]+(\/\S+)+$/
