柚子青年。
2023-02-02因为币安这个APP除了买币一无是处,所以我自己动手开发了这款Chrome拓展工具。既能看行情,还能查看收益、管理资产。
实话实说,币安除了能买币其他一无是处,收益之类的做的更烂。所以我只能自己动手了
一位不愿意透露姓名的朋友表示,确实很烂实话实说
我只是一个刚入行的小韭菜,听说币圈的同志们抄币还要做 Excel ,所以分享出来。希望可以帮助大家管理自己资产(工具还在初级阶段,行情只是第一个模块,有什么建议可以在本网站给我留言😉)
阅读全文
柚子青年。
2023-02-02纯前端解析APNG动画格式图片,生成ZIP打包下载所有帧图片。
起因
某天晚上我在某牙看直播时,发现他们新推了一个表情包还挺逗,大概是这样的
于是我突发奇想做一个表情包,这样的
阅读全文
柚子青年。
2023-02-02Formily入门文档,了解formily是什么、快速创建一个简单表单,增加校验规则以及自定义校验正则。
本教程只基于Formily SchemaForm的使用,Demo展示 codesandbox
Formily是什么
Formily 是阿里巴巴开源的一个表单框架,致力于解决所有中后台表单场景。目前只有React版本,支持Antd和next UI组件库。[查看详情]
Formily有自己的状态管理,内部也有自己的生命周期,在渲染的时候也做到了最小更新,所以即使你是大型表单性能也不会很差。
阅读全文
柚子青年。
2023-02-02在使用 Editor.md 的过程中遇到的图片上传问题
Editor.md 是一个很好用的 markdown 编辑器,在使用过程中遇到一个图片上传的问题。
插件原方法是使用了一个 Form 来提交图片资源,我在这个基础上添加了一个 upload 方法,用来上传图片资源。储存图片使用的是阿里云的OSS。
源代码
var dialogContent = ((settings.imageUpload) ? "<form action='" + action + "' target='" + iframeName + "' method='post' enctype='multipart/form-data' class='" + classPrefix + "form'>" : "<div class='" + classPrefix + "form'>") + ((settings.imageUpload) ? "<iframe name='" + iframeName + "' id='" + iframeName + "' guid='" + guid + "'></iframe>" : "") + "<label>" + imageLang.url + "</label>" + "<input type='text' data-url />" + (function () { return (settings.imageUpload) ? "<div class='" + classPrefix + "file-input'>" + "<input type='file' name='" + classPrefix + "image-file' accept='image/*' />" + "<input type='submit' value='" + imageLang.uploadButton + "' />" + "</div>" : ""; })() + "<br/>" + "<label>" + imageLang.alt + "</label>" + "<input type='text' value='" + selection + "' data-alt />" + "<br/>" + "<label>" + imageLang.link + "</label>" + "<input type='text' value='http://' data-link />" + "<br/>" + ((settings.imageUpload) ? "</form>" : "</div>");
阅读全文
柚子青年。
2023-02-02为什么 Hooks 内 removeEventListener 会失效?
起因
当我在 Hooks
内使用 addEventListener
监听 scroll
事件时,然后使用 removeEventListener
移除监听发现移除失效。
const scroll = () => { useEffect(() => { document.addEventListener("scroll", scrollCallback); }, []); const scrollCallback = (e) => { console.log(e) } const clearScroll = () => { document.removeEventListener("scroll", scrollCallback); } return <button onClick={clearScroll}>Clean</button>;}
这是一个在初始化完成后会在 document
添加一个 scroll
事件监听,点击按钮之后会清除监听事件。
阅读全文
柚子青年。
2023-02-02使用特殊字体时,字体包过大解决方法。
安装 font-spider
npm install font-spider
index.html
<div class="content">0123456789</div>
阅读全文
柚子青年。
2023-02-02有时候只是想要一个简单的轮播图效果,一些开源库总是很大,如何写一个最轻量的轮播图。
轮播图的几个关键点:翻页按钮,分页器,悬停静止,无限轮播,清理动画叠加。
文中使用了构造函数的方式把所有细节解构去耦合,欢迎大家点评
HTML
<div class="swiper swiper1"> <div class="wrapper"> <div class="slider">1</div> <div class="slider">2</div> <div class="slider">3</div> <div class="slider">4</div> <div class="slider">5</div> </div> <div class="btn"> <span class="prev"><</span> <span class="next">></span> </div></div>
阅读全文
柚子青年。
2023-02-02node小工具,用于xlsx和json互转
xlsx 转 json
const fs = require('fs');const xlsx2json = require('xlsx2json');xlsx2json( './文档.xlsx', // url { dataStartingRow: 3, // 第几行开始 mapping: { // 解析 key value 'key1': 'A', 'key2': 'B', } }).then(jsonArray => { // 输出数组 格式自行log fs.writeFileSync('./文档.json', JSON.stringify(jsonArray));});
json 转 xlsx
const fs = require('fs');const json2xls = require('json2xls');const json = require("./json");let jsonArr = [];for (let jsonKey in json) { jsonArr.push({ "A": json[jsonKey].cn, // A 内容 "B": json[jsonKey].en, // B 内容 });}fs.writeFileSync('./data.xlsx', json2xls(jsonArr), 'binary');
阅读全文