随笔分类 - 前端
摘要：screenShotPlugin github地址： https://github.com/likaia/js-screen-shot/tree/master <script src="../plugins/screenShotPlugin.umd.js"></script> <div id="ap
阅读全文
摘要：css常用颜色定义 预定义的颜色名称：简单直观，颜色数量有限，语义不明确。 十六进制：使用 # 开头，后跟 3 位或 6 位十六进制数表示红、绿、蓝通道值。简洁紧凑，浏览器兼容性最佳，可读性差，难以直接理解颜色属性。 RGB/RGBA：通过红、绿、蓝通道值定义颜色，可附加透明度（Alpha 通道）。
阅读全文
摘要：position: sticky 是 CSS 中一种实用的定位方式，使元素在滚动时根据阈值在 相对定位 和 固定定位 之间切换。 混合定位：元素默认表现如 position: relative，当滚动到指定阈值（如 top: 10px）时切换为 position: fixed，滚动出父容器后恢复。
阅读全文
摘要：最近要写一个页面，上传 excel 文档，读一些固定栏位存入 DB，并做一些简单的计算，计算均值、标准差等。原本很简单的需求，计算的结果却和 excel 中公式计算结果对不上，并且相差不少，绝不是简单的 2.0 变成 2.0000000001 的问题。仔细检查发现原来 excel 中有些单元格中是小
阅读全文
摘要：有一个页面本来使用 2 组的 Bootstrap 的 List Group + Card(里面嵌套List Group的子项目数量的表格)，现在要增加 1 组变成 3 组，本来使用 row 和 col-2 类页面呈现还算布局合理，然增加 1 组后不能再使用 row 类(表格内容需要一定宽度显示)。只
阅读全文
摘要：Alpine.js 是一个轻量级的前端框架，旨在为开发者提供一种简单而强大的方式来构建动态用户界面。它的设计理念是少即是多，通过极简的 API 和极小的体积，让开发者能够快速上手并构建出功能丰富的交互式网页 技术特点 极简的 API：Alpine.js 的 API 设计非常简洁，开发者只需掌握少量的
阅读全文
摘要：Select2.js 是一个基于 jQuery 的 选择框 控件，它允许开发者创建更加美观、易用的下拉选择框。 特性：支持搜索功能、支持分组显示、支持动态数据加载、支持多选操作、支持自定义样式 简单使用 <script src="../plugins/jquery/jquery-1.12.4.min
阅读全文
摘要：lunr.js也是一个可以提供搜索的组件，只是不支持中文搜索和模糊搜索。也提供了匹配度分数。 <script src="../plugins/lunr-js/lunr.js"></script> <script> //不支持中文检索和模糊检索 //英文支持检索，不区分大小写，整个单词匹配 const
阅读全文
摘要：前端检索组件除了 flexsearch.js，还可以使用 fuse.js。fuse.js 支持中文检索，且较 flexsearch.js 提供了模糊检索、匹配度分数以及权重检索等。 简单使用 <script src="../plugins/fuse/fuse.min.js"></script> <s
阅读全文
摘要：说明文档往往有搜索框，可以根据关键字检索文档内容。我有时疑惑这种检索是后端 DB 检索还是其它的呢？ 拿 bootstrap-table 的说明文档看下：是由 algolia 提供的检索服务 api 简单的内容页面如果不想用检索服务，不用 Elasticsearch、Apache Solr、Sphi
阅读全文
摘要：jquery 版本引起的 bootstrap-table 组件表格未能渲染 最近写一个带分页的页面，使用了 bootstrap-table 组件，表格数据怎么都渲染不出来，控制台打印出了下面的信息： 一时有点懵，确认 js 代码及 bootstrap-table 用法没有任何问题后，将数据放入以前可
阅读全文
摘要：form中button未指明type时，默认type为submit 遇到了一个奇怪的现象：一个按钮打开一个Bootstrap模态框，模态框有几个表单字段和两个按钮，两个按钮可以关闭模态框，点击其中一个按钮关闭模态框后页面居然刷新了。仔细检查后发现点击的按钮未指明type，浏览器把按钮type默认为s
阅读全文
摘要：要写一个媒体文件切片上传，上传到 server 后 FTP 传输到远端 server。FTP 上传很简单，切片上传找到了 resumable.js 这个组件库。写demo记录下。 前端 <fieldset> <legend>video preview</legend> <div> <video id
阅读全文
摘要：在一个英文博客上看到用css实现的时间线，看着还是很简单的，写个demo记录下。 <style> .events::before { content: ""; position: absolute; top: 0; height: 100%; width: 1px; left: 50%; backg
阅读全文
摘要：某个页面有这样一个需求：一个固定宽度的div，若文字过长，则缩小字体填充。看到原来代码采用的是用 php 的 GD 库的 imagettfbbox 函数来计算文字的宽度。 <?php function getFontSize($text) { $base_fs = 14; $base_width =
阅读全文
摘要：经常会用到sweetalert2这个弹出层组件，整理记录下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, ini
阅读全文
摘要：SortableJS 是功能强大的 JavaScript 拖拽库 <link rel="stylesheet" href="../plugins/bootstrap-5.1.3/css/bootstrap.min.css" /> <link rel="stylesheet" href="../plu
阅读全文
摘要：偶然中看到了这个功能强大的表格组件，不仅支持分页、过滤、排序、树形表格等常见的功能，且支持分组显示、表格内编辑、统计计算、读本地文件、拖拽表格改变行列顺序、下载、excel剪切复制和基础编辑等多种功能。 常用配置项及表格实例化 <link href="../plugins/tabulator/css
阅读全文
摘要：ReadableStream <script> // TextDecoder将字节转换为字符串,默认 utf-8 编码 let uint8Array = new Uint8Array([72, 101, 108, 108, 111]); console.log(new TextDecoder().d
阅读全文
摘要：找好用的前端验证组件过程中发现了 parsley。大致看了下说明文档，支持 required、url、email、长度、范围、正则验证，基本上够用了，而且支持中文，本身没有 css 方便配合其它 css 框架使用，样式也是很好定义。简直非常好用了。结合 bootstrap 写个 demo 记录下。
阅读全文
浙公网安备 33010602011771号