分类前端下的文章

2023-11-13

Javascript 实现阿拉伯数字转中文数字代码（仅适用亿位以下）：function numToChinese(num) { const CN_NUM = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; const CN_UNIT = ['', '十', '百', '千', '万', '十', '百', '千', '亿']; let numStr = String(num); let len = numStr.length; let result = ''; if (len === 0) { return '零'; } for (let i = 0; i < len; i++) { let n = numStr.charAt(i); let unitIndex = len - i - 1; let numIndex = parseInt(n); let preUnit = CN_UNIT[unitIndex]; let preNum = CN_NUM[numIndex]; let replaceNum = preNum ? preNum : ''; if (unitIndex > 0 && numIndex === 0) { replaceNum = ''; } else if (numIndex > 0) { replaceNum = preNum; } result += replaceNum + preUnit; } result = result.replace(/零(千|百|十|)/g, '零$1'); let matchs = (result.match(/([亿|万|千|百|十]{2,})/g))||[] for (const iterator of matchs) { result = result.replace(iterator,iterator.slice(0,1) + "零") } result = result.replace("一十","十") return result.endsWith("零") ? result.slice(0,-1) : result; } console.log(numToChinese(12));结果：十二

2023年11月13日
115 阅读
0 评论
0 点赞

2023-03-07

前端DPlayer播放器请求阿里云盘视频播放源失败前端DPlayer播放器请求阿里云盘视频播放源失败原因官方加入防盗链，原理是检测Referer头，如果没有检测到Referer则会拒绝响应。报错代码：<Error> <Code>AccessDenied</Code> <Message>You are denied by bucket referer policy.</Message> <RequestId>640729B9129C1F313670E856</RequestId> <HostId>ccp-bj29-video-preview.oss-enet.aliyuncs.com</HostId> <BucketName>ccp-bj29-video-preview</BucketName> <EC>0003-00000503</EC> </Error>解决方法在前端页面中加上该代码<meta name="referrer" content="never">参数地址

2023年03月07日
168 阅读
1 评论
0 点赞

2023-03-07

Python3 Flask模板渲染Url地址数据中JavaScript代码区块内出现字符丢失 Python3 Flask模板渲染Url地址数据中JavaScript出现字符丢失问题原因由于Flask框架在模板渲染时会自动进行转义，所以url等复杂的文本会进行自动转义从而导致丢失一些字符最后造成url无法访问所有扩展名为 .html 、 .htm 、 .xml 以及 .xhtml 的模板会开启自动转义模板可以利用 {% autoescape %} 标签选择自动转义的开关。代码详情config = { "url": "http://xxxxxxxxxxxxxxxxx" } ...... return render_template("index.html", config=config)url: "{{ config.url }}",解决办法关闭渲染时自动转义url: "{% autoescape off %}{{ config.url }}{% endautoescape %}"

2023年03月07日
146 阅读
0 评论
0 点赞

2023-03-05

JavaScript 生成瀑布流布局 JavaScript 生成瀑布流布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript实现瀑布流布局</title> <style> .box { display: grid; width: 100%; position: relative; grid-gap: 20px; align-items: start; } </style> </head> <body> <input type="text" placeholder="输入高" id="text" /> <input type="button" value="点我添加新元素" id="button" /> <div class="box" id="box"></div> <script> const color0x = () => { return `#${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}${Math.floor( Math.random() * 256 ).toString(16).padStart(2, '0')}${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}`; }; const ids = [] const column = 2 const box = document.getElementById("box") const button = document.getElementById("button") const text = document.getElementById("text") window.onload = () => { box.style.gridTemplateColumns = `repeat(${column}, 1fr)` for (const item of Array.from(new Array(column).keys())) { let div = document.createElement("div") div.style.width = "100%" div.id = "div" + item box.append(div) ids.push(div) } button.onclick = () => { let min = ids[0].offsetHeight let id = 0; for (let i = 1; i < ids.length; i++) { if (ids[i].offsetHeight < min) { min = ids[i].offsetHeight id = i } } let div = document.createElement("div") div.style.width = "100%" div.style.height = text.value + "px" div.style.margin = "5px" div.style.backgroundColor = color0x() ids[id].appendChild(div) } } </script> </body> </html> .box { display: grid; width: 100%; position: relative; grid-gap: 20px; align-items: start; } const color0x = () => { return `#${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}${Math.floor( Math.random() * 256 ).toString(16).padStart(2, '0')}${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}`; }; const ids = [] const column = 2 const box = document.getElementById("box") const button = document.getElementById("button") const text = document.getElementById("text") window.onload = () => { box.style.gridTemplateColumns = `repeat(${column}, 1fr)` for (const item of Array.from(new Array(column).keys())) { let div = document.createElement("div") div.style.width = "100%" div.id = "div" + item box.append(div) ids.push(div) } button.onclick = () => { let min = ids[0].offsetHeight let id = 0; for (let i = 1; i < ids.length; i++) { if (ids[i].offsetHeight < min) { min = ids[i].offsetHeight id = i } } let div = document.createElement("div") div.style.width = "100%" div.style.height = text.value + "px" div.style.margin = "5px" div.style.backgroundColor = color0x() ids[id].appendChild(div) console.log(div.style.backgroundColor); } }

2023年03月05日
157 阅读
0 评论
0 点赞

2023-03-05

JavaScript 生成随机颜色 JavaScript 生成随机颜色const color0x = () => { return `#${Math.floor(Math.random() * 256).toString(16).padStart(2, "0")}${Math.floor(Math.random() * 256).toString(16).padStart(2, "0")}${Math.floor(Math.random() * 256).toString(16).padStart(2, "0")}`; }; const color0x = () => { return `#${Math.floor(Math.random() * 256).toString(16).padStart(2, "0")}${Math.floor(Math.random() * 256).toString(16).padStart(2, "0")}${Math.floor(Math.random() * 256).toString(16).padStart(2, "0")}`; }; for (const item of document.getElementById("box").getElementsByTagName("div")) { item.style.backgroundColor = color0x() }

2023年03月05日
137 阅读
0 评论
0 点赞