随笔分类 -  前端

svg 样式
摘要：1、添加虚线 stroke="#979797" stroke-width="1" stroke-dasharray="3,3" 2、文字纵向 writing-mode="vertical-rl" 阅读全文
posted @ 2024-12-27 16:26 暖暖De幸福 阅读(13) 评论(0) 推荐(0)
inline-block元素下移问题的分析及解决
摘要：不知道大家有没有遇到过这种蛋疼的情况，当你排列了三个 display 属性为inline-block的 div 时。 我们在其中一个div中输入文字，就会出现如下这种现象，设置文字 div 的布局变化了。 问题定位 为什么会出现这种情况呢？我们打开控制台查看一下元素布局，如下图我们能看到第二个 di 阅读全文
posted @ 2024-11-18 10:50 暖暖De幸福 阅读(23) 评论(0) 推荐(0)
web 接入 bind map
摘要：<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script> function lo 阅读全文
posted @ 2024-11-12 11:00 暖暖De幸福 阅读(24) 评论(0) 推荐(0)
Active MQ直接与前端通信
摘要：var mqClient; var mqSubscribeIDObj = { scada: "scada" }; var connectCallback = function (msg) { for (let topicName in mqSubscribeIDObj) { addSubscribe 阅读全文
posted @ 2024-11-07 10:51 暖暖De幸福 阅读(37) 评论(0) 推荐(0)
自定义滚动条
摘要：body修改成自定义的class body { --sb-track-color: #232E33; --sb-thumb-color: #6BAF8D; --sb-size: 14px; } body::-webkit-scrollbar { width: var(--sb-size) } bod 阅读全文
posted @ 2024-10-29 15:58 暖暖De幸福 阅读(27) 评论(0) 推荐(0)
js将选择的图片显示在img中
摘要：function selectfile(e) { var file = e.files[0]; var render = new FileReader(); render.onload = function (r) { debugger document.getElementById('img'). 阅读全文
posted @ 2024-10-24 15:08 暖暖De幸福 阅读(79) 评论(0) 推荐(0)
透视表
摘要：<style> .dx-pivotgrid .dx-pivotgrid-area.dx-pivotgrid-area-data { font-size: 16px; } .dx-pivotgrid .dx-pivotgrid-area.dx-pivotgrid-horizontal-headers, 阅读全文
posted @ 2024-08-06 15:06 暖暖De幸福 阅读(57) 评论(0) 推荐(0)
div添加文字位置会改变的问题
摘要：造成这样的原因是因为给div设置了inline-block的原因 解决办法就是再给div添加一个属性vertical-align:middle或者bottom; 阅读全文
posted @ 2024-07-09 13:45 暖暖De幸福 阅读(64) 评论(0) 推荐(0)
js限制文本框输入数字
摘要：<!--input只允许输入整数--> <input type="text" name="a" onkeyup="value=value.replace(/[^\d]/g,'')" > <!--input只允许输入整数和小数（小数只保留小数点后两位）--> <input type="text" na 阅读全文
posted @ 2024-07-02 10:13 暖暖De幸福 阅读(244) 评论(0) 推荐(0)
layuiAdmin打开新窗口、新标签页
摘要：打开新窗口 在控件上添加 lay-href 属性，并传递参数：url地址 tit标题 <a lay-text="新窗口" onclick="newTab('xxx.html,'打开新窗口')" > 打开新窗口方法： function newTab(url, title) { if (top.layu 阅读全文
posted @ 2024-04-19 16:52 暖暖De幸福 阅读(587) 评论(0) 推荐(0)
fetch 跨域问题
摘要：mode: "cors", //允许跨域 no-cors不允许跨域 阅读全文
posted @ 2024-03-28 13:48 暖暖De幸福 阅读(51) 评论(0) 推荐(0)
input 获取焦点时设置边线样式
摘要：.input-border:focus { outline: 1px solid #ff6a00; } 阅读全文
posted @ 2024-03-28 10:25 暖暖De幸福 阅读(88) 评论(0) 推荐(0)
Vite 配置文件
摘要：新建如下三个文件 .env 始终加载 .env.development 开发环境加载 .env.production 生产环境加载 如果env与development冲突，则后者覆盖前者 配置文件 注意：只有以VITE开头的参数才会暴露出去 .env VITE_APP_NAME="AGS-MCS" 阅读全文
posted @ 2024-03-15 10:04 暖暖De幸福 阅读(55) 评论(0) 推荐(0)
vite 使用 npm run dev
摘要：package.json 添加 脚本映射 "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, 阅读全文
posted @ 2024-03-05 08:48 暖暖De幸福 阅读(141) 评论(0) 推荐(0)
html 自定义 checkbox样式
摘要：input[type=checkbox] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; border: 1px solid #ff6a00; backgr 阅读全文
posted @ 2024-01-30 13:45 暖暖De幸福 阅读(267) 评论(0) 推荐(0)
在div之前画一条连接线
摘要：<html> <head> <style> div.boxItem { display: inline-block; border: 1px solid black; padding: 1em; margin-right: 5em; position: relative } .boxItem:bef 阅读全文
posted @ 2023-12-22 09:17 暖暖De幸福 阅读(78) 评论(0) 推荐(0)
css垂直居中
摘要：word-wrap: break-word; /*英文的时候需要加上这句，自动换行*/ /*自测了这句话没啥用*/ writing-mode: vertical-rl; /*从左向右 从右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-rl; /* 阅读全文
posted @ 2023-12-21 09:46 暖暖De幸福