web前端中常用的封装方法有哪些
web前端中常用的封装方法有哪些?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
成都创新互联专注于海港网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供海港营销型网站建设,海港网站制作、海港网页设计、海港网站官网定制、小程序定制开发服务,打造海港网络公司原创品牌,更为您提供海港网站排名全网营销落地服务。
1、放大镜
//页面加载完毕后执行 window.onload = function () { var oDemo = document.getElementById('demo'); var oMark = document.getElementById('mark'); var FloatBox = document.getElementById('float-box'); var SmallBox = document.getElementById("small-box"); var bigBox = document.getElementById('big-box'); var bigImg = bigBox.getElementsByTagName('img')[0]; oMark.onmouseover = function (){ FloatBox.style.display = "block"; bigBox.style.display = "block"; } oMark.onmouseout = function (){ FloatBox.style.display = "none"; bigBox.style.display = "none"; } oMark.onmousemove = function (ev){ var ev = ev || window.event; var left = ev.clientX - oDemo.offsetLeft - SmallBox.offsetLeft - FloatBox.offsetWidth / 2; var top = ev.clientY - oDemo.offsetTop - SmallBox.offsetTop - FloatBox.offsetHeight / 2; if(left < 10){ left = 0; }else if(left >= oMark.offsetWidth - FloatBox.offsetWidth - 10){ left = oMark.offsetWidth - FloatBox.offsetWidth; } if(top < 10){ top = 0; }else if(top >= oMark.offsetHeight - FloatBox.offsetHeight - 10){ top = oMark.offsetHeight - FloatBox.offsetHeight; } FloatBox.style.left = left + "px"; FloatBox.style.top = top + "px"; var scaleX = left / (oMark.offsetWidth - FloatBox.offsetWidth); var scaleY = top / (oMark.offsetHeight - FloatBox.offsetHeight); bigImg.style.left = -scaleX * (bigImg.offsetWidth - bigBox.offsetWidth) + "px"; bigImg.style.top = -scaleY * (bigImg.offsetHeight - bigBox.offsetHeight) + "px"; } }
2、JSONP
function fn1(data){ var html = ''; var oUl = document.getElementsByTagName('ul')[0]; console.log(data); if(data.total != -1){ for(var i=0; i'+ data.books[i].title +'
'+ data.books[i].author_intro +''+ data.books[i].summary +'
' + data.books[i].publisher + '
';} oUl.innerHTML = html; }else{ document.body.innerHTML+='亲~~ 没有数据哦~~~
'; } } window.onload = function (){ var oBtn = document.getElementById('btn'); var iNow = 0; oBtn.onclick = function (){ //动态添加 script 标签 加载URL地址 后传入 callback=fn1 输出一个函数, 在上面则定义好这个函数, 接受一个data 就是资源 json类型,循环输出, 可先console.log(dara) 查看数据 var oScript = document.createElement('script'); oScript.src="https://api.douban.com/v2/book/search?q=%E6%A0%A1%E5%9B%AD&count=10&start="+ iNow +"&callback=fn1"; document.head.appendChild(oScript); // 点击一次+10,从多少开始获取 iNow += 10; } }
3、获取指定区间范围随机数,包括lowerValue和upperValue
function randomFrom(lowerValue,upperValue) { return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue); } //如获取1-100之间的随机数 console.log(randomFrom(1,100));
4、数组排序
1、快速排序 /** * 得到中间那位那位数,然后循环判断, arr[i] < 中间数 则push leftArr, 否则push rightArr, 最后返回 left数组 '拼接' 中间数 + right数组 */ function sort(arr){ if(arr.length <= 1){ return arr; } var numIndex = Math.floor(arr.length/2); var numVal = arr.splice(numIndex,1); var leftArr = []; var rightArr = []; for(var i=0; i5、数组去重
1、indexOf 去重 /** * 当arr的第一次出现的位置 == i 则是第一次出现就push到tempArr */ function unique(arr){ if (arr.length <= 1){ return arr; } var tempArr = []; for(var i=0; i6、深度拷贝
/** * 深度拷贝 * 使用for in 在循环赋值,避免对象引用 */ function copy(obj){ if(typeof obj != 'object'){ return obj; } var newObj = {}; for(var attr in obj){ newObj[attr] = copy(obj[attr]); } return newObj; }看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
本文名称:web前端中常用的封装方法有哪些
地址分享:http://myzitong.com/article/pjhdii.html