#### 1. 基礎點：
* * * * *
~~~
//獲取元素的寬高
$('.carousel').width();
$('.carousel').height();
//相對窗口
$('.carousel').offset().top;
$('.carousel').offset().left;
//相對設置了定位的父級元素
$('.carousel').position().top;
$('.carousel').position().left;
//設置背景圖片的方式
background-size: cover;//圖片覆蓋整個div
background-position: center;//圖片定位居中于div中間
background-size: contain;
//禁止右鍵
$(document).bind("contextmenu",function(e){
return false;
})
//禁止F12
document.onkeydown =document.onkeyup = document.onkeypress=function(){
if(window.event.keyCode == 123) {
window.event.returnValue=false;
return(false);
}
}
//獲取指定元素距離document頂部的距離，包括卷起來的部分,node為原生獲取的指定元素
function getPositionTop(node) {
var top = node.offsetTop;
var parent = node.offsetParent;
while(parent != null) {
top += parent.offsetTop;
parent = parent.offsetParent;
}
return top;
}
//關于iframe
//獲取當前頁面中iframe標簽中的子頁面的window對象
var iframeWindow = document.getElementById('iframe').contentWindow;
//在子頁面中設置iframe標簽父頁面的url
top.location.href = 'http://www.baidu.com';
//在iframe子頁面中獲取父頁面的url，實現思路：在父頁面中動態將父頁面的url以參數的形式傳入iframe標簽的src屬性值中，在子頁面中獲取url地址的參數即可
//關于swiper框架問題
//① 當要在swiper-slide中添加彈幕時會出現重疊，此時不能設置透明度為1，應為0.999則可。
~~~
2. 判斷設備類型：
* * * * *
~~~
function isPC(){
//使用用戶代理信息判斷
var info = navigator.userAgent.toLocaleLowerCase();
if(info.indexOf('mobile') != -1){
alert('這是移動設備!');
}else{
return true;
alert('這是PC設備!');
}
console.log(info);
}
~~~
3. 引入js文件的方法：
* * * * *
~~~
//jQuery
function importJs(src) {
var hm = document.createElement("script");
hm.src = src;
var h = document.getElementsByTagName('head')[0];
h.appendChild(hm);
}
//原生JS
function importJs(src) {
var hm = document.createElement("script");
hm.src = src;
var s = document.getElementsByTagName("body")[0];
s.parentNode.insertBefore(hm, s);
};
//示例，引入jquery
importJs('https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js');
//引入文件
function loadjscssfile(filename,filetype){
if(filetype == "js"){
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src",filename);
}else if(filetype == "css"){
var fileref = document.createElement('link');
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type","text/css");
fileref.setAttribute("href",filename);
}
if(typeof fileref != "undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref);
}
}
~~~
4. 適配，兼容所有屏幕大小的設備：
* * * * *
~~~
function rem() {
//說明：此方法適用所有頁面，使用方法是頁面寬度即為設計稿寬度
//計算時用設計稿的具體大小除以t即可得到對應的rem單位值，o值為設計稿實際寬度
//假如設計稿只占屏幕80%且劇中的話，計算出來的rem單位值再乘以0.8即可
//t表示一個rem所代表的像素數(建議不要修改，過小拖動時會出現卡頓現象)
var t = 1000;
//表示設計稿的實際寬度
var o = 1903;
//n表示頁面(瀏覽器)寬度
var n = document.documentElement.clientWidth || window.innerWidth;
//h表示html頁面根的字體大小
var h = Math.floor(n / o * t);
document.querySelector("html").style.fontSize = h + "px";
};
rem();
window.onresize = function() {
rem();
}
~~~
5. 截圖功能：
* * * * *
~~~
//將DIV轉換成圖片,需引入[html2canvas.min.js] https://www.bootcdn.cn/html2canvas/
//#canv表示要轉換的divID名
//轉換方法:canvas.toDataURL()
function print() {
html2canvas($("#canv"), {
onrendered: function(canvas) {
$('.share_img>img').attr('src', canvas.toDataURL());
$('.share_product').hide();
}
});
}
~~~
6. 表格上下移動：
* * * * *
~~~
function check($td, oper) {
//$td當前點的所在td,oper表示方向：MoveUp:上移
var data_tr = $td.parent(); //獲取到觸發的tr
if(oper == "MoveUp") { //向上移動
if($(data_tr).prev().html() == null) { //獲取tr的前一個相同等級的元素是否為空
alert("已經是最頂部了!");
return;
} else {
$(data_tr).insertBefore($(data_tr).prev()); //將本身插入到目標tr的前面
}
} else {
if($(data_tr).next().html() == null) {
alert("已經是最低部了!");
return;
} else {
$(data_tr).insertAfter($(data_tr).next()); //將本身插入到目標tr的后面
}
}
}
~~~
7. 返回頂部功能：
* * * * *
~~~
function scroll(scrollTo, time, obj) {
//scrollTo:表示要返回到距離頂部的位置；time:表示整個過程的總時間；obj:表示原生獲取的滾動對象
var scrollFrom = $(obj).scrollTop();
i = 0;
runEvery = 5;
scrollTo = parseInt(scrollTo);
time /= runEvery;
var interval = setInterval(function() {
i++;
var t = (scrollTo - scrollFrom) / time * i + scrollFrom;
$(obj).scrollTop(t);
if(i >= time) {
clearInterval(interval);
}
}, runEvery)
}
~~~
8. 頁面滾動到指定位置（動態瞄點）功能：
* * * * *
~~~
方法一：獲取指定目標距離頂部距離，利用animate()函數完成。（推薦此方法）
$('#section2 .nav-box ul li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
var target = $(this).attr('value'); //獲取指定目標ID
var scrollTo = $('#' + target).offset().top; //獲取指定目標距離頂部距離
$("html,body").animate({
scrollTop: scrollTo + 'px',
},600)
})
方法二：獲取指定目標距離頂部距離與當前滾動條所在位置距離頂部距離的差值，利用setInterval()函數完成
$('#section2 .nav-box ul li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
var target = $(this).attr('value'); //獲取指定目標ID
var scrollTo = $('#' + target).offset().top; //獲取指定目標距離頂部距離
scroll(scrollTo, 500);
})
function scroll(scrollTo, time) {
var scrollFrom = $(document).scrollTop(); //獲取滾動條當前所在位置距離頂部的距離
i = 0;
runEvery = 5;
scrollTo = parseInt(scrollTo);
time /= runEvery;
var interval = setInterval(function() {
i++;
var t = (scrollTo - scrollFrom) / time * i + scrollFrom;
$(document).scrollTop(t);
if(i >= time) {
clearInterval(interval);
}
}, runEvery)
}
~~~
9. 滾動到某個section時，動態添加關鍵（共用）classname，常用于進/出場動畫展示。
*****
```
html模板
<div id="responsiveWrapper_sub">
<section>...</section>
<section>...</section>
<section>...</section>
...
</div>
js部分
function pageSlideIn() {
var items = $("#responsiveWrapper_sub").children("section");
var windowH = $(window).height();
var windowScroll = $(window).scrollTop();
var bottom_of_window = windowScroll + $(window).height();
for(var i = 0; i < items.length; i++) {
var bottom_of_object = $(items[i]).offset().top;
if(bottom_of_window >= bottom_of_object) {
$(items[i]).addClass("is-active");
}
}
}
```
10. 強制關閉頁面：
* * * * *
~~~
//強制關閉當前頁面(已打開)，實際是變成空頁面
window.location.href="about:blank";
//適合所有主流瀏覽器,執行此方法后，頁面打開時會自動關閉
function CloseWebPage(){
if (navigator.userAgent.indexOf("MSIE") > 0) {
if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
window.opener = null;
window.close();
} else {
window.open('', '_top');
window.top.close();
}
}else if (navigator.userAgent.indexOf("Firefox") > 0) {
window.location.href = 'about:blank ';
} else {
window.opener = null;
window.open('', '_self', '');
window.close();
}
}
~~~
11. 復制頁面中的信息：
* * * * *
~~~
//復制頁面中指定的信息，iOS移動端失效
$('.subtn').on('click',function(){
// 添加 copy 內容
var msg = $('.wechat').eq(0).text();
document.addEventListener('copy',function copy (e) {
e.clipboardData.setData('text/plain', msg);
e.preventDefault();
})
// 執行 copy 命令
document.execCommand('copy');
alert('復制成功');
window.location.href="mqqwpa://";//跳轉到QQ
window.location.href="weixin://";//跳轉到微信
})
//頁面寫法
<p class="qq" id="qq" ></p>
<button class="subtn" data-clipboard-action="copy" data-clipboard-target="#qq">點擊按鈕復制QQ群號</button>
//引入文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js"></script>
var clipboard = new ClipboardJS('.subtn');
clipboard.on('success', function(e) {
alert('復制成功');
});
clipboard.on('error', function(e) {
console.log(e);
});
~~~
12. 獲取指定鏈接中指定的參數值：
* * * * *
~~~
//獲取指定url或當前url指定參數值
function getUrlParameter(url,parameter) {
if(!url){
url = window.location.search;
}
var obj = {};
var arr = url.slice(1).split("&");
for(var i = 0, len = arr.length; i < len; i++) {
var nv = arr[i].split("=");
obj[decodeURIComponent(nv[0]).toLowerCase()] = decodeURIComponent(nv[1]);
}
//返回參數數組集合
return obj[parameter];
}
~~~
13. 獲取指定url搜索關鍵字
* * * * *
~~~
//獲取上一級頁面url
var preUrl = decodeURI(document.referrer);
//正則匹配，返回渠道名稱--type
var regexp = new RegExp("\.(baidu|sogou|so|soso|google|bing|ieche|yahoo)(\.(com|cn))","ig");
var typeName = regexp.exec(preUrl);
//獲取指定url搜索關鍵字
function getKeyWord(url, type) {
switch(type) {
case 'baidu': //百度
return getUrlParameter(url, 'wd') ? getUrlParameter(url, 'wd') : getUrlParameter(url, 'word');
break;
case 'sogou': //搜狗
return getUrlParameter(url, 'query');
break;
case 'so': //360
return getUrlParameter(url, 'q');
break;
case 'soso': //搜搜
return getUrlParameter(url, 'query');
break;
case 'google': //谷歌
return getUrlParameter(url, 'q');
break;
case 'bing': //必應
return getUrlParameter(url, 'q');
break;
case 'ieche': //IE
return getUrlParameter(url, 'searchword');
break;
case 'yahoo': //雅虎
return getUrlParameter(url, 'p');
break;
case 'sm': //神馬
return getUrlParameter(url, 'q');
break;
default: //默認返回0，表示不存在或直接訪問
return '0';
break;
}
}
~~~
- 我的爛筆頭
- 1、常用功能方法整合
- 2、jQuery基本函數
- 3、在頁面中添加圖片
- 4、精度算法
- 5、圖片懶加載
- 6、彈窗拖拽功能
- 7、彈幕功能
- 8、鼠標滾動事件
- 9、獲取頁面相關屬性
- 10、彈窗的三種展現方式
- 11、輪播功能
- 12、獲取唯一標識
- 13、CSS樣式效果
- 14、任意兩點的動態連線
- 15、全新接口功能
- 16、適配兼容
- 17、無刷新頁面更改URL
- 18、定時器的那些事
- 19、關于iframe的常見問題
- 20、設置不同的時間
- 21、關于select-option
- 22、省市級聯
- 23、省市級聯數據
- 24、關于數據傳輸問題
- 25、問題分支
- 那些年我們一起走過的神坑
- 1、關于console的使用
- 2、關于數組
- 1、數組的賦值
- 2、數組的常用方法
- 3、關于移動端的bug
- 4、關于視頻的bug
- 5、那些坑坑洼洼
- 6、關于字符串
- 1、字符串的常用方法
- 頁面布局
- 1、背景固定的滾動頁面
- 心得
- Node.js
- 1、安裝環境
- ThinkPHP 5.1
- 1、訪問格式