汇总一下近期发现的小东西
近期发现一些新的好玩的CSS属性和JS方法,记录一下。有表单内容颜色,原生对话框,原生日期时间选择控件,原生JS深拷贝方法,及CSS layer和has伪类等等。
Open Graph协议摘记-URL分享预览功能
Open Graph 是一种由 Facebook 创建的开放式协议,用于标记社交媒体上的网页内容。通过在网页中插入 Open Graph 标签,网页开发者可以定义相关的元数据,包括标题、描述、图片等,从而让社交媒体平台能够更好地呈现网页内容。
ES2023新内容概要
其中以数组又双叒叕新增了方法为主。可以更方便的操作数组了。也是因为数组数据处理是日常业务中最广范最多的原因了。
新内容清单:
Array.prototype.toSorted
Array.prototype.toReversed
Array.prototype.with
原生JS的GZIP压缩解压缩API
Compression Stream API
Compression Stream API 提供了一种 JavaScript API,使用 gzip 或者默认格式压缩和解压缩数据流。 内置的压缩库意味着 JavaScript 应用不再需要包含其它压缩库,这使得应用程序的下载大小更小。
JS前端实现摇杆轮盘
前端用JS实现一个向手游中可以360度滑动方向的控制轮盘。
这是从我的项目中抽出来的代码DEMO:
注: 因为是用在3D中,所以在屏幕中y轴的滑动对应的是3D世界中的z轴。所以代码中会有y,z,要注意区分。
HTML文档打印分页标记
关于html文档打印,实现指定位置分页这个需求,以前是不知道如何处理了的。
也不知道这个CSS属性是什么时候出现的。总之我是刚刚知道的。好久没有更新文章了,正好记录一下吧。
代码很简单,只要一个CSS属性就可以了。
@media print{
.page{
page-break-after: always;
}
}
微信阅读网页版实现的初步尝试
前言
最近用微信阅读网页版时突然想到的。看了源代码,因为压缩了并没有看出什么有价值的东西。于是自己尝试了一下如何实现。
不知道微信阅读用的是什么Canvas JS库,我用了自己比较熟悉的FabricJS
主要尝试实现的两点功能:
-
文字自动换行
-
对文字选择划线
成果
这是我尝试的结果:
陆-SVG矢量图形学习进阶
承接上篇: [05天]SVG矢量图形学习
上篇主要是对svg基础做了介绍。用以满足日常svg图形的基本使用。
本篇是进阶内容,将会对svg的滤镜,动画,事件等等各特性做介绍说明。如果对svg还没有做过了解,请先阅读上篇。