CodingNoob

本文介绍了利用Flexbox与margin:auto组合实现高效布局的技巧。通过在弹性项上设置margin:auto，可自动“吃掉”剩余空间，轻松实现居中、等分及多列布局，无需繁琐的justify-content和align-items设置。例如，单侧margin-left:auto实现右对齐，左右margin:auto实现水平居中，中间元素设margin:0 auto实现三等分。对于多等分布局，结合CSS变量动态计算间距，代码简洁且可复用，显著提升开发效率。

基于 Vue3 + Element Plus + CesiumJS 构建的 3D 场景编辑器，提供模型管理、标记管理、绘制管理、天气模拟等功能，支持数据保存与预览。

GLTF在线编辑器是一款基于Web的3D模型编辑工具，支持GLB/GLTF格式的模型上传、预览和编辑。该工具采用Vue3+Three.js技术栈，提供模型变换、场景管理、数据标记、光照调节等核心功能。系统架构包含Vue应用层、Three.js渲染层和UI组件层，支持主流现代浏览器。编辑器具有直观的可视化界面，可实现模型位置/旋转/缩放调整、天空环境切换、2D/3D标记管理等功能，适合3D设计师和开发者使用。

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

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

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

<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.

<template> <div class="earthSdk" id="earthContainer"></div></template><script>export default { data () { return {}; }, mounted () { this.mapInt(); }, methods: { mapInt () { const XE = wi...

<template> <div id="amapContainer"></div></template><script>export default { name: 'amap3d', data () { return {}; }, mounted () { this.intAmap(); }, methods: { drawMap (city = '北京市', LngLats) {...

<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', { .

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

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

效果如下：<template> <div class="sign"> <div class="content"> <canvas id="canvas" :width="width" :height="height"/> </div> <div class="btn"> <button @click="clearCanvas()">清除</button&gt

百度地图经纬度坐标拾取：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

我们在做项目的时候可能会遇到一些需要导入导出excel数据的功能，网上看到一个开源的插件可以实现相关的功能，于是今天就花了点时间看了下这个插件的一些使用。插件github地址：https://github.com/SheetJS/js-xlsx/参考文章：https://www.cnblogs.com/liuxianan/p/js-excel.html代码如下：<!DOCT...

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

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>响应式菜单切换效果</title> <link rel="stylesheet" href="./css/menu.css" /></head>&...

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

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js滑动进度条效果</title> <style> *{margin:0;padding:0;user-select:none;} ...

例子一：var d = "b";function a(b){     function b(b){        alert(b);    }    alert(b);    b(d);}a(1);//最大外层分析阶段oa.d = function a(b);//执行的时候 oa.d = "b";当执行到a(1)时;

原生javascript简单轮播效果demo

javascript延迟动画效果demo

js延迟动画效果demo

原理是先获取页面所需懒加载的所有图片对象，然后分别计算图片距离顶部的距离是否小于屏幕可见高度+页面滚动高度，即元素是否从下滚动到眼球可见位置，如果小于，那么将自定义的data-src属性中的值（即图片的URL地址赋值给src属性，完成请求加载）。监听页面滚动事件即可！定义n 值存储起来可以更好的记录到滚动可见的图片，避免重复循环，提高性能。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5+原生javascript 卡片扑克旋转展开效果demo</title> <style> *{margin:0;padding:0;} body{background:#ccc;padding-t

原理很简单，就是外面加个盒子box。作为旋转动画的box，然后里面分别利用两个div使用css3的 border-radius绘制半圆，分别定位在上下中间对齐两个位置，里面在放两个小的原点水平和垂直方向对齐即可实现。然后在使用Css3的animation属性制作动画。效果如下图。

Javascript知识点总结Dom知识点Element类型Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。 Element有下面几条特性： （1）nodeType为1 （2）nodeName为元素标签名，tagName也是返回标签名 （3）nodeValue为null （4）parentNode可能是Do

一张图看懂了吗？

关于页面向下滚动到元素位置，元素停靠顶部不动，当页面向上滚动到元素位置时，元素回到原来位置的效果，思路很简单，就是监听window滚动，获取元素到页面顶部位置，如果页面滚动距离大于元素到顶部距离，那么添加position:fixed;left:0;样式，小于则移出样式效果。

Vue.js实现表格数据增、删、改、查效果 代码如下所示：（注意需引入jquery） index

span:nth-of-type(3){background:red;}div{ padding:20px; margin:20px;}Coookie的设置、获取、清除操作姓名：

查看了一下W3C：常用for属性用法（W3C）：也就是说，可以通过包裹表单的方式使得点击对应的label使得对应的表单聚焦： 这里有显示和隐式两种，但是要注意的是，如果使用隐式，必须里面只有一个对应的表单元素，如果有多个 如下图所示，则点击包裹的非表单元素时只有第一个表单元素会聚焦如下图所示，点击输入值aa只有表单bb会聚焦 在项目开发过程中用于常用于美化表单元素如下图所示html代码：js代

Vuejs结合html5 localstorage本地缓存开发webapp项目源码，项目可以记录每次存储的数据，并统计历史记录、本月记录、最高记录等等。点击在线预览github仓库地址：https://github.com/zhongyoucong/app/tree/master/app2.0苹果端可以保存到桌面，效果图如下： js代码//日期格式化函数Date.prototype.fo

html5 localstorage结合vue开发本地记事本项目源码github仓库地址：https://github.com/zhongyoucong/app/tree/master/app1.0点击在线预览效果图如下： js代码//日期格式化函数Date.prototype.format = function(fmt) { var o = { "M+": this.g

Zen codieng语法大全。

//向数组里面添加each方法Array.prototype.each = function(fun){ for(var i = 0, len = this.length;i < len; i++){ fun(i, this[i]); }}var zycArray = { //求和 sum:function(arr){ var su

昨天在做项目的时候突然遇到一个坑，就是给label绑定一个click事件之后，点击触发事件，竟然会触发两次，瞬间就懵逼了，当时的表情是这样的 纠结了1个多小时，一直以为是有绑定了相应的表单事件，所以造成冒泡，才会触发两次，但是调试了很久，还是没有找到有绑定的事件，于是当时的表当又变成这样了。 闲话少说，上田园马如下所示：<!DOCTYPE html><html lang="en"><head

首先定义mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且 在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件，但DOM3 级事件将它 纳入了规范。IE、Firefox 9+和Opera 支持这个事件。mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且 在光标移动到后代元素上不会触发。DOM2

对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click 事件会一直冒泡到document 层次。也就是说，我们可以为整个页面指定一个onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。例如如果要给每个li绑定click事件,一般第一印象肯定是这样<!DOCTYPE html><html