js插件
文章平均质量分 71
checkMa
雪千山,何处寻得,人间春色
展开
-
使用css和canvas实现鼠标长按环形进度条
需求鼠标长按圆形按钮,实现环形进度条效果。一开始做了css的效果,但是css的圆环看起来不圆,所以就用canvas,但是canvas也有缺点,首先是锯齿严重,其次是渲染不方便,需要调用生成N个实例。还是得根据具体使用场景来选择方案了。效果代码案例由于文字部分自定义需求比较大,就不写死了,有需要可自行定义,可参考 drawTextCB回调<!DOCTYPE html><html> <head> <meta charset="UTF-8" /原创 2021-12-13 10:12:38 · 1118 阅读 · 0 评论 -
使用jq简单实现滚动定位到指定元素
前言滚动是一个很常用的属性,我们需要对它很熟悉,不然就容易踩坑。比如我今天想通过几行简单的代码实现滚动到指定元素上,却遇到了一个坑。即offsetTop 到底是以谁作为父级容器来计算距离?offsetParent又是什么?用到的apioffsetTopHTMLElement.offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。offsetParentHTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(原创 2021-10-12 15:33:47 · 3006 阅读 · 0 评论 -
bootstrap-table异步ajax请求无限刷新
bootstrap-table出现无限刷新原因: 假如下面的代码list为空数组,但是total又不为0,则会触发 bootstrap-table的刷新机制,从而无限刷新。 //初始化Table $("#table").bootstrapTable({ ajax: function (params) { var p = { pageNum: this.options.pageNumber, pageSize: this.options.pageS原创 2021-09-16 15:34:15 · 1036 阅读 · 0 评论 -
写一个简单的转转小游戏
写一个简单的转转小游戏最近由于个人好奇,想实现一个H5的转转小游戏,于是写了一个简单的demo,可自行可定义转圈数,时间,以及加速减速等效果。效果图片以下代码可直接运行<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> &l原创 2021-09-09 11:25:39 · 212 阅读 · 0 评论 -
exceljs解析excel的日期出错
exceljs解析excel的日期出错excel数据js解析数据根据多次测试结果发现所有时间都多了8个小时,所以将数据结果各减去8个小时即得正确结果,那么原因呢?原因一般百度查询,发现原因1、excel的日期是以1900-1-0开始计算的,既1900-1-1就是1天;2、js的Date是以 1970-1-1 08:00:00 开始的;所以找到exceljs解析日期的源码看了一下,发现好像还是有8小时没减。它只做了1970年-70年的计算。不知道是不是exceljs的bug...原创 2021-06-08 17:55:30 · 1148 阅读 · 0 评论 -
使用vis-network根据节点坐标定位环形工具栏
使用vis-network根据节点坐标定位demo代码<!doctype html><html><head> <title></title> <style type="text/css"> body{ padding:0; margin:0; } #mynetwork { width: 100%; height: 600px; border: 1px solid l原创 2020-06-19 12:03:35 · 1888 阅读 · 2 评论 -
使用js写个3d banner
要点3d轮播简单写法也比较简单,控制3d效果有三个重要的属性,分别是scaleY (控制3d y轴缩放),z-index (控制层级),left(定位);还有个transition(主要是设置动画时间等效果);后面请看效果图及代码效果图代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .b原创 2020-05-21 10:00:17 · 293 阅读 · 0 评论 -
react中使用printJS出现内联样式丢失
react中使用printJS出现内联样式丢失问题在react中使用printJS时,假如html标签上写的是内联样式,需要要加上targetStyles这个属性,使得标签的元素继承目标html样式;html<div id="print-box" style={{ fontSize: '30px', textAlign: 'center', l...原创 2020-04-27 11:45:06 · 3846 阅读 · 1 评论 -
使用js换算mm,cm,px
问题开始今天工作上遇到了一个问题,用户需要在网页上的A4纸上盖章,且章子必须尺寸与纸张尺寸需要一致。用户自己是可以设置印章尺寸的,但是我将印章的尺寸需要转化成px来定位,那么问题来了,如何将毫米mm转为像素呢?我在网上找了一堆答案,恕我直言,在座位的各位的答案,如同断水流大师兄所言。。。很多博客都是一大堆道理,然鹅实操呢?我看了十几二十篇博客,没一个能快速实现我想要的效果。假如你也看到了我写的...原创 2019-07-08 16:10:59 · 7803 阅读 · 2 评论 -
使用js编写一个拼图游戏
使用js编写一个拼图游戏目标先看看截图效果csshtmljavascript目标使用原生js编写一个拼图游戏,我这里写了两种拼图的方法。一种是拖拽拼图,一种是经典的九宫格拼图,可以自定义参数设置游戏难度先看看截图效果拖拽模式(拖拽图片切换图片)点击模式(点击图片与空白区域切换位置)不多说,直接上代码css #canvasBox{ margin: 0 auto; posi...原创 2019-02-20 11:01:38 · 2409 阅读 · 3 评论 -
使用openseadragon实现大图展
使用openseadragon实现大图展示目标:使用插件制作大图展示代码部分工具应用部分目标:使用插件制作大图展示需要用到js插件: openseadragon.js,需要用到切图工具:Deep Zoom Composer 代码部分<!-- 我是简单易懂的html--> <div class="content" > <div id='openSea...原创 2018-11-05 13:02:58 · 1703 阅读 · 1 评论 -
使用原生js编写一个鼠标移入图片放大效果
使用原生js编写一个鼠标移入图片放大效果目标先看看效果是不是你想要的,再看代码htmljavascript目标给图片添加鼠标移动方法效果先看看效果是不是你想要的,再看代码移入前移入后html &amp;lt;!-- css看着写 --&amp;gt; &amp;lt;div class=&quot;Box&quot; style=&quot;width:200px;height:200px;b原创 2018-11-07 12:15:50 · 5982 阅读 · 0 评论