摘要:放大鏡頁面加載完畢后執行親沒有數據哦動態添加標簽加載地址后傳入輸出一個函數在上面則定義好這個函數接受一個就是資源類型循環輸出可先查看數據點擊一次,從多少開始獲取獲取指定區間范圍隨機數,包括和如獲
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; i3、獲取指定區間范圍隨機數,包括lowerValue和upperValue"+ 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; } }
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; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98340.html
摘要:面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象,,,事件驅動,事件發射器加密解密,路徑操作,序列化和反序列化文件流操作服務端與客戶端。 第一階段: HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎:Js基礎教程、js內置對...
摘要:面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象,,,事件驅動,事件發射器加密解密,路徑操作,序列化和反序列化文件流操作服務端與客戶端。 第一階段: HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎:Js基礎教程、js內置對...
閱讀 3567·2021-08-02 13:41
閱讀 2417·2019-08-30 15:56
閱讀 1524·2019-08-30 11:17
閱讀 1180·2019-08-29 15:18
閱讀 583·2019-08-29 11:10
閱讀 2679·2019-08-26 13:52
閱讀 513·2019-08-26 13:22
閱讀 2956·2019-08-23 15:41