LENTON'S BLOG

汇总一下近期发现的小东西

近期发现一些新的好玩的CSS属性和JS方法,记录一下。有表单内容颜色,原生对话框,原生日期时间选择控件,原生JS深拷贝方法,及CSS layer和has伪类等等。

2024-03-27 14:01:01 176 2

Open Graph协议摘记-URL分享预览功能

Open Graph 是一种由 Facebook 创建的开放式协议,用于标记社交媒体上的网页内容。通过在网页中插入 Open Graph 标签,网页开发者可以定义相关的元数据,包括标题、描述、图片等,从而让社交媒体平台能够更好地呈现网页内容。

2024-01-02 15:28:14 50 0

ES2023新内容概要

其中以数组又双叒叕新增了方法为主。可以更方便的操作数组了。也是因为数组数据处理是日常业务中最广范最多的原因了。

新内容清单:

  • Array.prototype.toSorted

  • Array.prototype.toReversed

  • Array.prototype.with

2023-10-23 10:29:50 179 0

漂亮的CSS移动端底部导航栏实现

先看效果:

chrome-capture (1).gif

这个效果的实现,重点是使用了svg滤镜

完整代码如下:

2023-10-16 11:08:41 178 0

CSS工作组总结的CSS设计错误

CSS工作组总结的CSS设计错误不完整列表。如果有人发明了时光机,那就应该纠正

2023-10-13 14:31:10 86 0

原生JS的GZIP压缩解压缩API

Compression Stream API

Compression Stream API 提供了一种 JavaScript API,使用 gzip 或者默认格式压缩和解压缩数据流。 内置的压缩库意味着 JavaScript 应用不再需要包含其它压缩库,这使得应用程序的下载大小更小。

之前一直使用的是

2023-08-31 11:50:44 204 0

JS前端实现摇杆轮盘

前端用JS实现一个向手游中可以360度滑动方向的控制轮盘。

这是从我的项目中抽出来的代码DEMO:

注: 因为是用在3D中,所以在屏幕中y轴的滑动对应的是3D世界中的z轴。所以代码中会有y,z,要注意区分。

2023-03-10 15:01:31 688 0

HTML文档打印分页标记

关于html文档打印,实现指定位置分页这个需求,以前是不知道如何处理了的。

也不知道这个CSS属性是什么时候出现的。总之我是刚刚知道的。好久没有更新文章了,正好记录一下吧。

代码很简单,只要一个CSS属性就可以了。

    @media print{
      .page{
        page-break-after: always;
      }
    }
2023-03-10 14:38:38 1108 0

微信阅读网页版实现的初步尝试

前言

最近用微信阅读网页版时突然想到的。看了源代码,因为压缩了并没有看出什么有价值的东西。于是自己尝试了一下如何实现。

不知道微信阅读用的是什么Canvas JS库,我用了自己比较熟悉的FabricJS

主要尝试实现的两点功能:

  1. 文字自动换行

  2. 对文字选择划线

成果

这是我尝试的结果:

2022-12-22 11:43:54 533 0

陆-SVG矢量图形学习进阶

承接上篇: [05天]SVG矢量图形学习 

 

上篇主要是对svg基础做了介绍。用以满足日常svg图形的基本使用。

本篇是进阶内容,将会对svg的滤镜,动画,事件等等各特性做介绍说明。如果对svg还没有做过了解,请先阅读上篇。

2022-11-17 13:51:50 529 0
svg