js常用程式碼收集
阿新 • • 發佈：2018-11-01
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