M_allstar的博客

原创 组件外部点击事件

// 组件外部点击事件function useOnClickOutside(ref, handler) { useEffect(() => { const listener = (event) => { if (!ref.current || ref.current.contains(event.target)) { return } handler(event) } document.addEventLis.

原创 渐变色field组件

export const GradientColorField = observer(({label, value, defaultValue, gradientColor, gradientColorType = 'linear', onChange = () => {}, className, readOnly}) => {const [rect, setRect] = useState({})const [circle, setCircle] = useState({})con

原创 分类数据转换为树形结构

const excelStr = `港口数据 货主基本信息 货主代码港口数据 货主基本信息 货主全称港口数据 货主基本信息 货主所属国家港口数据 货主基本信息 货主地址港口数据 货主基本信息 货主电话港口数据 货主基本信息 货主银行账户港口数据 货主基本信息 货主类型港口数据 货主费用信息 剩余金额港口数据 货主费用信息 已扣金额港口数据 货主费用信息 结算方式港口数据...

原创 什么是HTML tabindex属性？

tabindex是负责以下两件事的全局属性：它设置了“可聚焦”元素的顺序，并且它使元素“可聚焦”。在我看来，第二件事比第一件事更为重要。默认情况下，很少有可聚焦的元素（例如<a>和表单控件）。开发人员经常在不可聚焦的元素（<div>，<span>等）上添加一些JavaScript事件处理程序（例如'onclick'），并使界面不仅响应鼠标事件而且响应键盘事件的方式（例如“ onkeypress”）是为了使此类元素具有针对性。最后，如果您不想设置顺序，而只是将您的元素tab

转载 css3的clip-path方法剪裁实现（三角形，多边形，圆，椭圆）

本例讲解如何通过clip-path把一个div（元素，可以是图片等）裁切成不同的形状，这里以一个div为例宽高均为300px注意：不支持IE和Firefox，支持webkit浏览器，在现代浏览器中需要使用-webkit-前缀。## 注意 clip-path 从右上开始顺时针旋转切割 <div class="demo" style="width: 300px; height: 300px; margin: auto; background: red;"> ...

原创 2020-09-19

const excelStr = `港口数据 货主基本信息 货主代码港口数据 货主基本信息 货主全称港口数据 货主基本信息 货主所属国家港口数据 货主基本信息 货主地址港口数据 货主基本信息 货主电话港口数据 货主基本信息 货主银行账户港口数据 货主基本信息 货主类型港口数据 货主费用信息 剩余金额港口数据 货主费用信息 已扣金额港口数据 货主费用信息 结算方式港口数据

转载 js怎样递归遍历树形菜单数据

递归就是调用自己比如function fn() { fn()}递归一般是用来处理不确定层级的树形数据比如想要获取树形菜单数据里面的每一个id就可以使用递归var data = [{ name: 'a', id: 101, children: [{ name: 'bb', id: 101101, children: [] }, { name: 'bb', id: 101102, children: [{ name

原创 React Hook 写 Timer时钟

import React, {useState, useEffect} from 'react'const Timer = ({options}) => {const [date, setDate] = useState(new Date())useEffect(() => {const tick = () => setDate(new Date())const timerId = setTimeout(tick, 1000)// 返回一个清除函数， 清..

原创 浏览器tab切换最小化，当前页面无操作刷新页面

/* eslint-disable react-hooks/exhaustive-deps */import React, {useState, useEffect} from 'react'// 可见状态下的延迟const visibleDelay = 3000// 不可见状态下的延迟const invisibleDelay = 1000// 触发刷新定时器执行次数const timerTimes = 2const App = () => { // 是否触发事件 cons

原创 js数组深拷贝方式

1. concat 返回一个新数组const cloneArray= [].concat(array)此刻 cloneArray 不是array的引用赋值，互不影响2.slice 返回一个新数组const cloneArray = array.slice(0)注意：splice 与 slice不同， splice会改变原数组...

原创 多行字符串数据输出json格式

const data = `Micronesia, Fed. Sts. 23.6 23.6 23.6 23.6 23.6 23.6 23.6 23.6 23.6 23.6 23.6 23.6 23.6Cuba 6.4 6.1 7.3 9.2 13.0 13.0 13.0 13.0 13.0 13.0 13.0 13.0 13.0Solomon Islands 4.1 3.8 4.3 5.4 9.9 9.9 9.9 9.9 9.9 9.9 9.9 9.9 9.9Botswana 4.0 4.3 6

转载 JS随机打乱数组的方法小结

本文实例总结了JS随机打乱数组的方法。分享给大家供大家参考，具体如下：JS中，要打乱数组有很多方法，网上流传一个国外人写的方法，我认为是最精简的了：1.function randomsort(a, b) { return Math.random()>.5 ? -1 : 1; //用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1}var arr = [1, 2, 3, 4, 5];arr.sort(randomsort);这里介绍下sort...

原创 Node.js格式化输出json文件

Node.js格式化输出json文件JSON.stringify 函数竟然带有格式化！其第三个参数表示缩进的空格数，例如：var fs = require('fs');fs.writeFile('test.json', JSON.stringify({ a:1, b:2, c:3 }, null, 4));/* test.json:{ "a": 1, "b": 2, "c": 3,}*/JSON.stringify(value[, repla...

原创 CSS渐变和混合

CSS渐变要点颜色、方向和位置linear-gradient// 一般写法，可以有一个以上的colorlinear-gradient(角度deg, color1 color-stop?长度px||百分比, color2 color-stop?长度px||百分比)线性渐变中的角度默认是从下到上的垂直方向开始顺时针进行旋转的。老版本浏览器有差别。radial-gradient// 一般写法，可以有一个以上的colorradial-gradient(<shape?>||<

原创 Promise实现图片预加载

const [isLoadSuccess, setIsLoadSuccess] = useState(true)// 图片预加载, 传入地址参数const loadImage = imageSrc => {// resolve 标志成功时执行的语句// reject 标志失败时执行的语句return new Promise((resolve, reject) => {const image = new Image()image.src = imageSrc// 如

原创 JSX规范

JSX规范遍历数组成员，使用Children.toArray()方法，不使用key="id"正确{options.map(option => Children.toArray(<div ...</div>))}错误{stories.map((story, index) => (<div key={story.id}> ...</div>))} ...

原创 vscode里面怎么根据eslint来格式化代码？

先确保已经安装了 ESLint 插件Plan A: 设置格式化快捷键keybindings.json 中添加{"key": "cmd+alt+space","command": "eslint.executeAutofix","when": "editorTextFocus"}Plan B: 开启保存时自动格式化d用户的 settings.json 中添加"eslint.autoFixOnSave": true作者：zerosrat链接：https:...

原创 React Hook 实现水印效果

import React, {useEffect, useState} from 'react'import {observer} from 'mobx-react-lite'const WaterMark = ({text = '', option}) => { const { top = '0px', left = '0px', width, height, } = option const [background, setBackground...

原创 字号计算，字体大小随窗口高度变化

//字号const fontSize = [50, 45, 40, 35, 30, 25, 20, 15, 10].map(item => {return window.innerHeight * item / 1050 //字号计算,1050基准值})export default fontSize

原创 大屏scroll滚动轴样式

//滚动条.scrollbaroverflow auto// 在有滚动条的元素上加上该classname，只有鼠标进入元素区域内，滚动条才会有颜色.scrollbar:hover::-webkit-scrollbar-thumb// border-left 4px solid themeColorbackground-color: themeColor::-web...

原创 stylus 迭代+插值实现css同类型不同值样式序列

$font-size-pt = {'72': 72px,'50': 50px,'42': 42px,'20': 20px,'14': 14px,}for $key, $value in $font-size-pt //迭代.fs{$key} //插值font-size: $value

原创 大屏样式（全屏禁止滚动）

##网页固定，禁止上下拖动三种解决方案1、body加position:fixed;width:100%;height:100%。2、给要滚动的元素添加一个父级，设定高度，overflow：auto；3、html,body{height:100%;overflow:hidden}建议使用第三种，可以把overflow:hidden作为一个单独的隐藏类，更方便控制。##全屏...

原创 Affinity Designer 查询面板渐变颜色

1.移动工具选择画板2.点击 填充工具 出现渐变路径渐变面板中查看颜色代码

原创 express 设置handlebars模板引擎

原创 批处理文件开机启动

将这个批处理加到菜单的启动目录中去。C:\Users\##\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup另外一个办法就是把这个批处理的名字写成autoexec.bat放到启动盘根目录下就行了。...

转载 跨域小结(为什么form表单提交没有跨域问题，但ajax提交有跨域问题)

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/wabiaozia/article/details/78771709原文链接：https://www.zhihu.com/question/31592553-------------------------------------...

转载 nodejs前端跨域访问

nodejs前端跨域访问XMLHttpRequest cannot load http://localhost:3000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.上面是我学习nod...

转载 0x0 Transaction mined but execution failed

Some times it will occur “0x0 Transaction mined but execution failed” error when you execute contract function on Ethereum. If your contract is tested fully, the main reason should be you use a low ga...

原创 Session会话注意点

1.每个页面只有session_start();才能传递Session;

转载 PHP一个文件内多个php代码段的写法

php在一个文件中多个<?php ?>等同于1个也就是说在一个文件中<?php 代码1 ?> <?php 代码2 ?>等同于 <?php 代码1 代码2 ?>因此可以写成<?php foreach( 。。。) { ?> <?php }?>注意上面的"{}"必需是一对，否则就报错同样，在纯粹的php代码里，你也要保证{...

转载 c\c++中比较两个字符串或string对象是否相等

c\c++中比较两个字符串或string对象是否相等在写程序的过程中，经常会遇到要比较两个字符串是否相等的情况。如果要比较的对象是char*字符串，则利用int strcmp(const char* s1,const char* s2)当s1<s2时，返回为负数；当s1==s2时，返回值= 0；当s1>s2时，返...

转载 Java 错误: 找不到或无法加载主类，问题集合

Java 错误: 找不到或无法加载主类，问题集合正确编译命令:javacHello.java正确运行命令:javaHello错误1:H:\code>javaHello.java错误:找不到或无法加载主类Hello.java原因:命令错误错误2:H:\code>javaHello.class错误:找不到或无法加载主类Hel...

转载 sql语句如何拼接Java变量

当数据库字段ID为整型时select ID from table where ID=1和select ID from table where ID='1'两条sql都是可以的,但是第一条sql不用进行隐式转换,速度上比第二条sql略快一些。String sqlString="select * from tb_wf_main where trim(WF_NAME) = ' " + w...

转载 MySQL中使用SQL语句对字段进行重命名

MySQL中使用SQL语句对字段进行重命名关键词MySQLSQL字段重命名摘要MySQL中，如何使用SQL语句来对表中某一个字段进行重命名呢？我们将使用alter table 这一SQL语句。MySQL中，如何使用SQL语句来对表中某一个字段进行重命名呢？我们将使用alter table 这一SQL语句。重命名字段的语法为：alter table <表名...

转载 mysql 创建用户并赋予用户权限

1、查看用户：select user,host from mysql.user;返回所有用户列表2、创建用户：CREATE USER ‘username’@’host’ IDENTIFIED BY ‘password’;username:用户名；host：指定在哪个主机上可以登录，本机可用localhost，%通配所有远程主机；password：用户登录密码；3、授权：GRANT AL...

转载 隐写术--总结

文章来源：http://bobao.360.cn/learning/detail/243.html1.增加数据的方式 隐藏信息另存为.zip后解压，正常的.JPG图片在文本编辑器（winhex）中，16进制是以FF D9结尾原理：a.先制作一个1.zip 把含有隐藏的内容放进去‘ b.另找一张.jpg图片(2.jpg)，命令行执行命令：copy /b 2.jpg+1.zip o...

转载 Binwalk--多重文件查看利器

做misc题的时候，一般都需要从某个网址下载一个文件，然后开始分析这个文件，最终从文件中得到flag。而查看下载的文件中是否包含其他文件的时候一般都需要binwalk这个神器（kali linux中自带）。0X01 下载与安装binwalk的配置环境一般是linux,Pcat大佬有篇文章是关于在windows上配置的，嗯。。。。过程有点复杂，本着省事的精神，我就在虚拟机上装了ubuntu。...

转载 win10下安装Mysql5.7

要安装mysql，首先我们得去mysql官网下载我们需要的资源，选择Downloads—&gt;Community,这时候就能看到MySQL Community Server，这是今天我们要学习配置的版本。 2 好了，到这里就能下载mysql-5.7.10-winx64.zip版本的安装包了。上面是32bit的，图片中标记的是64bit的，大家可以根据自己的实际情况选择下载...

转载 爬虫笔记1-Requests库的基本方法

目标：掌握定向网络数据爬取和网页解析的基本能力课程设置.png◆1◆ requests库的7种主要方法方法 说明 requests.request() 构造一个请求，支撑以下各方法的基础方法 requests.get() 获取HTML网页的主要方法，对应于HTTP的GET requests.head() 获取HTML网页头信息的方法，对应于HTT...

转载 Windows PowerShell和命令行的区别

Windows 7 中开始有了一个PowerShell，实际是增强版的命令行工具。到了 Windows 10，它变成了默认的命令行工具。PowerShell比之前的命令行复杂得多，当然也强悍得多，为了方便，后面我们简称之前的命令行工具还是命令行。命令行使用上和Linux终端差别很多，体验也差很多。但是PowerShell就强多了，而且命令行的命令基本可以直接在PowerShell中使用。P...