建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
30個有用的JavaScript代碼片段(下）
今天這篇文章，接上昨天的《30 個有用的 JavaScript 代碼片段(上）》，我們把剩下的18個代碼片段分享在這篇文章中。
現(xiàn)在，我們就開始這篇文章的內(nèi)容吧。
13. 創(chuàng)建一個 ![]()
DOM 元素
// Code snippet to render ![]()
DOM element on the fly
const loadImage = (url) => new Promise((resolve, reject) => {
const img = new Image();
img.addEventListener('load', () => resolve(img));
img.addEventListener('error', (err) => reject(err));
img.src = url;
});// __USAGE Example__
var uploadFileInput=document.createElement('input');
uploadFileInput.type='file';
uploadFileInput.id='uploadFileInput';
document.body.appendChild(uploadFileInput);
function readFileAsDataURL(file) {
return new Promise((resolve,reject) => {
let fileredr = new FileReader();
fileredr.onload = () => resolve(fileredr.result);
fileredr.onerror = () => reject(fileredr);
fileredr.readAsDataURL(file);
});
}
uploadFileInput.addEventListener('change', async (evt)=> {
var file = evt.currentTarget.files[0];
if(!file) return;
var b64str = await readFileAsDataURL(file);
var _img = await loadImage(b64str);
_img['style']['width']=`${_img.naturalWidth}px`;
_img['style']['height']=`${_img.naturalHeight}px`;
_img['style']['margin']='2px auto';
_img['style']['display']='block';
document.body.appendChild(_img);
}, false);注意：雖然大多數(shù) HTML 元素節(jié)點的屬性（例如
）是可訪問的并且不需要“l(fā)oad”事件的偵聽器，但 是此規(guī)則的一個例外（另一個唯一的例外是 < 腳本>)
因此，如果 document.createElement('img') 沒有返回 Promise：
var loadedImg=document.createElement('img');
loadedImg.src=; // dataURL refers to the encoded image data 變量loadedImg不會被渲染，因為在分配屬性src時它仍然是未定義的。
14. 刪除所有嵌套子節(jié)點
const removeAllChildNodes = ((parentEle) => parentEle.children.length > 0 ? parentEle.removeChild(parentEle.children[0]) : null);// __USAGE Example__
const _scale = window.devicePixelRatio*2;
const size = 250;
const fontSize=size/_scale;
var canvasDisplay=document.createElement('div');
canvasDisplay['style']['width']=`${size+4}px`;
canvasDisplay['style']['height']=`${size+4}px`;
canvasDisplay['style']['margin']='1px auto';
document.body.appendChild(canvasDisplay);
var iconBtn_1=document.createElement('button');
iconBtn_1.type='button';
iconBtn_1.value='';
iconBtn_1.innerText='';
document.body.appendChild(iconBtn_1);
var iconBtn_2=document.createElement('button');
iconBtn_2.type='button';
iconBtn_2.value='';
iconBtn_2.innerText='';
document.body.appendChild(iconBtn_2);
function setIcon(icon) {
var canvas=document.createElement('canvas');
canvas.width=size;
canvas.height=size;
canvas['style']['margin']='1px auto';
canvas['style']['width']=`${fontSize}px`;
canvas['style']['height']=`${fontSize}px`;
canvas['style']['border']='1px dotted #6c757d';
canvas['style']['background']='transparent';
var ctx=canvas.getContext('2d');
ctx.scale(_scale,_scale);
ctx.font = `${fontSize}px Segoe Ui Emoji`;
ctx.textAlign = 'center';
ctx.textBaseline='middle';
ctx.globalAlpha=1.0;
ctx.fontVariantCaps='unicase';
ctx.filter='none';
ctx.globalCompositeOperation='source-over';
ctx.imageSmoothingEnabled=true;
ctx.imageSmoothingQuality='high';
ctx.letterSpacing='0px';
ctx.lineWidth=0;
ctx.shadowColor='rgba(0, 0, 0, 0)';
ctx.strokeStyle='#000000';
ctx.fillStyle='#ffffff';
const _x=((canvas.width/_scale)/2);
const _y=((canvas.height/_scale)/2);
ctx.fillText(icon, _x, _y);
removeAllChildNodes(canvasDisplay);
canvasDisplay.appendChild(canvas);
}
iconBtn_1.addEventListener('click', ()=> {
setIcon(iconBtn_1.value);
});
iconBtn_2.addEventListener('click', ()=> {
setIcon(iconBtn_2.value);
});使用示例：
注意：函數(shù)removeAllChildNodes()使用遞歸來刪除所有嵌套元素。這對于防止先前不需要的子節(jié)點與后續(xù)附加的子節(jié)點累積是必要的，如下所示：
15. 選擇文本并將其復制到剪貼板 — 表單輸入和其他 HTML DOM 元素
function selectCopyText(nodeId) {
let isVal=true;
let node = document.getElementById(nodeId);
try {
node.select();
try { node.setSelectionRange(0, 99999);} catch(err0) {}
} catch(err) {
isVal=false;
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
} else { console.warn("Could not select text in node: Unsupported browser."); }
} finally { navigator.clipboard.writeText(isVal ? node.value : node.innerText);}
}const strToCopy = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra accumsan in nisl nisi scelerisque eu ultrices. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Sodales ut etiam sit amet nisl purus.';
var _copyBtn=document.createElement('button');
_copyBtn.type='button';
_copyBtn.value='toCopy';
_copyBtn.innerText='Copy Textarea';
var _textarea=document.createElement('textarea');
_textarea.id='toCopy';
_textarea['style']['resize']='none';
_textarea['style']['width']='100%';
_textarea['style']['height']='100px';
_textarea['style']['display']='block';
_textarea.value=strToCopy;
document.body.appendChild(_copyBtn);
document.body.appendChild(_textarea);
var _copyBtn2=document.createElement('button');
_copyBtn2.type='button';
_copyBtn2.value='toCopy2';
_copyBtn2.innerText='Copy DIV';
var _div=document.createElement('_div');
_div.id='toCopy2';
_div['style']['width']='100%';
_div['style']['height']='100px';
_div['style']['display']='block';
_div['style']['border']='1px dashed #000000';
_div.innerText=strToCopy;
document.body.appendChild(_copyBtn2);
document.body.appendChild(_div);
_copyBtn.addEventListener('click', ()=> {
selectCopyText(_copyBtn.value);
});
_copyBtn2.addEventListener('click', ()=> {
selectCopyText(_copyBtn2.value);
});使用示例：
雖然“復制到剪貼板”是最普遍需要的 JavaScript 功能之一，但還值得注意的是，所需的文本內(nèi)容同樣可能包含在表單元素中，例如 -