web前端
关注
分享
扫一扫
#麻辣小龙虾#
路漫漫其修远兮，吾将上下而求索。
展开
-
js 策略模式实现大规模表单验证
我们在做页面开发的时候有时候会遇到一些比较多的表单页面，比如个人信息，企业信息，设备信息等，里面都是包含很多的字段，每个字段需要校验的规则其实是不一样的，这样我们在提交表单的时候页面要做校验工能怎么办呢？维护起来是不是很头疼？原理就是将校验的方法抽离出来成为一个公共维护的对象，将对应的规则属性名跟对应数据的属性名相关联在一起，通过校验规则中的type 字段去找到对应检验规则方法，通过校验方法会返回对应的标识，不通过则会给出对应规则配置的错误提示语。整体代码：（ps: 用vue写的组件）原创 2022-11-25 14:35:14 · 404 阅读 · 1 评论 -
js 实现页面隐藏、关闭、刷新给出对应的提示
我们在做项目的时候经常会遇到一些需求，比如在某些页面当点击浏览器刷新 或者关闭的时候会有对应的提示，是否离开或者重新加载此网站。比如csdn写文章的时候就有这个弹窗，这功能就是用onbeforeunload实现的。浏览器切换其他页面或者最小化的时候触发，（ps: 常用于检测考试作弊行为）一般来说，我们希望使用 Page Visibility API，在用户没有看到页面时停止不必要的进程，或者执行一些后台操作。可以下面这几种情况：当用户离开页面时，暂停视频、轮播图或动画。停止一些实时获取数据的API。原创 2022-10-26 11:30:17 · 4668 阅读 · 0 评论 -
vue+vuex实现2D可视化图形编辑器
随着物联网的快速发展，人们对物联网设备的数据监控可视化的需求越来越强烈，为了解决企业设备数据监控可视化痛点，当康科技经过不断的努力，研发了一套基于物联网的可视化图形编辑器，用户编辑器可以通过该编辑器实现自定义上传图片，和自己所需的组件图标，通过拖拽，移动等方式编辑对应的可视化图形界面，动态绑定设备数据，实现系统组态数据显示。微信公众号 搜索“当康AIOT”，即可关注我们。6、针对不同的设备类型不同的数据绑定。北方供暖锅炉房可视化。...............原创 2022-08-30 15:08:59 · 5524 阅读 · 12 评论 -
vue使用G6绘制树形图
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script> <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script src="https://gw.alipayobject.原创 2022-01-27 16:57:07 · 2233 阅读 · 1 评论 -
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 · 1658 阅读 · 3 评论 -
高德地图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 · 2065 阅读 · 2 评论 -
antv G6实现拓扑树绘制
<template> <div id="antV-G6"></div></template><script>import G6 from '@antv/g6';export default { name: 'G6', mounted () { this.int(); }, methods: { int () { G6.registerNode('card-node', { .原创 2021-06-19 16:03:18 · 1288 阅读 · 0 评论 -
nginx 使用upstream 模块实现负载均衡
最近在项目开发的时候遇到需要使用集群的配置，需要使用nginx做负载均衡，于是就研究了下如何使用nginx做这块的东西。1、首先准备三台linux服务器做练习原创 2021-05-28 16:03:15 · 1423 阅读 · 1 评论 -
vue实现百度echart地图省市县点击下钻效果
最新在做项目的时候用到一个地图，这个地图是要离线使用的，之前做过的百度地图用的都是在线版本的，但是如果不连接外网的时候就无法显示了，现在要做的是一个不接外网的东西，然后要在地图上对应的经纬度显示项目点。点击每个城市会显示对应的城市。于是研究了下echart的map地图，实现了下面的效果。代码如下：<template> <div class="echart-bmap_wrapper"> <div class="btn"> <e原创 2021-03-28 23:25:51 · 2763 阅读 · 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 · 1212 阅读 · 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 · 1785 阅读 · 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 · 15547 阅读 · 0 评论 -
HTML复杂表格绘制实现思路
最近在做项目的时候遇到一个需求，要做一个表格，这个表格是Excel里面业务人员绘制好的，表格结构比较复杂，如果要自己一个一个地用table去编写需要花很长的时间，于是想了下要怎么去实现复杂表格的方案，话不多说。比如如果要实现下面的表格（这个还算好的了，如果更复杂那应该怎么办）：于是，我想了下，能不能找到一些工具插件之类的去实现，找了一两个小时之后发现还是没有，然后以前刚毕业的那段时间在...原创 2020-03-07 18:44:55 · 4792 阅读 · 1 评论 -
自己实现web响应式导航菜单效果（兼容PC移动端）
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>响应式菜单切换效果</title> <link rel="stylesheet" href="./css/menu.css" /></head>&...原创 2019-10-17 16:16:50 · 2659 阅读 · 2 评论 -
js实现拖拽元素实现选择和删除代码
我们上网的时候讲过一些平台在选择一些选项的时候采用拖拽的方式将选项拖入指定位置完成选择，现在我们就自己来实现一下类似的效果。结果如下：代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js置顶动画</title>...原创 2019-10-15 09:57:51 · 682 阅读 · 0 评论 -
js滑动进度条效果
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js滑动进度条效果</title> <style> *{margin:0;padding:0;user-select:none;} ...原创 2019-10-12 15:55:50 · 794 阅读 · 0 评论 -
当function遇到return函数真的执行结束了吗？
以前一直觉得当函数知道到return 语句的时候，那么函数这回终止执行下面的语句，最近在看《你不知道的javascript》突然发现，貌似不一定。代码一:function a(){ return 111; console.log("adfdsa"); }结果：代码二:结果：是不是感觉到很意外？按理来说当程序执行到 try里面的 return语句的时候就应该结束执行跳出来，但是事实并非如原创 2017-12-11 09:43:39 · 5103 阅读 · 0 评论 -
熊猫TV全部分类页面布局实现效果
每天看直播，突然看了一下熊猫TV上的全部分类页面的布局，左边宽度固定不变，右边宽度随窗口宽度变化而变化。于是想了一下要怎么实现。原效果如下：实现原理：就是左边用fixed定位浏览器，然后右边的div定位padding-left = 左边的宽度，那么就可以实现左边固定，然后右边随窗口宽度变化而变化了。效果： <!DOCTYPE html><html lang...原创 2018-04-07 12:18:05 · 689 阅读 · 0 评论 -
大屏幕banner广告图水平居中的布局思路
在项目开发过程中，很多时候会涉及到1920以上的大图滚动广告，但是1920在小的屏幕上不会居中显示的，因为小屏幕宽度达不到1920px。就如我自己的笔记本一样，只有1366的分辨率，如图所示。但是我们又需要将大图片在各大屏幕上都可以水平居中显示，那应该怎么办呢？有人说可以通过js啊，这个是一种思路，现在还有一种更好的思路。 就是比较小的宽度（比如800px ）的父元素作为容器，设置mar...原创 2018-04-07 11:44:45 · 913 阅读 · 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 · 3000 阅读 · 0 评论 -
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 · 607 阅读 · 0 评论 -
H5创建webApp保存到桌面。
苹果端保存到桌面代码：（注意尺寸是57x57） <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-a...原创 2018-03-13 23:06:53 · 11895 阅读 · 1 评论 -
使用div模拟默认select效果代码。
我们在开发过程中很多时候都发现系统默认的select可能有点丑，或者有时候并不能满足UI设计的样式要求，于是就得自己写一个模拟出效果，并可以向服务端传送数据。大年初三敲代码，只是闲来敲敲。。。。。。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...原创 2018-02-18 23:45:48 · 2300 阅读 · 0 评论 -
javascript倒置字符串的方法
javascript倒置字符串的方法方法一：var str = "abcdefg"; //常规方法使用for循环加charAt function reverse(str){ var result =""; for(var i = str.leng原创 2018-01-09 15:47:37 · 1500 阅读 · 0 评论 -
防百度知道中心页面动画效果
最近在百度知道中心看到一个动画挺有意思的，就想了一下看怎么实现，百度原效果如下：码云地址：码云上的demohtml代码：html lang="en">head> meta charset="UTF-8"> title>baidutitle> link rel="stylesheet" href="css/baidu.css"> script sr原创 2018-01-06 14:16:04 · 321 阅读 · 1 评论 -
原生javascript防淘宝商品详情实现放大镜效果
我们经常逛淘宝的时候到淘宝商品详情看的时候，会经常使用到商品图片的放大镜功能，以前一直不知道怎么实现，遇到基本上都是网上找代码改，今天就用原生的js实现以下放大镜效果。码云上的代码： js淘宝放大镜效果效果如下图所示（ps：请忽略掉图片那个丑逼）： 实现原理：准备好大图（清晰的）和小图，两张图片必须一样只是放大或者缩小了而已，鼠标移入小缩略图的时候，上面的小图显示相应的图片，当原创 2018-01-14 17:22:34 · 1961 阅读 · 0 评论 -
javascript调用打印页面接口实现页面打印功能
效果图如下：代码如下：原创 2017-12-18 00:16:36 · 5425 阅读 · 1 评论 -
原生javascript实现右键菜单效果
最近看js高级程序设计的时候突然看到了contextmenu属性，之前在做项目的时候也遇到过，用来阻止鼠标右键弹出，（ps:禁止别人复制），今天突然想了下试着用这个属性来实现以下右键菜单效果。原创 2017-12-25 23:18:55 · 2632 阅读 · 1 评论 -
纯CSS实现3级导航菜单效果。
<div class="main"> <ul id="subMenu"> <li class="item01"> <span class="arrow-right"></span> <a href="#">导航1</a>原创 2017-12-15 15:41:15 · 741 阅读 · 0 评论 -
自己封装的兼容事件处理eventHandler.js
(function(obj){ //绑定事件 obj.prototype.addEvent = function(elem,type,fn,boolean){ if(elem.addEventListener){ elem.addEventListener(type,fn,boolean); }else if(elem.atta原创 2017-12-01 16:45:38 · 791 阅读 · 0 评论 -
CSS3边框旋转动画实现效果
动画结果如下：以前有看到过相应的动画，想了一下实现思路，就是用4个div分别定位模拟上下左右边框，然后根据定位top、left、right、bottom4个位置定位，再用css3中的transition实现相应的鼠标移入动画效果。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name原创 2017-12-12 17:32:46 · 7188 阅读 · 0 评论 -
CSS实现瀑布流等分布局效果，兼容各大主流浏览器
效果如下：代码： 首页原创 2017-12-11 14:21:44 · 7875 阅读 · 1 评论 -
CSS两侧固定宽度高随父元素变化，中间宽度随窗口宽度变化而变化布局效果
效果如下：代码如下：原创 2018-04-07 12:37:08 · 1455 阅读 · 1 评论 -
P标签里面为什么不能添加div标签
很多刚接触html的同学可能比较少注意到这个问题，html标签里面是不是可以随便放标签，答案是肯定不行的。为什么呢？ 我们先看一张图代码图然后浏览器渲染出来的DOM是这样的 本人使用的浏览器是chrome 看到区别了么，命名我们已经将p标签包裹在div外面了，为什么他们跑出来了呢？HTML写一个div就可以布局玩所有页面，但是为什么要有那么标签，那是因为每个标签都有每个...原创 2018-05-18 18:35:51 · 3527 阅读 · 3 评论 -
Coookie的设置、获取、清除操作
span:nth-of-type(3){background:red;}div{ padding:20px; margin:20px;}Coookie的设置、获取、清除操作姓名：原创 2017-05-13 11:58:50 · 1163 阅读 · 1 评论 -
js实现页面显示加载进度条效果
我们上网的时候经常会看到一些平台或者网站顶部在页面加载的时候显示加载的进度条，这样用户可以知道还有多少没有加载完，给用户比较友好的用户体验效果，现在我们就来模拟一下这个效果是如何去实现的。页面加载一般来说是资源加载的问题，资源主要还是css、js、img、视频等资源，这些资源加载完成后都会触发一个onload事件，这样我们就可以在事件里面做一些事情，主要原理是计算页面资源的总数，然后资源载入的...原创 2019-10-11 18:26:00 · 3721 阅读 · 0 评论 -
js点击选项置顶动画效果
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js置顶动画</title> <style> *{margin:0;padding:0;} ul {width: 1000px;margi...原创 2019-10-10 13:41:45 · 1077 阅读 · 0 评论 -
原生javascript实现上下左右中间八个点控制元素大小、旋转角度、拖拽位置功能
最近在接触一个简单的图形编辑器，要求是要实现web页面加载图标元素并可以通过上下左右中间八个点鼠标控制元素大小。拖拽功能比较简单，一般都比较容易实现，主要是旋转和八个点控制元素的大小，旋转是相对难理解一点，需要到一些数学问题，关于坐标系的知识。整个demo源码下载地址：点击下载源码通过 Math.atan可以计算出反正切的值，从而推算出鼠标移动到哪个象限的时候的角度。四个点的拖拉也这...原创 2019-08-14 21:28:30 · 2736 阅读 · 1 评论 -
用户登录拖动验证码实现原理详解。
我们经常看到登录一些网站或者平台的时候会出现一些需要拖动验证码，实现验证功能，如斗鱼TV所示，于是就想了下这个要怎么实现，自己看了下他的html结构，是两个canvas，然后实现对接，原理应该是一个canvas作为背景然后，另一个canvas在原来的背景canvas里面扣一张图，然后拖动元素，当元素面积接近一个百分比的时候就认为两个元素重合了，验证通过了。大概就是这样的原理~！于是自己想了...原创 2019-07-18 18:36:03 · 6800 阅读 · 2 评论 -
window.postMessage()实现往iframe页面里面发送消息
window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。一般...原创 2019-07-01 17:53:25 · 6507 阅读 · 2 评论