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 413 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 320 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 352 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 654 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 726 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 410 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 638 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 451 0

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

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

TAG layui

2021/05/07 11:18 364 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 827 0