自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

CodingNoob

路漫漫其修远兮,吾将上下而求索。

  • 博客(214)
  • 资源 (24)
  • 问答 (5)
  • 收藏
  • 关注

原创 css实现表格简单的右侧列固定或者顶部表头固定效果

css实现表格简单的右侧列固定或者顶部表头固定效果

2023-01-18 22:35:09 14

原创 js 策略模式实现大规模表单验证

我们在做页面开发的时候有时候会遇到一些比较多的表单页面,比如个人信息,企业信息,设备信息等,里面都是包含很多的字段,每个字段需要校验的规则其实是不一样的,这样我们在提交表单的时候页面要做校验工能怎么办呢?维护起来是不是很头疼?原理就是将校验的方法抽离出来成为一个公共维护的对象,将对应的规则属性名跟对应数据的属性名相关联在一起,通过校验规则中的type 字段去找到对应检验规则方法,通过校验方法会返回对应的标识,不通过则会给出对应规则配置的错误提示语。整体代码:(ps: 用vue写的组件)

2022-11-25 14:35:14 72

原创 js实现高德地图实现科技感3d建筑模型显示示例

高德地图实现科技感3d建筑模型显示示例

2022-11-19 15:28:02 237

原创 js 实现页面隐藏、关闭、刷新给出对应的提示

我们在做项目的时候经常会遇到一些需求,比如在某些页面当点击浏览器刷新 或者关闭的时候会有对应的提示,是否离开或者重新加载此网站。比如csdn写文章的时候就有这个弹窗,这功能就是用onbeforeunload实现的。浏览器切换其他页面或者最小化的时候触发,(ps: 常用于检测考试作弊行为)一般来说,我们希望使用 Page Visibility API,在用户没有看到页面时停止不必要的进程,或者执行一些后台操作。可以下面这几种情况:当用户离开页面时,暂停视频、轮播图或动画。停止一些实时获取数据的API。

2022-10-26 11:30:17 869

原创 js 实现随机抽取选餐效果源码

js 实现随机抽取选餐效果源码,闲来没事看到一个比较有趣的随机选餐效果,于是自己花了点时间去是实现,代码如下。

2022-10-13 18:26:36 129

原创 CSS3实现发光按钮效果动画

在平时看到抽奖,或者一些活动内容页面,我们经常会看到一些发光效果的按钮,视觉上引导用户去点击,这种效果主要是利用css3的动画效果去实现,关键帧放大元素尺寸和改变元素的不透明度,还有就是渐变拉伸去设置对应的按钮渐变...

2022-09-01 17:21:23 736

原创 vue+vuex实现2D可视化图形编辑器

随着物联网的快速发展,人们对物联网设备的数据监控可视化的需求越来越强烈,为了解决企业设备数据监控可视化痛点,当康科技经过不断的努力,研发了一套基于物联网的可视化图形编辑器,用户编辑器可以通过该编辑器实现自定义上传图片,和自己所需的组件图标,通过拖拽,移动等方式编辑对应的可视化图形界面,动态绑定设备数据,实现系统组态数据显示。微信公众号 搜索“当康AIOT”,即可关注我们。6、针对不同的设备类型不同的数据绑定。北方供暖锅炉房可视化。...............

2022-08-30 15:08:59 1942 3

原创 uni-app跨端开发实现APP与H5之间的通讯和交互

最近在研究uni-app跨端开发APP和H5的通讯和交互,比如H5调用APP的方法,APP往H5里面传参,H5往app外面传参。话不多说,上代码!

2022-08-17 14:30:14 500

原创 js 实现16进制与gb2312编码中文互相转化

最近在接触蓝牙与硬件通讯相关的东西,需要解析蓝牙和解析16进制的东西、下面就简单列举一些解析过程中需要的方法,希望能帮助到网友。

2022-08-17 11:28:22 50

原创 uni-app实现跨端开发手机蓝牙接收和发送数据

uni-app实现跨端开发手机蓝牙接收和发送数据

2022-07-27 16:05:39 1308 1

原创 vue基于threejs实现的3D可视化编辑器

随着5G网络的渐渐普及,物联网在人们的生活中渐渐广泛使用,社会向着越来越智能化的方向发展。当康科技经过不懈努力,研发属于自己的一款3D可视化编辑器,助力企业应用实现3D可视化服务。......

2022-07-16 13:47:44 2396 6

原创 threejs + vue 倒入ade文件实现动画效果

threejs + vue 倒入ade文件实现动画效果<template><div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel"> <div> <button @click="save">保存</button> <button @cl.

2022-05-20 16:47:05 225

原创 vue + threejs 实现场景环境贴图,模型高光显示效果

<template> <div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel"> <div> </div> <div> 三维坐标点信息 <!-- <p>{{point3d}}&lt...

2022-05-19 14:44:40 1028

原创 vue + threejs实现导入blender动画并控制其播放

<template><div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel" @click.stop> <div> <button @click="playAnimate(idx)" v-for="(v, idx) in this.animations" :key="i...

2022-04-28 15:06:51 1078 2

原创 vue+threejs 精灵模型Sprite模拟下雨效果

<template><div class="rain-box_wrapper"> <div class="modelsBox_wrapper"></div></div></template><script>import { webglOBJ } from '@/utils/webGL/webGL.js';import TWEEN from '@tweenjs/tween.js';export defa.

2022-04-27 18:20:51 426

原创 vue+threejs 实现鼠标点击三维空间的模型点,相机平滑聚焦到对应的模型。

<template><div class="modelsBox"> <div class="modelsBox_wrapper" v-if="f"></div> <div :id="`sign${idx + 1}`" style="position: absolute;" v-for="(v, idx) in labels" :key="idx"> <div class="sign" :uuid="v.uuid"...

2022-04-25 15:47:36 2876 4

原创 vue + threejs 给3D模型添加label标签(dom的方式)

webGL.js封装的代码。const THREE = window.THREE;// webGL对象配置export const webglOBJ = { renderDom: null, Scene: null, // 场景 camera: null, // 摄像头 renderer: null, // 渲染器 senceAdd (objList = []) { objList.forEach(v => { webglOBJ.Scene...

2022-04-18 17:13:43 3313 13

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

原创 vue实现百度地图打点自定义div显示内容

<template><div class="bmap-layout"> <tipsBar/> <div class="unit" v-if="mapType == 'heat'"> <div class="unitItem"> <span class="text">锅炉房:</span> <span class="isNum">{{dataSys.guoLuF...

2022-04-01 20:49:34 2349

原创 vue 实现高德地图搜索地址获取经纬度

<template> <div class="map-search_wrapper" id="bmapSearch"> <div class="header"> 需要查询的地址: <el-tooltip class="item" effect="dark" :content="textTip" placement="top" :value="isshowTip" manual> <el-input .

2022-04-01 20:37:06 2277 10

原创 javascript利用try-catch验证数据格式是否为json

javascript利用try-catch验证数据格式是否为json

2022-02-15 10:24:04 421

原创 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 909 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 724 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 1673 13

原创 高德地图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 1022

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

原创 nginx 使用upstream 模块实现负载均衡

最近在项目开发的时候遇到需要使用集群的配置,需要使用nginx做负载均衡,于是就研究了下如何使用nginx做这块的东西。1、首先准备三台linux服务器做练习

2021-05-28 16:03:15 176 1

原创 flex实现等分布局和两边固定中间自适应

等分布局:<div class="main"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div>.main { height: 300px; width:100%; ..

2021-04-01 14:22:00 1373

原创 vue实现百度echart地图省市县点击下钻效果

最新在做项目的时候用到一个地图,这个地图是要离线使用的,之前做过的百度地图用的都是在线版本的,但是如果不连接外网的时候就无法显示了,现在要做的是一个不接外网的东西,然后要在地图上对应的经纬度显示项目点。点击每个城市会显示对应的城市。于是研究了下echart的map地图,实现了下面的效果。代码如下:<template> <div class="echart-bmap_wrapper"> <div class="btn"> <e

2021-03-28 23:25:51 921

原创 javascript封装生成指定日期插件date.js

我们在做项目的时候经常会遇到一些需求,1、比如或者获取当天的结束时间23:59:59,2、当点的开始时间3、最近一周的时间4、本周开始结束的时间5、当月开始结束时间6、当年开始结束时间7、格式化标准时间等等,现在自己花了点时间封装了一个小的插件date.js专门处理这种需求,满足常见的日期处理功能使用。由于本人水平有限,如果有什么写的不对的地方望各位大神多多指点~!github地址:date.js...

2021-01-07 14:16:32 348 1

原创 css两行代码搞定移动端swipper滑动banner效果

刚看了下张大神的博客,又有新发现。原文地址:大侠,请留步,要不过来了解下CSS Scroll Snap?​<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev

2020-12-15 14:43:50 236

原创 vue封装tab组件

<template> <div class="tab-wrapper" :id="'tab_' + tabType"> <!-- <span class="active-bar" :style="{'top': `${activeIndex * 30}px`}"></span> --> <span class="active-bar" :style="{'top': `${currentIdx * 30}px`}" v-.

2020-12-15 11:20:56 412

原创 nginx配置不缓存某种特定文件

#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types; defa..

2020-12-08 15:52:36 3108

原创 javascript封装树数据处理插件treejs

我们在做项目的时候经常会遇到管誉组织、部分、分类、等树结构的数据,在数据结构里面算是复杂类型的数据,处理起来会有点麻烦,一般都会使用到递归,最近自己在做项目的时候页遇到类似的需求,于是自己花了点时间封装了一个专门处理树数据的小插件,里面集成了一些常见的树处理方法,可以直接调用使用。代码不到300行,小巧易用,由于本人水平有限,可能写的不是很好,或者有些小bug,欢迎各位在使用过程中遇到问题指正错误,或者有更好的想法都可以留言交流。代码已经上传到gitee上了,有时间或者新的功能我会更新上去。欢迎下载使用。.

2020-12-08 11:12:05 400

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

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

2020-12-04 10:13:03 4542 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 3920 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 1075

原创 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 3905 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 120

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

vue+vuex实现可视化图形编辑器

vue+vuex实现可视化图形编辑器,支出底图上传,8点控制拖拽,动态绑定数据显示。(需要服务器环境才可以运行)

2022-05-13

vue实现百度echart地图省市级别点击下钻显示效果

vue实现百度echart地图省市级别点击下钻显示效果

2021-03-28

原生javascript封住处理树结构数据treejs插件

TREEJS专门用于处理树数据的插件,包含创建树、新增节点、修改节点、删除节点、查询节点、获取节点层级等常见功能,插件小巧易用。

2020-12-08

js淘宝放大镜效果代码

自己手写原生js实现淘宝放大镜效果代码,仿淘宝商品详情页图片放大效果,代码简洁易懂,可以直接复制使用。

2020-12-08

BoundNumber.rar

js实现数字跳动到指定数字demo,可以实现数字快速跳动到指定数值

2019-08-15

rotate.rar

原生javascript实现上下左右中间八个点控制元素大小旋转角度及拖拽位置代码,可以拖动元素的八个点进行控制元素的宽高,旋转角度,拖拽位置等等。

2019-08-14

react移动端H5点餐项目源码.rar

react移动端H5点餐项目源码,包括基本的首页,商品列表,商品详情,商品购物车汇总。

2019-07-08

AlertBox.rar

自己封装的弹窗插件,直接引入调用即可,小巧简洁,非常方面使用。

2019-05-23

微信小程序餐厅扫码点餐项目源码

微信小程序餐厅扫码点餐项目源码,可以实现点餐统计价格和商品数量。

2018-08-30

原生js图片轮播效果

原生js轮播效果

2017-08-22

javascript 常用DomAPI总结

javascript 常用DomAPI总结

2017-07-28

javascript判断是否移动端访问跳转到手机网址代码

javascript判断是否移动端访问跳转到手机网址代码

2017-07-27

JavaScript知识点个人总结

JavaScript知识点个人总结

2017-07-27

自己封装的javasript数组方法

自己封装的javasript数组方法

2017-06-16

html5集合Vuejs开发商品日常卖记录、统计收入结果webapp项目代码

使用html5集合Vuejs开发商品日常卖记录、统计收入结果webapp项目代码,使用了localstorage本地缓存技术,ios苹果端可以保存到桌面使用

2017-05-25

使用HTML5结合Vuejs开发离线记事本webapp项目源码

使用HTML5结合Vuejs开发离线记事本webapp项目源码,使用了html5的localstorage本地存储技术,苹果ios可以保存到桌面。

2017-05-25

vuejs实现用户登录注册及评论功能代码

vuejs实现用户登录注册及评论功能代码,可编辑修改用户部分信息。

2017-04-28

webstrom中文汉化包

webstrom中文汉化包

2017-04-06

原生javascript自己封装的一些常用小方法

原生javascript自己封装的一些常用小方法

2017-03-21

原生javascript页面图片懒加载代码

原生javascript页面图片懒加载效果

2017-03-21

HTML5+原生javascript卡片展开特效demo

HTML5+原生javascript卡片展开特效demo,运用css3旋转效果,像扑克展开一样的卡片。

2017-03-20

webstorm漂亮主题代码样式

webstorm漂亮主题代码样式,本人亲自花了好多时间调出来了,html、css、js样式非常优美。直接导入即可使用!

2017-03-20

HTML5+原生javascript移动端滑动banner效果demo

HTML5+原生javascript移动端滑动banner效果demo

2017-03-09

CSS3多列手风琴效果

CSS3多列手风琴效果

2017-03-06

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除