建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
30個(gè)有用的JavaScript代碼片段(下）
今天這篇文章，接上昨天的《30 個(gè)有用的 JavaScript 代碼片段(上）》，我們把剩下的18個(gè)代碼片段分享在這篇文章中。
現(xiàn)在，我們就開始這篇文章的內(nèi)容吧。
13. 創(chuàng)建一個(gè) ![]()
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é)點(diǎn)的屬性（例如
）是可訪問的并且不需要“l(fā)oad”事件的偵聽器，但 是此規(guī)則的一個(gè)例外（另一個(gè)唯一的例外是 < 腳本>)
因此，如果 document.createElement('img') 沒有返回 Promise：
var loadedImg=document.createElement('img');
loadedImg.src=; // dataURL refers to the encoded image data 變量loadedImg不會(huì)被渲染，因?yàn)樵诜峙鋵傩詓rc時(shí)它仍然是未定義的。
14. 刪除所有嵌套子節(jié)點(diǎn)
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()使用遞歸來刪除所有嵌套元素。這對(duì)于防止先前不需要的子節(jié)點(diǎn)與后續(xù)附加的子節(jié)點(diǎn)累積是必要的，如下所示：
15. 選擇文本并將其復(fù)制到剪貼板 — 表單輸入和其他 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);
});使用示例：
雖然“復(fù)制到剪貼板”是最普遍需要的 JavaScript 功能之一，但還值得注意的是，所需的文本內(nèi)容同樣可能包含在表單元素中，例如 -