#麻辣小龙虾#-优快云博客

现在我们基于vue3.0版本开发出了一款沉浸式的编辑器，只需要使用全景相机在现场拍摄全景场景，然后将场景倒入编辑器，通过拖动图标和导航的方式绑定数据，从而实现沉浸式场景可视化。随着社会的不断发现，现实生活中有很多时候会使用到全景现实，比如房地产行业vr看房，汽车行业vr看车之类的，全景可视化真实还原了现场的场景，真正做到沉浸式体验。6、自定义添加网址和富文本标记，点击跳转网址查看富文本内容。2、自定义添加文字标记，绑定文字文本，标识场景设备名称。3、自定义添加场景标记，点击可以切换不同场景视角。

2023-07-27 11:52:53 3979 2

原创 js 也可做屏幕颜色拾取器了

最近在看到一些文章，出了一些新的api接口，可以提供给js做整个电脑屏幕颜色的拾取。差了下兼容性不是很好，但是该版本的浏览器是可以正常使用的。这样对一些设计类的网站或者是需要到屏幕颜色拾取功能的也可以做！

2023-05-12 10:02:23 747

原创 css3 背景大小background-size属性实现鼠标移入文字下划线动画效果

最近看到一个页面有一个很有趣的动画，就是鼠标移入后，在对应的文字下方会出现下划线的动画效果，当鼠标移除后，下划线动画会消失，于是想了下该如何去实现这个动画效果。

2023-03-23 14:15:10 718 1

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

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

2023-01-18 22:35:09 951 1

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

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

2022-11-25 14:35:14 448 1

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

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

2022-11-19 15:28:02 2020 3

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

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

2022-10-26 11:30:17 4929

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

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

2022-10-13 18:26:36 1033

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

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

2022-09-01 17:21:23 2644

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

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

2022-08-30 15:08:59 5852 12

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

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

2022-08-17 14:30:14 2507 1

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

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

2022-08-17 11:28:22 589 3

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

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

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

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

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

2022-07-16 13:47:44 9662 11

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

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

原创 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 4236 5

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

原创 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 7031 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 9130 21

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

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

原创 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 3848 13

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

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

2022-02-15 10:24:04 769

原创 vue使用G6绘制树形图

2022-01-27 16:57:07 2360 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 1844 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 5266 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 2175 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 1366

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

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

2021-05-28 16:03:15 1505 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 3102

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

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

2021-03-28 23:25:51 2873 1

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

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