#### 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、访问格式