#麻辣小龙虾#-CSDN博客

原创 javascript递归思路获取树节点的层级结构

做项目的时候我们可能会需要到点击树，然后获取到当前节点的层级结构数据，比如点击5级显示，1级-2级-3级-4级-5级这种，用于显示层级，主要思路就时递归，递归获取当前节点，获取当前父节点，直到找到顶级的父节点为止。let treedata = [ { id: 174, name: '全部', parentId: 0, children: [ { ...

2020-12-04 10:13:03 8094 1

原创 threejs使用精灵Sprite模型给场景3D模型打标签实例

精灵图Sprite效果是不管场景如何旋转，标签总是对着屏幕，可以用作对模型打标记，显示模型信息作用代码如下：<template> <div class="search"> <el-select v-model="input" filterable clearable placeholder="请输入项目名" @change="change"> <el-option v-for="(item, index) in ..

2020-11-03 17:05:18 7188 3

原创 element-UI配置多层级菜单

入口文件：<template> <div class="menu" id="menu"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <menuItem v-for="item in menuList" :key="item.id" :data="item" class="hor

2020-11-02 16:10:08 2134

原创 threejs加载C4D模型及材质渲染实例

最近在学习Threejs3D引擎使用，主要是为了实现web里面去实现3D模型的加载渲染，这样会比较直观的看到类似的效果，增加用户体验。第一步：加载C4D模型。将模型和材质导出二、加载主要插件模块<scripttype="text/javascript"charset="UTF-8"src="./libs/three/loaders/MTLLoader.js"></script><scripttype="text/javascript"charset...

2020-10-09 18:01:24 5272 1

原创 git命令

1、回退上一版本$ git reset --hard2、恢复到历史版本$ git reset --hard fae6966548e3ae76cfa7f38a461c438cf75ba9653、把修改推到远程服务器$ git push -f -u origin master 4、创建标签:$ git tag -a V1.2 -m 'WebSite version 1.2'5、查看标签:$ git tag$ git show V1.2 (要显示附注信息)6、tag 远...

2020-09-29 10:38:35 189

原创 threejs 灯光投影模型渲染demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></scr...

2020-09-29 10:20:58 772

原创 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&gt

2020-08-30 10:26:10 1079

原创 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 1660 4

原创 H5实现下拉刷新

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H5下拉刷新</title> <style> *{margin:0;padding:0;} #f...

2020-05-15 16:24:54 3415

原创 nginx服务端代理配置

我们开发的时候时候i经常会遇到跨域问题，一般情况下都是后端接口配置对应的请求头，允许跨域请求配置，但是有时候也需要到nginx针对不同的接口，进行不同的地址请求，现在我们就自己配置下nginx的代理。文章参考：https://blog.csdn.net/yeguxin/article/details/94020476proxy_pass proxy_pass指令中在nginx的两个模块...

2020-04-28 13:47:16 480

原创 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 14229

原创 HTML复杂表格绘制实现思路

最近在做项目的时候遇到一个需求，要做一个表格，这个表格是Excel里面业务人员绘制好的，表格结构比较复杂，如果要自己一个一个地用table去编写需要花很长的时间，于是想了下要怎么去实现复杂表格的方案，话不多说。比如如果要实现下面的表格（这个还算好的了，如果更复杂那应该怎么办）：于是，我想了下，能不能找到一些工具插件之类的去实现，找了一两个小时之后发现还是没有，然后以前刚毕业的那段时间在...

2020-03-07 18:44:55 4259 1

原创 vue封装可实现选中、新增、修改、删除功能的树组件

我们在开发项目的时候经常会遇到一些树形结构的数据结构，比如部门、班级、关系等等层级结构的数据，通常常规的展示方式一般是通过树的结构来展示出来，现在我们自己就来实现一个可以新增、修改、删除的树。实现的过程很简单，树一般都会采用递归思路，然后将数据展示出来。<div class="tree" id="Tree" ref="TreeNode"> <ul> ...

2020-02-08 19:03:14 2031 3

原创 js递归方式遍历寻找树形结构数据中的节点。

最近突然兴起了解树形结构数据，所以一时兴起想了下要如果去实现在树状结构数据中遍历寻找想要的节点。实现思路就是通过递归函数判断当前节点是否等于要找的节点id，如果不是再判断是否有children节点，再通过递归的方式将children节点传值到函数里面去调用这样就可以通过递归的方式遍历所有树形结构数据找到对应的节点。let data = [ { ...

2020-02-03 23:45:03 12360 1

原创原生js实现对象数组根据key值排序

最近在做功能的时候需要对后台返回的对象数组根据key值进行排序，平时我们对数组进行排序一般用到的比较多就是sort直接使用，其实sort方法是可以入参函数进行排序的。语法：arrayObject.sort(sortby)sortby：可选，规定排序顺序。必须是函数。如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现...

2020-01-22 23:24:04 6430 2

原创 vue实现移动端H5数字键盘组件

我们平时扫码付款的时候，经常会输入一些数字进行付款，仔细看了下键盘和系统的键盘有点不一样，于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个。话不多说，直接上代码。结果如下：代码如下：<template> <div class="keyboard-wrapper"> <input type="text" v-model="NUM" @...

2019-12-08 22:45:33 1387 1

原创 vue实现打地鼠小游戏

效果图如下：代码如下：<template> <div class="game"> <h2>打地鼠游戏</h2> <div class="wraper"> <div class="item" v-for="n in TOTAL" :key="n"> &lt...

2019-12-01 13:57:01 1215

原创自己实现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 2498 2

原创 js实现酷炫倒计时动画效果

前段时间和朋友去音乐餐厅吃饭，中间有个活动，然后看到他们软件公众号H5有个活动开始的倒计时的动画效果，于是想了下实现思路。<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js实现酷炫倒计时动画效果</title> &l...

2019-10-15 17:29:31 4426 1

原创 js实现拖拽元素实现选择和删除代码

我们上网的时候讲过一些平台在选择一些选项的时候采用拖拽的方式将选项拖入指定位置完成选择，现在我们就自己来实现一下类似的效果。结果如下：代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js置顶动画</title&gt...

2019-10-15 09:57:51 648

原创 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 724

原创 js实现页面显示加载进度条效果

我们上网的时候经常会看到一些平台或者网站顶部在页面加载的时候显示加载的进度条，这样用户可以知道还有多少没有加载完，给用户比较友好的用户体验效果，现在我们就来模拟一下这个效果是如何去实现的。页面加载一般来说是资源加载的问题，资源主要还是css、js、img、视频等资源，这些资源加载完成后都会触发一个onload事件，这样我们就可以在事件里面做一些事情，主要原理是计算页面资源的总数，然后资源载入的...

2019-10-11 18:26:00 3429

原创 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 1006

原创 CSS3 字体旋转进入动画

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>CSS3 字体旋转进入动画</title> <style> .box {width:1000px;height:264px;overflow:hidden;po...

2019-10-08 16:49:32 821

原创 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 565 1

原创 js 实现页面导航层级指示效果代码

我们上网经常看到一些页面层级指示的效果，比如淘宝、京东、百度百科等，用于指示用户浏览页面到哪里了。可以起到很好的交互效果，现在我们就来自己去实现以下类似的效果。主要用到的API是scrollIntoView和getBoundingClientRect方法，原理是监听页面滚动元素，当元素距离到浏览器视口一定的位置的时候就证明元素开始出现在页面的视口，就可以标识右边的指示栏。代码如下：...

2019-09-24 14:32:56 792 1

原创 H5 canvas绘框选实现截图和保存截图代码

代码如下：<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>H5 canvas绘制框选截图和保存截图代码</title> <style> *{pad...

2019-09-20 14:45:52 1335

原创百度地图上自动义坐标点及详细信息效果代码

我们有时候做开发会用到百度地图上的一些借口，来实现对应的功能显示，鼠标移入移出显示对应的信息，并可以自己定义显示的内容，现在我们就来做一个百度地图上自动义坐标点计及详细信息效果。参考百度地图Api地址：http://lbsyun.baidu.com/jsdemo.htm#c1_11最终效果代码如下：<!DOCTYPE html><!--[...

2019-09-08 13:27:54 961 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 1001 1

原创 js实现数字跳动到指定数字代码

运行结果如下：<!DOCTYPE html> <head> <title>js实现数字跳动到指定数字</title> <style> h1 {font-size: 150px;text-align:center;} p {text-align:center;} but...

2019-08-15 17:30:35 4238 2

原创原生javascript实现上下左右中间八个点控制元素大小、旋转角度、拖拽位置功能

最近在接触一个简单的图形编辑器，要求是要实现web页面加载图标元素并可以通过上下左右中间八个点鼠标控制元素大小。拖拽功能比较简单，一般都比较容易实现，主要是旋转和八个点控制元素的大小，旋转是相对难理解一点，需要到一些数学问题，关于坐标系的知识。整个demo源码下载地址：点击下载源码通过 Math.atan可以计算出反正切的值，从而推算出鼠标移动到哪个象限的时候的角度。四个点的拖拉也这...

2019-08-14 21:28:30 2331 1

原创 vue封装slider组件

<template> <div class="slider" @mouseup="mouseup($event)" @mousemove="mousemove($event)" @mousedown="mousedown($event)" :style="{width: width + 'px', height: height + 'p...

2019-07-18 22:21:45 2206 1

原创用户登录拖动验证码实现原理详解。

我们经常看到登录一些网站或者平台的时候会出现一些需要拖动验证码，实现验证功能，如斗鱼TV所示，于是就想了下这个要怎么实现，自己看了下他的html结构，是两个canvas，然后实现对接，原理应该是一个canvas作为背景然后，另一个canvas在原来的背景canvas里面扣一张图，然后拖动元素，当元素面积接近一个百分比的时候就认为两个元素重合了，验证通过了。大概就是这样的原理~！于是自己想了...

2019-07-18 18:36:03 6483 2

原创 A中的标签download属性，你知道吗？

最近无意中发现A标签竟然有个download属性，于是就琢磨了下这个属性的用法，看了下文档。才知道，如果给A标签href添加对应的图片或者文件地址，包括图片的base64地址都可以，然后在download属性设置对应的下载名称就可以下载图片了，这个属性可以作为直接点击下载图片，就不用用户再次点击右键保存了，还是有一定的用处。...

2019-07-17 23:00:42 752

原创 react + react-router + redux + Ant Design Mobile 移动端H5点餐项目源码

最近在接触react，所以花了点时间做了个小的购物demo，以便熟悉对应的api接口。点击此处下载源码具体页面如下：部分代码：购物车部分：import React from 'react';import { withRouter } from 'react-router-dom';import { Badge, Modal} from 'antd-mobile';i...

2019-07-08 09:57:57 2111 1

原创 HTML5 Canvas 实现刮奖效果

最近有在看canvas的一些东西，以前在手机端看过有些活动页面可以实现在手机端刮奖效果，就类似刮彩票显示中奖的效果，然后自己想了一下要怎么实现。实现原理是用canvas遮挡住中奖的结果，然后再原来的canvas层绘制透明效果让底部的中奖结果实显示出来。具体主要的canvas api如下：详情参考：canvas API关键参数是这个 globalCompositeOpera...

2019-07-07 16:03:32 1273

原创 window.postMessage()实现往iframe页面里面发送消息

window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。一般...

2019-07-01 17:53:25 5764 2

原创 H5移动端rem布局还原750px设计稿方案。

引入对应的脚本:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scal...

2019-05-23 10:07:32 6835 1

原创 vue实现自定义裁剪图片大小组件

最近在做一个项目，要实现用户上传人脸图片给后端，大小和人脸都有一定的要求，需要使用到在web端实现图片裁剪功能，也就是将图片裁剪到对应大小，然后发送给后端。识别这个人的人脸！于是想了一下要用canvas的drawImage实现这样功能。原理很简单就是通过放大缩小和移动，确定放大缩小后的图片的宽高和相对截图canvas左边和上边的位置的值，对应使用canvas的api就可以实现。...

2019-05-12 14:26:52 3228 1

原创关于file标签change选择同一个文件不会触发问题

最近在项目开发的过程中遇到一个问题，就是需要file标签选中后触发，但是有个问题，就是change选中之后如果选钟的是同一个文件，那么change事件就不会触发，不过最后还是找到了方法去解决这个问题。上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...

2019-05-07 11:10:12 1147