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.length; i++){
html += `<li><h2>`+ data.books[i].title +`</h2> <span>`+ data.books[i].author_intro +`</span><img src="`+ data.books[i].image +`" /><p>`+ data.books[i].summary +`</p> <div><em>` + data.books[i].publisher + `</em></div></li>`;
}
oUl.innerHTML = html;
}else{
document.body.innerHTML+=`<h2>親~~ 沒有資料哦~~~</h2>`;
}
}
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; i<arr.length; i++){
if(arr[i]<numVal){
leftArr.push(arr[i]);
}else{
rightArr.push(arr[i])
}
}
return sort(leftArr).concat(numVal,sort(rightArr));
}
2、sort排序
var num=[7,45,100,4,2,564];
num.sort(function (a, b){
return a - b;
});
console.log(num) //[2, 4, 7, 45, 100, 564]
5、陣列去重
1、indexOf 去重
/**
* 當arr的第一次出現的位置 == i 則是第一次出現就push到tempArr
*/
function unique(arr){
if (arr.length <= 1){
return arr;
}
var tempArr = [];
for(var i=0; i<arr.length; i++){
if(tempArr.indexOf(parseInt(arr[i])) == -1){ //-1 證明沒有出現過
tempArr.push(arr[i]);
}
}
return tempArr;
}
2、Set去重
function SetUnique(array) {
return [...new Set(array)];
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]
6、深度拷貝
/**
* 深度拷貝
* 使用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;
}