随笔分类 - javascript
摘要：常用方法 <dl> <dt>常用方法</dt> <dd> <dl> <dt>直线(路径)</dt> <dd> <p>context.lineTo(x, y)</p> <canvas id="line" width="800" height="100"></canvas> <script> { con
阅读全文
摘要：php中的map、filter、reduce函数使用 有时候真的很头疼php中参数的位置，经常记错 $arr = [1, 2, 3, 4, 5]; // array_map — 为数组的每个元素应用回调函数 $arr_new = array_map(function ($val) { return
阅读全文
摘要：日常开发过程中会使用原生js和jquery设置获取checked、disabled属性，测试总结下。 原生js <dl> <dt>表单</dt> <dd> <p>名字：<input type="text" id="name" value="name" /></p> <p> 城市：<select id
阅读全文
摘要：之前有一天看到了这样的一段代码，居然可以使用dom的id直接调用方法和获取属性，真是刷新了我的认知了。 <div> <p id="content">aa</p> <button onclick="console.log(content.innerText)">打印内容</button> </div>
阅读全文
摘要：最近要在系统中增加一个桑基图，要求桑基图可以根据选择的分析因子重新绘图。 仔细看了下echarts的示例，桑基图本身很简单，困难的是如何根据数据资料整理成桑基图的数据格式，并且实现选择分析因子重新绘图。 研究了几天的数据资料，特将方法写个demo记录下。 <script src="./plugins
阅读全文
摘要：jquery ui 基于Jquery的开源网页用户界面代码库，其中的交互效果包括缩放（Resizable） , 拖动（Draggable） , 放置（Droppable） , 选择（Selectable） , 排序（Sortable）等非常好用，日期选择器到现在为止仍然很好用。 <script sr
阅读全文
摘要：最近要写消息持续向上滚动效果，记录下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1
阅读全文
摘要：最近领导给了个需求：一个web页面header和footer的部分不能随浏览器zoom in/out 改变样式及字体大小。 分析了需求和查阅相关资料后，写个demo，实现了整个页面不随ctrl+(+/-) 组合键或者ctrl+鼠标滚轮 缩放的效果，对于浏览器工具/设置的缩放没有效果。 键盘/鼠标事件
阅读全文
摘要：最近要开发一个打印物品铭牌标签的页面，从DB里面调出信息，打印出带n个条形码（水平和竖直方向都有）的12*10cm的标签，这种应用以前接触的少，特意研究记录下。 要打印非标准纸张，首先需要在目标打印机上新建纸张类型，规格设置为12*10cm，步骤如下： 设置-设备-打印机和扫描仪-打印服务器属性-创
阅读全文
摘要：<script> // Set // Set（集合）是一组唯一值的集合。每个值只能在 Set 中出现一次。Set 可以容纳任何数据类型的值。 // 创建 Set const letters = new Set(["b", "a", "c"]); console.log(typeof letters)
阅读全文
摘要：<script> // Function对象的call和apply方法：可以用来调用所有者对象作为参数的方法，通过call和apply方法，能够使用属于另一个对象的方法。 //call() 和 apply() 之间的区别：call() 方法分别接受参数。apply() 方法接受数组形式的参数。如果要
阅读全文
摘要：看了几篇文章，受益匪浅，写几个demo看下理解是否正确： 文章链接：Generator 函数的含义与用法 - 阮一峰的网络日志 (ruanyifeng.com) async 函数的含义和用法 - 阮一峰的网络日志 (ruanyifeng.com) 回调函数 <script> // 回调函数 func
阅读全文
摘要：localStorage生命周期是永久，除非用户主动清除localStorage信息，否则这些信息将永远存在。 sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页关闭，那么当前窗口或标签页通过sessionStorage存储的数据也就被清空了。 不同浏览器无法共享localSt
阅读全文
摘要：最近遇到了一个问题：有一个数据看板的页面运行了n天后突然页面崩溃了，爆出了out of memory的错误。页面不复杂，几个图表定时更新数据，没明白为什么长时间运行后会out of memory。 在每次请求后使用 console.log(window.performance.memory); 打印
阅读全文
摘要：最近一直在头疼生成pdf报告的问题，一个页面几个至几十个数量不等echarts图，后面的echarts图在生成的pdf中有些时候只有部分图形，即使是在页面上有时浏览器黑屏，感觉快崩溃了。 使用了--javascript-delay 30000仍然无法解决图不完整的问题 然后反复看了wkhtmltop
阅读全文
摘要：基础配置 <link href="./plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" /> <link href="./plugins/bootstrap-table/bootstrap-table.min.css" r
阅读全文
摘要：1 y轴名称放左边、辅助线、时间轴标签、数值轴间隔 <div id="main" style="height: 400px"></div> <script> var chartDom = document.getElementById("main"); var myChart = echarts.i
阅读全文
摘要：最近有一个需求，需要把页面上的echarts等js组件生成的图表放到pdf中。使用laravel框架，找到了laravel-snappy这个包，其底层是使用wkhtmltopdf来生成pdf。因为有把数据点都画到箱型图上的需求，找到了plotly.js这个组件，功能还是很强大的，可以轻松实现如下的效
阅读全文
摘要：<!-- 引入 G2 文件 --> <script src="./plugins/g2.v5.min.js"></script> <style> .container { display: flex; } .div { height: 500px; } </style> <!-- 创建图表容器 --
阅读全文
摘要：试用下一个swiper轮播图作为另一个swiper轮播图的分页器，解决同步问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="I
阅读全文
