随笔分类 - html
摘要：前言 在现代浏览器中, 我们会经常看到这样的属性: element { --main-bg-color: brown; } 这里我们就来介绍一下他, 并提供一些相关的说明 简介 自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标
阅读全文
摘要：前言 在前一段时间做一个需求的时候, 碰到一个自定义列表的功能, 他的所有数据显示都是通过 jSON 字符串来存储,使用也是通过 JSON 解析 起先他是有数据上限的, 但是后面提高上限后就出现了卡顿等问题, 所以本文就是介绍一些方案来解决前端大量数据的渲染问题 方案 innerHTML 首先是在很
阅读全文
摘要：起因 说起来这个东西, 出来至少 2 年了, 但是因为最近两年我基本没做过 web 端的东西, 所以也没怎么了解过, 趁着这次放假, 补充一下知识点 先来看看 MDN 中对于他的描述: Web Components旨在解决这些问题 — 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，
阅读全文
摘要：当我们在项目中引入公共 cdn 时,想要考虑一些东西,现在我把他描写一下 公共 cdn 的选择 这里只讨论免费的 cdn BootCDN https://www.bootcdn.cn/ 库同步于 cdnjs 支持海外节点,但是较慢 http/2 国内大部分地区都可访问(部分地区可能缓慢) 又拍云 h
阅读全文
摘要：方案 1 普通使用 在组件中直接创建 modal 显示: const {useState, useMemo} = React const useModal = () => { const [visible, setVisible] = useState(false) return useMemo((
阅读全文
摘要：今天偶然间碰到了这个问题, 问题的现状是: 当我们点击某个方法或属性的时候,IDE 无法找到这个方法, 使用 Find Usages 时,也无法找到文件 原因基本是因为 IDE 的缓存问题 解决方案: 打开 ide, 点击左上角的 文件(File) 点击此属性: 点击此按钮 等待 IDE 重启即可恢
阅读全文
摘要：什么是 snowpack Snowpack是用于Web应用程序开发的现代轻量级工具链,可以对标 webpack, 像 webpack 这样的工具每次更新都会重新构建部分或全部代码,这就是他的不足之处了 Snowpack 每当更改文件时，都不会重建多个文件。没有捆绑可言，只有几毫秒的单文件重建，然后通
阅读全文
摘要：【学海拾贝】是一个标签,用来记录我工作中碰到过的问题,在空闲时探索它的原因及原理 由来 2 年前我做 h5 项目的时候,遇到了上传图片的功能实现,于是就用了 `` 这个标签来实现图片的上传 当我点击标签,选择拍照的时候,发现出现的图片和拍照出来是不一样的,它的方向发生了旋转,这样就和拍照的样子不一样
阅读全文
摘要：针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 github 链接 "redux react hook" 一个简单的使用例子: 使用方法和以前一致 二.使用 use
阅读全文
摘要：几个月前看到了这篇文章 https://philipwalton.com/articles/deploying es2015 code in production today/,给了我很大的启发,本来是想使用 vue 来当实验对象的,但是在 vue cli3 的测试版中就有了这个内容,所以这次使用
阅读全文
摘要：最近经历了一波辞职,找工作,搬家这样一个过程,所以没有空写博客,现在稳定了下来,写一下过年时写过的一些东西; 这次要写的是一个颜色选择器,也许很多人都认为是不需要的,因为有h5的 api 提供类似的功能,但是作为一个探索者,怎么能不直接实现一个呢 1. 首先是样式的编写 关于样式方面我仿照的是 el
阅读全文
摘要：前言:之前在网上看到了这个效果,之后我在做项目的时候,正好将他放进了项目里面,这篇博客就介绍一下该效果的原理; 1.首先是基础的设置 canvas 的大小是占据整个屏幕; 2.绘出字 typescript const str: string = '404'; ctx.textBaseline = '
阅读全文
摘要：前言:之前做过一个 snow 效果,但是是直接用 HTML 做的 点击此处查看 ,几个星期前,我用 typescript 和 canvas 重构了一下, snow效果是一个很简单的效果,但是用来练手还是不错的; 首先创建基本变量: 在获取 canvas 的 dom 时可能后报错,所以要用断言或者 这
阅读全文
摘要：以前就看到了这个东西,由于太忙了最近才有时间来实现这个; 该文章适合有一定 canvas 基础的人阅读; 首先说说他的原理: The construction of the Pythagoras tree begins with a square. Upon this square are cons
阅读全文
摘要：canvas 入门之作: 三步实现一个时钟: 直接上效果: step 1 : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.wid
阅读全文
摘要：先上 demo: https://grewer.github.io/JsDemo/canvasLine/ 这两天我一直在研究这个动画,花了大量的时间来想是如何实现的, 一开始我是想在进入 canvas 时按时间来用 lineTo 绘出六边形,退出时反方向再绘出白色的一条线; 想这样: 进入canva
阅读全文
摘要：最近想了想ajax加载时的进项,便着手写了这个,我想css3的支持度已经够了
阅读全文
摘要：网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器的手机模式是没有手机上的效果的,所以要在头部添加: <meta charset="utf-8" na
阅读全文
摘要：var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var Grewer = { init: function() { this.getWindowSize(); canvas.widt
阅读全文
摘要：之前我看到一篇文章是介绍彩色小球的实现; 链接:http://www.cnblogs.com/xiaohuochai/p/6370123.html 我按照他的思路也写了一个: 代码: demo: http://en.jsrun.net/ryiKp/show 而后我又想起了以前想做的下雪的效果; 于是
阅读全文