javascript
关注
分享
扫一扫
#麻辣小龙虾#
路漫漫其修远兮，吾将上下而求索。
展开
-
vue 基于antV 实现流程图编辑器代码
最近在做流程图功能开发，发现阿里antV 有对应的可视化引擎，于是自己做了一个简单vue 基于antV 实现流程图编辑器代码。原创 2024-06-21 11:45:06 · 629 阅读 · 2 评论 -
js 策略模式实现大规模表单验证
我们在做页面开发的时候有时候会遇到一些比较多的表单页面，比如个人信息，企业信息，设备信息等，里面都是包含很多的字段，每个字段需要校验的规则其实是不一样的，这样我们在提交表单的时候页面要做校验工能怎么办呢？维护起来是不是很头疼？原理就是将校验的方法抽离出来成为一个公共维护的对象，将对应的规则属性名跟对应数据的属性名相关联在一起，通过校验规则中的type 字段去找到对应检验规则方法，通过校验方法会返回对应的标识，不通过则会给出对应规则配置的错误提示语。整体代码：（ps: 用vue写的组件）原创 2022-11-25 14:35:14 · 442 阅读 · 1 评论 -
js 实现页面隐藏、关闭、刷新给出对应的提示
我们在做项目的时候经常会遇到一些需求，比如在某些页面当点击浏览器刷新 或者关闭的时候会有对应的提示，是否离开或者重新加载此网站。比如csdn写文章的时候就有这个弹窗，这功能就是用onbeforeunload实现的。浏览器切换其他页面或者最小化的时候触发，（ps: 常用于检测考试作弊行为）一般来说，我们希望使用 Page Visibility API，在用户没有看到页面时停止不必要的进程，或者执行一些后台操作。可以下面这几种情况：当用户离开页面时，暂停视频、轮播图或动画。停止一些实时获取数据的API。原创 2022-10-26 11:30:17 · 4921 阅读 · 0 评论 -
js 实现随机抽取选餐效果源码
js 实现随机抽取选餐效果源码，闲来没事看到一个比较有趣的随机选餐效果，于是自己花了点时间去是实现，代码如下。原创 2022-10-13 18:26:36 · 1027 阅读 · 0 评论 -
vue+vuex实现2D可视化图形编辑器
随着物联网的快速发展，人们对物联网设备的数据监控可视化的需求越来越强烈，为了解决企业设备数据监控可视化痛点，当康科技经过不断的努力，研发了一套基于物联网的可视化图形编辑器，用户编辑器可以通过该编辑器实现自定义上传图片，和自己所需的组件图标，通过拖拽，移动等方式编辑对应的可视化图形界面，动态绑定设备数据，实现系统组态数据显示。微信公众号 搜索“当康AIOT”，即可关注我们。6、针对不同的设备类型不同的数据绑定。北方供暖锅炉房可视化。...............原创 2022-08-30 15:08:59 · 5833 阅读 · 12 评论 -
vue项目中封装websock并使用
import { randomString } from '@/utils/index.js';import router from '@/router/index.js';// ws配置信息export const webSocket = { ws: null, // ws实例 recTime: 5 * 1000, // 重连刷新时间 webSocketTime: null, // 定时请求发送心跳包id reconnentTime: null, // 唱失败从重连id par.原创 2022-04-12 16:05:30 · 1704 阅读 · 0 评论 -
javascript利用try-catch验证数据格式是否为json
javascript利用try-catch验证数据格式是否为json原创 2022-02-15 10:24:04 · 765 阅读 · 0 评论 -
earthSdk加载3D模型数据显示例子
<template> <div class="earthSdk" id="earthContainer"></div></template><script>export default { data () { return {}; }, mounted () { this.mapInt(); }, methods: { mapInt () { const XE = wi...原创 2021-08-30 17:11:59 · 1833 阅读 · 3 评论 -
vue实现高德地图多边形绘制电子围栏
<template> <div class="index"> <el-button type="primary" @click="drawRectangle">绘制多边形</el-button> <el-button type="primary" @click="editRectangle">编辑多边形</el-button> <el-button type="primary" @click="d...原创 2021-06-21 23:32:26 · 5240 阅读 · 27 评论 -
高德地图3D城市地图实现gps打点可视化数据显示
<template> <div id="amapContainer"></div></template><script>export default { name: 'amap3d', data () { return {}; }, mounted () { this.intAmap(); }, methods: { drawMap (city = '北京市', LngLats) {...原创 2021-06-20 14:25:42 · 2162 阅读 · 2 评论 -
javascript封装生成指定日期插件date.js
我们在做项目的时候经常会遇到一些需求，1、比如或者获取当天的结束时间23:59:59，2、当点的开始时间3、最近一周的时间4、本周开始结束的时间5、当月开始结束时间6、当年开始结束时间7、格式化标准时间等等，现在自己花了点时间封装了一个小的插件date.js专门处理这种需求，满足常见的日期处理功能使用。由于本人水平有限，如果有什么写的不对的地方望各位大神多多指点~！github地址：date.js...原创 2021-01-07 14:16:32 · 1020 阅读 · 1 评论 -
javascript封装树数据处理插件treejs
我们在做项目的时候经常会遇到管誉组织、部分、分类、等树结构的数据，在数据结构里面算是复杂类型的数据，处理起来会有点麻烦，一般都会使用到递归，最近自己在做项目的时候页遇到类似的需求，于是自己花了点时间封装了一个专门处理树数据的小插件，里面集成了一些常见的树处理方法，可以直接调用使用。代码不到300行，小巧易用，由于本人水平有限，可能写的不是很好，或者有些小bug，欢迎各位在使用过程中遇到问题指正错误，或者有更好的想法都可以留言交流。代码已经上传到gitee上了，有时间或者新的功能我会更新上去。欢迎下载使用。.原创 2020-12-08 11:12:05 · 1584 阅读 · 1 评论 -
javascript递归思路获取树节点的层级结构
做项目的时候我们可能会需要到点击树，然后获取到当前节点的层级结构数据，比如点击5级显示，1级-2级-3级-4级-5级 这种，用于显示层级，主要思路就时递归，递归获取当前节点，获取当前父节点，直到找到顶级的父节点为止。let treedata = [ { id: 174, name: '全部', parentId: 0, children: [ { ...原创 2020-12-04 10:13:03 · 8860 阅读 · 1 评论 -
VUE使用canvas实现签名组件，兼容PC移动端
效果如下：<template> <div class="sign"> <div class="content"> <canvas id="canvas" :width="width" :height="height"/> </div> <div class="btn"> <button @click="clearCanvas()">清除</button>原创 2020-08-30 10:26:10 · 1266 阅读 · 0 评论 -
js两个点经纬度计算两点之间的距离。
百度地图经纬度坐标拾取：http://api.map.baidu.com/lbsapi/getpoint/index.htmlvar EARTH_RADIUS = 6378137.0; //单位Mvar PI = Math.PI;function getRad(d) { return d * PI / 180.0;}/** * caculate the great circle distance * @param {Object} lat1 纬度 * @param {Ob原创 2020-07-02 15:50:15 · 1867 阅读 · 4 评论 -
js读取本地Excel内容
我们在做项目的时候可能会遇到一些需要导入导出excel数据的功能，网上看到一个开源的插件可以实现相关的功能，于是今天就花了点时间看了下这个插件的一些使用。插件github地址：https://github.com/SheetJS/js-xlsx/参考文章：https://www.cnblogs.com/liuxianan/p/js-excel.html代码如下：<!DOCT...原创 2020-04-24 15:16:40 · 16018 阅读 · 0 评论 -
js递归方式遍历寻找树形结构数据中的节点。
最近突然兴起了解树形结构数据，所以一时兴起想了下要如果去实现在树状结构数据中遍历寻找想要的节点。实现思路就是通过递归函数判断当前节点是否等于要找的节点id，如果不是再判断是否有children节点，再通过递归的方式将children节点传值到函数里面去调用这样就可以通过递归的方式遍历所有树形结构数据找到对应的节点。let data = [ { ...原创 2020-02-03 23:45:03 · 13693 阅读 · 1 评论 -
原生js实现对象数组根据key值排序
最近在做功能的时候需要对后台返回的对象数组根据key值进行排序，平时我们对数组进行排序一般用到的比较多就是sort直接使用，其实sort方法是可以入参函数进行排序的。语法：arrayObject.sort(sortby)sortby：可选，规定排序顺序。必须是函数。如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现...原创 2020-01-22 23:24:04 · 7064 阅读 · 2 评论 -
js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭，中间有个活动，然后看到他们软件公众号H5有个活动开始的倒计时的动画效果，于是想了下实现思路。<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js实现酷炫倒计时动画效果</title> &l...原创 2019-10-15 17:29:31 · 4724 阅读 · 1 评论 -
js实现拖拽元素实现选择和删除代码
我们上网的时候讲过一些平台在选择一些选项的时候采用拖拽的方式将选项拖入指定位置完成选择，现在我们就自己来实现一下类似的效果。结果如下：代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js置顶动画</title>...原创 2019-10-15 09:57:51 · 713 阅读 · 0 评论 -
原生javascript防淘宝商品详情实现放大镜效果
我们经常逛淘宝的时候到淘宝商品详情看的时候，会经常使用到商品图片的放大镜功能，以前一直不知道怎么实现，遇到基本上都是网上找代码改，今天就用原生的js实现以下放大镜效果。码云上的代码： js淘宝放大镜效果效果如下图所示（ps：请忽略掉图片那个丑逼）： 实现原理：准备好大图（清晰的）和小图，两张图片必须一样只是放大或者缩小了而已，鼠标移入小缩略图的时候，上面的小图显示相应的图片，当原创 2018-01-14 17:22:34 · 1999 阅读 · 0 评论 -
原生javascript编写手机端H5滑动效果
主要用到touchstart 、touchmove、touchend三个函数的编写。 效果如下：**代码：**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte原创 2018-03-31 12:00:57 · 3030 阅读 · 0 评论 -
原生javascript用面向对象的方式仿query实现链式调用。
原生javascript用面向对象的当时仿query实现链式调用。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&a原创 2018-06-04 23:18:54 · 669 阅读 · 0 评论 -
原生js实现ajax请求（带请求头header）和数据传参过程代码
一、Ajax 概述 Ajax 是 Asynchronous Javascript And XML 的简写Ajax是一门技术，并不是一门语言使用XHTML+CSS来标准化呈现 使用XML和XSLT进行数据交换及相关操作 使用XMLHttpRequest对象与Web服务器进行异步数据通信 使用Javascript操作Document Object Model进行动态显示及交互 使用J...原创 2018-07-02 00:21:03 · 76062 阅读 · 20 评论 -
原生javascript实现H5拖拽效果。
一、设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true 二、 ondragstart 和 setData()当元素被拖动时，事件触发，所调用的函数。上面例子代码中，ondragstart 属性调用了一个函数，drag(event)，规定被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值：functio...原创 2018-07-17 14:01:46 · 2369 阅读 · 1 评论 -
js获取短信验证码按钮倒计时代码。
(function(){ // 快速咨询 $('#getCode').click(function() { var mobile = $('#mobile').val();//手机号码的值 var _this = $(this); var mobileReg = /^1[3|4|5|7|...原创 2018-03-14 15:55:25 · 633 阅读 · 0 评论 -
javascript也可以通过中文id和class获取元素你知道吗？
以前以为html元素中的id和class等只能通过字母数字或者下划线等特殊字符命名，如果单存使用中文浏览器不会报错，但是js是获取不到的，但是今天逛论坛的时候发现不是这样的。代码如下：运行结果：论坛来源是这个：论坛链接问题需求是这样的：论坛大师回答是这样：**var item = arr[i].split(‘：’),o; (o = document....原创 2018-03-06 11:24:27 · 2905 阅读 · 0 评论 -
使用div模拟默认select效果代码。
我们在开发过程中很多时候都发现系统默认的select可能有点丑，或者有时候并不能满足UI设计的样式要求，于是就得自己写一个模拟出效果，并可以向服务端传送数据。大年初三敲代码，只是闲来敲敲。。。。。。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...原创 2018-02-18 23:45:48 · 2325 阅读 · 0 评论 -
javascript调用打印页面接口实现页面打印功能
效果图如下：代码如下：原创 2017-12-18 00:16:36 · 5540 阅读 · 1 评论 -
javascript倒置字符串的方法
javascript倒置字符串的方法方法一：var str = "abcdefg"; //常规方法使用for循环加charAt function reverse(str){ var result =""; for(var i = str.leng原创 2018-01-09 15:47:37 · 1541 阅读 · 0 评论 -
原生javascript防jquery的trigger触发鼠标事件
项目过程中会使用到用户触发了一个事件，需要对另外一个元素同样进行触发相应的事件然后执行相应的代码，jquery中就可以通过trigger实现trigger API今天想了一下，如果没有jq，那用js是怎么实现的呢？最近第二次看《javascript高级程序设计》这边书又有了一些收获。 如果是实现触发click事件，第一印象肯定是直接element.click(); 就可以了，那触发d原创 2018-01-16 16:19:03 · 1044 阅读 · 1 评论 -
原生javascript使用FormData Api实现upload文件显示进度条上传
FormData 对象的使用FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。你可以自己创建一个FormData对象...原创 2018-07-23 23:41:00 · 1401 阅读 · 1 评论 -
原生js页面滚动顶部显示滚动总进度条效果
最终效果： 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu原创 2018-08-16 10:30:40 · 1838 阅读 · 0 评论 -
原生js模拟框选选择效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-10-18 00:20:03 · 944 阅读 · 0 评论 -
Vue.js实现tab滑块效果
原创 2017-04-17 17:04:24 · 5047 阅读 · 1 评论 -
js 实现往web端复制内容添加自定义内容代码（类csdn代码版权效果）
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js 实现往web端选中内容添加自定义内容代码（类csdn代码版权效果）</title></head><body> <p id="content-h...原创 2019-09-25 17:44:41 · 631 阅读 · 1 评论 -
js 实现页面导航层级指示效果代码
我们上网经常看到一些页面层级指示的效果，比如淘宝、京东、百度百科等，用于指示用户浏览页面到哪里了。可以起到很好的交互效果，现在我们就来自己去实现以下类似的效果。主要用到的API是scrollIntoView和getBoundingClientRect方法，原理是监听页面滚动元素，当元素距离到浏览器视口一定的位置的时候就证明元素开始出现在页面的视口，就可以标识右边的指示栏。代码如下：...原创 2019-09-24 14:32:56 · 868 阅读 · 1 评论 -
js 递归思路构造树型结构数据
<!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-Com...原创 2019-08-20 10:22:12 · 1078 阅读 · 1 评论 -
原生javascript实现上下左右中间八个点控制元素大小、旋转角度、拖拽位置功能
最近在接触一个简单的图形编辑器，要求是要实现web页面加载图标元素并可以通过上下左右中间八个点鼠标控制元素大小。拖拽功能比较简单，一般都比较容易实现，主要是旋转和八个点控制元素的大小，旋转是相对难理解一点，需要到一些数学问题，关于坐标系的知识。整个demo源码下载地址：点击下载源码通过 Math.atan可以计算出反正切的值，从而推算出鼠标移动到哪个象限的时候的角度。四个点的拖拉也这...原创 2019-08-14 21:28:30 · 3123 阅读 · 1 评论 -
用户登录拖动验证码实现原理详解。
我们经常看到登录一些网站或者平台的时候会出现一些需要拖动验证码，实现验证功能，如斗鱼TV所示，于是就想了下这个要怎么实现，自己看了下他的html结构，是两个canvas，然后实现对接，原理应该是一个canvas作为背景然后，另一个canvas在原来的背景canvas里面扣一张图，然后拖动元素，当元素面积接近一个百分比的时候就认为两个元素重合了，验证通过了。大概就是这样的原理~！于是自己想了...原创 2019-07-18 18:36:03 · 6906 阅读 · 2 评论