30个有用的JavaScript代码片段(下）
今天这篇文章，接上昨天的《30 个有用的 JavaScript 代码片段(上）》，我们把剩下的18个代码片段分享在这篇文章中。
现在，我们就开始这篇文章的内容吧。
13. 创建一个 ![]()
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);注意：虽然大多数 HTML 元素节点的属性（例如
）是可访问的并且不需要“load”事件的侦听器，但 是此规则的一个例外（另一个唯一的例外是 < 脚本>)
因此，如果 document.createElement('img') 没有返回 Promise：
var loadedImg=document.createElement('img');
loadedImg.src=; // dataURL refers to the encoded image data 变量loadedImg不会被渲染，因为在分配属性src时它仍然是未定义的。
14. 删除所有嵌套子节点
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);
});使用示例：
注意：函数removeAllChildNodes()使用递归来删除所有嵌套元素。这对于防止先前不需要的子节点与后续附加的子节点累积是必要的，如下所示：
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 功能之一，但还值得注意的是，所需的文本内容同样可能包含在表单元素中，例如 - 提交需求
- 手机：13518219792
- 地址：成都市太升南路288号锦天国际A幢1002号
- 24小时服务热线：028-86922220
联系我们
028-86922220- 网页设计
- 网站制作
- 网站开发
网站建设服务
- 营销网站建设
- 百度快速排名
- 整站网站推广
网站推广服务
- 基础维护
- 网站改版
- 网站维护
网站运维服务
-
微信二维码
微信二维码
FOLLOW US
Copyright © 2025 资阳站青羊区美图齐众设计工作室（个体工商户） 资阳网站建设公司-选网站建设公司美图齐众！专业的网站制作公司！
All Rights Reserved 版权所有 蜀ICP备2025119604号-1