作者:cang桑哥哥 | 来源:互联网 | 2020-08-07 16:50
本篇文章给大家带来的内容是关于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 = &#39;&#39;;
var oUl = document.getElementsByTagName(&#39;ul&#39;)[0];
console.log(data);
if(data.total != -1){
for(var i=0; i&#39;+ data.books[i].title +&#39;
&#39;+ data.books[i].author_intro +&#39;&#39;+ data.books[i].summary +&#39;
&#39; + data.books[i].publisher + &#39;
&#39;;}
oUl.innerHTML = html;
}else{
document.body.innerHTML+=&#39;亲~~ 没有数据哦~~~
&#39;;
}
}
window.Onload= function (){
var oBtn = document.getElementById(&#39;btn&#39;);
var iNow = 0;
oBtn.Onclick= function (){
//动态添加 script 标签 加载URL地址 后传入 callback=fn1 输出一个函数, 在上面则定义好这个函数, 接受一个data 就是资源 json类型,循环输出, 可先console.log(dara) 查看数据
var oScript = document.createElement(&#39;script&#39;);
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数组 &#39;拼接&#39; 中间数 + 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 != &#39;object&#39;){
return obj;
}
var newObj = {};
for(var attr in obj){
newObj[attr] = copy(obj[attr]);
}
return newObj;
}
以上就是web前端中常用的封装方法介绍(代码示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!