柚子青年-优快云博客

原创【手撕代码】轻量轮播图

个人博客：柚子青年。原文地址：【手撕代码】轻量轮播图 GIT：youzi20/page/swiper.html 效果预览：有时候只是想要一个简单的轮播图效果，一些开源库总是很大，如何手撸一个最轻量的轮子。轮播图的几个关键点：翻页按钮，分页器，悬停静止，无限轮播，清理动画叠加。文中使用了构造函数的方式把所有细节解构去耦合，欢迎大家点评 ????‍???? html <div class="swiper swiper1"> <div class="wrapper">

2021-07-27 21:35:14 218

原创微信小程序 - 渲染HTML

个人博客：柚子青年。原文链接：微信小程序 - 渲染HTML 微信小程序现在已经被广泛应用，开发方式类似 Vue。阅读本文需要有小程序基础。 rich-text 在渲染 DOM 这一块，小程序没有 Vue 的 v-html 也没有 React 的 dangerouslySetInnerHTML，不过小程序提供了自己的渲染方式 rich-text，详情请看官方文档。不过在展示效果上个人觉得是不...

2020-04-06 11:52:19 731

原创字体压缩 - 字蛛 font-spider

个人博客：柚子青年。原文链接：字体压缩 - 字蛛 font-spider 安装 font-spider npm install font-spider index.html <div class="content">0123456789</div> index.css @font-face { font-family: 'DINAlternateBold'; ...

2020-04-06 11:48:17 402

原创 xlsx - json 互转

个人博客：柚子青年。原文链接：xlsx - json 互转 xlsx 转 json const fs = require('fs'); const xlsx2json = require('xlsx2json'); xlsx2json( './文档.xlsx', // url { dataStartingRow: 3, // 第几行开始 mapp...

2020-03-24 15:57:04 275

原创 Promise 以及 async/await 是什么

AJAX的出现使浏览器的用户体验得到了一个质的提升，再不用像以前一样（例如：查看下一页必须整个页面全部重新加载，使用AJAX只需要局部加载下一页数据然后重新渲染DOM）。当然AJAX是一个异步操作，当请求成功之后，调用一个回调函数。在遇到需要获取返回内容时再做其他操作，很容易陷入“回调地狱”。这个词相信都不陌生也经常遇到这种情况，最好的做法就是封装一层AJAX参数处理、传入回调函数，做一些简单的...

2020-03-24 15:54:52 286

原创如何让 textarea 文本框高度自动伸缩

个人博客：柚子青年。原文链接：webstorm 插件拓展（一）本文主要讲的是如何让 textarea 文本框自动伸缩原理：每次输入文字后重置文本框默认高度判断是否出现滚动条动态修改高度。 $(this).change(function () { this.style.height = 'height'; // height = textarea 默高度 if (thi...

2020-03-24 11:45:08 692

原创 webstorm 插件拓展（一）

本文主要介绍webstorm拓展插件 Sass / SCSS 以及压缩css / js 一、 Sass / SCSS 安装稍微了解一下 Sass 和 SCSS 的区别： SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能 ; Sass是用Ruby语言写的，所以需要先安装Ruby，然后再安装 Sass / SCSS Ruby 下...

2020-03-21 16:29:28 1554

柚子青年。