随笔分类 - javascript
摘要：最近要开发一个轮播图的看板页面，试用下bootstrap的轮播图组件，因为分页器的部分需要自定义（文字过长需要放到轮播图区域的外面），使用 List group组件作为轮播图的分页器放在左边。 <!DOCTYPE html> <html lang="en"> <head> <meta charset
阅读全文
摘要：UI类库 bootstrap 12栅格式布局，响应式布局，多种常用的组件 https://v5.bootcss.com/ layui 是一套开源的 Web UI 组件库，多种常用的组件，极易上手，拿来即用。 https://layuion.com/ TOAST UI 包括Chart、Editor(文
阅读全文
摘要：spc <div id="myDiv" style="width: 600px"></div> <script src="../plugins/d3.3.5.17.min.js"></script> <script src="../plugins/plotly.min.js"></script> <
阅读全文
摘要：方法： <script src="../plugins/d3.3.5.17.min.js"></script> <script src="../plugins/plotly.min.js"></script> <script src="../plugins/jquery/jquery-1.9.1.j
阅读全文
摘要：直方图 <div id="myDiv" style="width: 600px"></div> <div id="myDiv1" style="width: 600px"></div> <div id="myDiv2" style="width: 600px"></div> <div id="myD
阅读全文
摘要：scatter散点图 折线图 <div id="myDiv" style="width: 600px"></div> <div id="myDiv1" style="width: 600px"></div> <div id="myDiv2" style="width: 600px"></div> <
阅读全文
摘要：SVG 使用XML描述2D图形 SVG中的元素和HTML元素一样，在输出图形前需要经过浏览器引擎的解析、布局计算和生成DOM树（SVG 元素太多时非常消耗性能），可以添加事件 SVG 对象的属性发生变化，浏览器自动重现图形 SVG绘制矢量图形，不依赖于终端设备的像素，可以随意放大缩小不会失真 适合场
阅读全文
摘要：FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件 语法： FileSaver saveAs(Blob/File data, optional DOMString filename, optional Boolean disableAutoBOM) 示例： <canvas
阅读全文
摘要：最近要改一个下载任务的需求，原来的代码要么使用ajax异步请求看不到下载进度，要么使用window.open(url，‘__blank’)打开一个新页面既看不到下载进度也要手动关闭新打开的窗口，于是决定自己封装一个下载任务的进度条提示框。由于前端框架使用的bootstrap，还是使用Toasts组件
阅读全文
摘要：HTML <canvas> 标签用于通过脚本（通常是 JavaScript）动态绘制图形。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" cont
阅读全文
摘要：页面上有一个echarts折线和柱形图，已有程序定时显示tooltip，现需要开发后续功能，点击折线图和柱形图时打开新的遮罩弹出层，然后bug就出现了，多次打开弹出层后，原有的定时显示tooltp的定时器乱了。 原代码如下： <!DOCTYPE html> <html lang="en"> <hea
阅读全文
摘要：创建一个请求实例，发送请求 var xhr = new XMLHttpRequest(); xhr.open('GET', 'test.php'); xhr.send(); 监控XMLHttpRequest对象的状态变化 xhr.onreadystatechange = function(){ if
阅读全文
摘要：元素 # 创建一个元素 document.createElement("a") #附加到父元素的最后 pararentEle.appendChild(childEle); #查找 document.getElementById("aa") document.querySelector(".filen
阅读全文
摘要：原来的web应用中文件下载都是打开一个新的窗口，文件自动下载后需手动关闭新打开的窗口，且没有下载进度显示。 <script> window.open(downloadUrl,'__blank'); </script> 利用bootstrap和Toasts和Progress组件写一个可以显示下载进度的
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
阅读全文
摘要：<script type="text/javascript" language="javascript" src="./plugins/jquery/jquery-1.12.4.min.js"></script><script type="text/javascript" language="jav
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
阅读全文
摘要：部分配置项 <link href="./plugins/fullcalendar-5.11.2/lib/main.css" rel="stylesheet" /> <script type="text/javascript" language="javascript" src="./plugins/
阅读全文
摘要：<link href="./plugins/fullcalendar-5.11.2/fullcalendar-scheduler/main.min.css" rel="stylesheet" /> <script type="text/javascript" language="javascript
阅读全文
摘要：<script> const range = [ { st: "2022-11-29 10:00", et: "2022-11-29 11:00", }, { st: "2022-11-29 15:00", et: "2022-11-29 19:00", }, ]; const startTime
阅读全文
