Web-极四维博客

可一键部署应用的网站快速部署 Alist 等应用

可一键部署应用的网站（可免费使用）Zeabur - Deploy your service with one clickRailway-500h 运行时间 Render · The Easiest Cloud For All Your Apps【教程】只需一个浏览器！免费搭建永久 Alist 网盘，有手就行！哔哩哔哩 bilibili

2023/04/19 12:05 649 0

Image onerror 事件，网页图片加载失败时使用指定的默认图片

Image onerror 事件onerror 事件会在文档或图像加载过程中发生错误时被触发。 <img src="image.gif" onerror="alert(' 图片不能被加载。')"> 可使用在图片未成功加载时使用默认图片，如下：<img src="xxx.png" onerror="javascript:this.src='static/images/default.png';">理想情景：当 xxx.png 找不到时会触发 onerror 事件并且将 src 指向的图片，并正常显示不理想：本地的图片也加载有问题，此时会不断的触发 onerror 事件，导致死循环，故此方式有风险不推荐<script type="text/javascript"> function errorEvent(dom){ dom.src = "static/images/default.png"; dom.onerror = null; // 避免死循环 } </script> <img src="xxx.png" onerror="errorEvent(this)" />参考地址：https://www.cnblogs.com/yincece0316/p/10821861.html由于 errorEvent 函数已弃用（不推荐使用），官方推荐使用监听器监听错误：Element: error event - Web APIs | MDN (mozilla.org)。

2022/02/07 16:21 486 0

使用 ajax 实现文件上传

ajax 文件上传主要用到了 FormData，其 API 使用教程如下：https://developer.mozilla.org/zh-CN/docs/Web/API/FormDatahtml<input type="file" name="fileName1" id="fileName1"/><input type="button" onclick="sendToUser()" id="sendToUser" value=" 提交 " />js function sendToUser(){ // 在这里进行 ajax 文件上传用户的信息 var $file1 = $("input[name='fileName1']").val();// 用户文件内容 ( 文件) // 判断文件是否为空 if ($file1 == "") {alert(" 请选择上传的目标文件! ") return false; } // 判断文件类型, 我这里根据业务需求判断的是 Excel 文件 var fileName1 = $file1.substring($file1.lastIndexOf(".") + 1).toLowerCase(); if(fileName1 != "xls" && fileName1 !="xlsx"){alert(" 请选择 Execl 文件!"); return false; } // 判断文件大小 var size1 = $("input[name='fileName1']")[0].files[0].size; if (size1>104857600) {alert(" 上传文件不能大于 100M!"); return false; } boo1 = true; var type = "file"; var formData = new FormData();// 这里需要实例化一个 FormData 来进行文件上传 formData.append(type,$("#fileName1")[0].files[0]); // 多文件上传在这里继续 append //eg : //formData.append(type,$("#fileName1")[0].files[0]); $.ajax({ type : "post", url : "uploadToFile", data : formData, processData : false, contentType : false, success : function(data){if (data=="error") {alert(" 文件提交失败!"); }else{$("input[name='userUrl']").val(data); alert(" 文件上传成功!"); }} }); } 重点最后一段代码即可

2021/06/30 15:58 434 0

input[type=file] 上传按钮隐藏“未选择任何文件”

1、关联调用，隐藏上传框 <button onclick="chooseFile.click()"> 上传文件 </button><input type="file" id="chooseFile" style="display:none;"> 参考 https://blog.csdn.net/qq_28306215/article/details/853229442、使用 label for 指定标签 css.upload_bp input[type='file']{display: none;}.loadbp{ padding: 0 30px; height: 40px; border: 1px solid #dd5923; color: #dd5923; font-size: 16px; display: flex; align-items: center; box-sizing: border-box;}.loadbpsuccess{ height: 40px; background: #f5f7f9; border-radius: 2px; font-size: 16px; line-height: 40px; padding: 0 30px; color: #262626; letter-spacing: 0; text-align: center; margin-left: 15px; box-sizing: border-box; position: relative;}.loadbpsuccess span{ font-size: 20px; color: #000; position: absolute; top: -10px; right: 2px;}html<div style="display:flex;align-items: center;"> <label class="upload_bp" for="fileinp"> <input type="file" id="fileinp"> <p class="loadbp"> 上传附件 </p> </label> <p class="loadbpsuccess"> 附件 1.pdf <span>×</span></p> </div> 参考：https://blog.csdn.net/Dilemma_me/article/details/100120542

2021/06/30 15:28 811 0

js 解析 Markdown 文件并在前端显示

需要 js：1、jquery.min2、marked.min.js 可点击下载 js：https://hik.lanzoui.com/iBqQeq7hlta 代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>README</title> <link type="text/css" rel="stylesheet" href="css/markdown.css"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/marked.min.js"></script></head><body> <div id="content" class="markdown-body"></div></body><script> $(document).ready(function(){ // 读取 md 文件显示 $.ajax({ url: "README.md",//md 文件位置 type: "GET",// 请求方式为 get dataType: "text", // 返回数据格式为 text async: false, success: function (data) {// 请求成功完成后要执行的方法 $("#content").html(marked(data)); $('a').attr("target","_blank"); } }) })</script></html>

2021/06/15 09:30 826 1

前端解析 Excel 文件 -xlsx.core.min.js 使用

需要的 JS：https://code.jquery.com/jquery-3.1.1.min.jshttps://cdn.bootcss.com/xlsx/0.12.7/xlsx.core.min.js 读取 Excel 代码示例：<!DOCTYPE html><html><head> <title></title></head><body><input type="file" id="excel-file"></body><script type="text/javascript" src="xlsx.core.min.js"></script><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script> $('#excel-file').change(function (e) { var files = e.target.files; var fileReader = new FileReader(); fileReader.onload = function (ev) { try { var data = ev.target.result, workbook = XLSX.read(data, {type: 'binary'}), // 以二进制流方式读取得到整份 excel 表格对象 persons = []; // 存储获取到的数据} catch (e) {console.log(' 文件类型不正确 '); return; } // 遍历每张表读取 for (var sheet in workbook.Sheets) {if (workbook.Sheets.hasOwnProperty(sheet)) {var fromTo = workbook.Sheets[sheet]['!ref']; console.log(fromTo); var datas = workbook.Sheets[sheet]; console.log(datas); // 处理不规范的数据没有可以省略 for (var nums in datas) {console.log(nums); var num = nums.replace(/[^0-9]/ig, ""); console.log(num); var row_data = new Array(); row_data[0] = "A" + String(num); row_data[1] = "B" + String(num); row_data[2] = "C" + String(num); row_data[3] = "D" + String(num); row_data[4] = "E" + String(num); row_data[5] = "F" + String(num); row_data[6] = "G" + String(num); row_data[7] = "H" + String(num); row_data[8] = "I" + String(num); row_data[9] = "J" + String(num); row_data[10] = "K" + String(num); row_data[11] = "L" + String(num); row_data[12] = "M" + String(num); var arry_row = new Array(); var count = 0; for (var i of row_data) {if (datas[i]) {arry_row[count] = datas[i].v.replace(/\s*/g,""); count += 1; } } // 找到正确数据的列名 if (arry_row.indexOf(" 单位 ") < 0 || arry_row.indexOf(" 数量 ") < 0) {for (var i = 0; i < row_data.length; i++) {delete datas[row_data[i]]; } } else { // 修改读取范围 datas["!ref"] = row_data[0] + ":" + datas['!ref'].split(':')[1]; break; } } persons = persons.concat(XLSX.utils.sheet_to_json(datas)); break; // 只读了第一张表 } } console.log(persons); }; // 以二进制方式打开文件 fileReader.readAsBinaryString(files[0]); });</script></html>

2021/06/11 11:04 500 0

jQuery 点击按钮弹出窗口播放视频

jQuery 点击按钮弹出窗口播放视频。点击图片区域或者按钮即可弹出一个窗口，然后在窗口进行视频播放。可以将 class="videolist" vpath="./img/Estorage.png" ipath="http://127.0.0.1:8848/page/abc.mp4" 加在按钮或 a 标签上实现任意元素点击播放。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 点击播放视频 </title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body {background-color: #0964} .videolist { position: relative; float: left; width: 540px; height: 300px; margin-left: 230px; } .videolist:hover {cursor: pointer;} .videoed { width: 50px; height: 50px; position: absolute; left: 45%; top: 40%; z-index: 99; border-radius: 100%; } .videos { display: none; border: 1px solid #080808; position: fixed; left: 50%; top: 50%; margin-left: -320px; margin-top: -210px; z-index: 100; width: 640px; height: 360px; } .vclose { position: absolute; right: 1%; top: 1%; border-radius: 100%; cursor: pointer; } .con { height: 430px; width: 1000px; margin: 0 auto; } .masklayer { position: fixed; display: none; width: 100%; height: 1000px; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.8); z-index: 1000; -webkit-user-select: none; -ms-user-select: none; } </style> </head> <body> <div class="video"> <div class="con" style="margin-top: 100px"> <div class="videolist" vpath="./img/Estorage.png" ipath="http://127.0.0.1:8848/page/abc.mp4"> <img src="./img/Estorage.png" width="540px" height="300px" />  <img src="./img/circle.png" class="videoed" />  </div> <div class="masklayer">  <div class="videos"></div>  </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script> $('.videolist').each(function() { // 遍历视频列表 $(this).click(function() { // 视频被点击后执行 var img = $(this).attr('vpath'); // 获取视频预览图 var video = $(this).attr('ipath'); // 获取视频路径 $('.videos').html("<video id=\"video\" poster='" + img + "' style='width: 640px' src='" + video + "' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"./img/close.png\" width=\"25\" height=\"25\"/>"); $('.videos').show(); // 视频窗口弹出 $('.masklayer').show(); // 遮罩层弹出 $('body').css('overflow', 'hidden'); // 禁止滚动 winHeight = document.body.clientHeight; $(".masklayer").height(winHeight + 5000 + "px"); }); }); function close1() {var v = document.getElementById('video'); // 获取视频节点 $('.videos').hide(); // 点击关闭 $('.masklayer').hide(); // 遮罩层隐藏 v.pause(); // 停止 $('.videos').html(); $('body').css('overflow', 'auto'); } </script> </body></html>

2021/06/09 09:54 771 0

修改 npm 为国内源

查看当前源地址 npm config get registry 修改 npm 源 npm config set registry https://registry.npm.taobao.org 查看 express 信息 npm info express

2021/05/24 10:08 531 0

layui 时间选择框容器高度不够闪退问题

解决 layui 时间选择框容器高度不够闪退问题加上 trigger: 'click'laydate.render({ elem: "#inDate", trigger: 'click'});

TAG layui

2021/05/07 11:18 449 0

JS 实现复制 HTML 表格单元格内容

<table> <tr><td> 姓名：<span onclick="copyContent(this);" title=" 点击复制 "> 张三 </span></td></tr> <tr><td> 姓名：<span onclick="copyContent(this);" title=" 点击复制 "> 李四 </span></td></tr></table><input id="copy_content" type="text" value="" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"/><script type="text/javascript"> function copyContent(ElementObj){ // 获取点击的值 var clickContent = ElementObj.innerText; // 获取要赋值的 input 的元素 var inputElement = document.getElementById("copy_content"); // 给 input 框赋值 inputElement.value = clickContent; // 选中 input 框的内容 inputElement.select(); // 执行浏览器复制命令 document.execCommand("Copy"); // 提示已复制 alert(' 已复制 '); }</script>select() 方法只对 <input> 和 <textarea> 有效，所以，要获取到点击的值，放到 input 标签中，再选中复制

2021/04/13 11:25 918 0