js常用代码收集
Posted 丹妮娃儿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js常用代码收集相关的知识，希望对你有一定的参考价值。
1. PC - js
- 返回指定范围的随机数(m-n之间)的公式
Math.random()*(n-m)+m
// event.preventDefault()会阻挡预设要发生的事件.
// event.stopPropagation()会阻挡发生冒泡事件.
// 而return false则是前面两者的事情他都会做：
// 他会做event.preventDefault();
// 他会做event.stopPropagation();
// 停止callback function的执行并且立即return回来
- 复制文本到剪切板
function copyToClipboard(data) {
const _tempInput = document.createElement(\'input\')
_tempInput.value = data.value
document.body.appendChild(_tempInput)
_tempInput.select()
document.execCommand(\'Copy\')
document.body.removeChild(_tempInput)
}
- 前端生成文件并下载
function createAndDownloadFile(fileName, content) {
const aTag = document.createElement(\'a\');
const blob = new Blob([content]);
aTag.download = `${fileName}.json`;
aTag.href = URL.createObjectURL(blob);
aTag.click();
URL.revokeObjectURL(blob);
}
- 高亮文本
function highlight(text, words, tag=\'span\') {
let i, len = words.length, re;
for (i = 0; i < len; i++) {
re = new RegExp(words[i], \'g\');
if (re.test(text)) {
text = text.replace(re, \'<\'+ tag +\' class="highlight">$&</\'+ tag +\'>\');
}
}
return text;
}
- 限制文本字数
function excerpt(str, nwords) {
let words = str.split(\' \');
words.splice(nwords, words.length-1);
return words.join(\' \') +
(words.length !== str.split(\' \').length ? \'…\' : \'\');
}
- 简单创建动态菜单下拉列表
function createMenu(items, tags=[\'ul\', \'li\']) {
const parent = tags[0];
const child = tags[1];
let item, value = \'\';
for (let i = 0, l = items.length; i < l; i++) {
item = items[i];
if (/:/.test(item)) {
item = items[i].split(\':\')[0];
value = items[i].split(\':\')[1];
}
items[i] = \'<\'+ child +\' \'+
(value && \'value="\'+value+\'"\') +\'>\'+
item +\'</\'+ child +\'>\';
}
return \'<\'+ parent +\'>\'+ items.join(\'\') +\'</\'+ parent +\'>\';
}
- 防止被Iframe嵌套
if(top != self){
location.href = ”about:blank”;
}
- 两种图片lazy加载的方式 第一个By JS中级交流群 成都-猎巫 第二个By 上海-zenki
// @description 准备为图片预加载使用的插件
// 使用的图片容器css类名为lazy-load-wrap
// 图片真实地址为data-lazy-src
// 当lazy-load-wrap容器进入视口，则开始替换容器内所有需要延迟加载的图片路径，并更改容器的加载状态
//第一种方法
$.fn.compassLazyLoad=function(){
var _HEIGHT=window.innerHeight,
_lazyLoadWrap=$(\'.lazy-load-wrap\');
var methods={
setOffsetTop:function(){
$.each(_lazyLoadWrap,function(i,n){
$(n).attr({
\'top\':n.offsetTop-_HEIGHT,
\'status\':\'wait\'
});
})
},
isShow:function(){
var _scrollTop=$(window).scrollTop;
//利用image容器判断是否进入视口，而非image本身
$.each(_lazyLoadWrap,function(){
var _that=$(this);
if (_that.attr(\'status\')===\'done\') {
return;
};
if (_that.attr(\'top\')<=_scrollTop) {
_that.find(\'img[data-lazy-src]\').each(function(i,n){
n.src=$(n).data(\'lazy-src\');
});
_that.attr(\'status\',\'done\');
};
})
},
scroll:function(){
$(window).on(\'scroll\',function(){
methods.isShow();
});
},
init:function(){
methods.setOffsetTop();
methods.isShow();
methods.scroll();
}
};
methods.init();
}
//第二种方法
var exist=(function($){
var timer=null,
temp=[].slice.call($(\'.container\'));
ret={};
for(var i=0,len=temp.length-1;i<=len;i++){
ret[i]=temp[i];
}
var isExist=function(winTop,winEnd){
for(var i in ret){
console.log(ret);
var item=ret[i],
eleTop=item.offsetTop,
eleEnd=eleTop+item.offsetHeight;
if((eleTop>winTop&&eleTop<=winEnd)||(eleEnd>winTop&&eleEnd<=winEnd)){
$(item).css(\'background\',\'none\');
new Tab($(item).attr(\'id\'),data).init;
delete ret[i];
}
}
}
return {
timer:timer;
isExist:isExist;
};
})($);
//第三种方法
Zepto(function ($) {
var swiper = new Swiper(\'.swiper-container\', {
pagination: \'.swiper-pagination\',
paginationClickable: true,
autoplay: 3000,
loop: true,
autoplayDisableOnInteraction: false
});
(function lazyLoad() {
var imgs = $(".lazyLoad");
var src =