LENTON'S BLOG
[24天] background-clip实现文字遮罩效果
前言这真是一个屌炸天的新属性，可以发挥想像实现各种镂空效果。目前还没有被所有浏览器支持，Chrome需要添加-webkit-前辍。开胃小菜全文颜色渐变代码超简单：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-
2022-06-09 16:58:12
727
0
[23天] JS各种抽奖效果实践
几种常见的抽奖效果俄罗斯大转盘跑马灯老虎机翻纸牌刮刮乐俄罗斯大转盘效果：实现思路：主要为css transform属性配合 rotate()旋转函数实现效果，加JS计算旋转的角度达到精确控制。实现思路简易Demo代码：俄罗斯大转盘.zip跑马灯效果：实现思路：使用css grid布局加JS控制实现思路简易Demo代码：choujiang-pmd.zip老虎机效果：.实现思路：使用css transform: translateY()控制上滚动画效果实现思路简易Demo代码：c
2022-06-08 20:27:53
1048
0
[22天] CSS冷门实用特性
一、毛玻璃效果backdrop-filter 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。下例为一个毛玻璃效果：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
&nbs
2022-06-07 14:53:53
650
0
[21天] 前端开发chrome调试技巧
一、一键重新发起请求前端与后端联调时，最常见的就是后端反复的说：你操作一下再发个请求我下个断点看一下。但是对于前端来说可能要在页面上鼓捣半天才能达到指定的接口发起(即使用PostMan等工具也很麻烦不是)。这个痛点chrome早已经为我们想到并解决了。可以一键重发请求。按F12打开控制台选中Network标签找到Fetch/XHR 类型下我们刚发过的请求右键点击 Replay XHR命令 那如果要调整一个参数呢？二、修改请求信息后重新发起请求同上右键请求，选择copy -&g
2022-06-06 09:28:49
757
0
[20天] 上手Markdown语法
前言
Markdown 是一种轻量级标记语言。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。
由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至
2022-06-05 14:49:54
826
0
[19天] IndexedDB初学笔记(一)
前言
MDN介绍：IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。 然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaS
2022-06-04 14:49:12
680
0
[18天] JS正则表达式复习
前言：什么是正则表达式正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间
2022-06-03 14:48:57
663
0
[17天] JS实现Chrome的彩蛋小游戏(一)
Chrome浏览器断网后，会出现一个小恐龙跑跳过障碍的小彩蛋游戏。也想做一个试试。一、先实现一个PNG帧动画小人代码结构：index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=&quo
2022-06-02 11:27:48
538
0
[16天] JS单行代码:无形装逼，最为致命
单行代码并不利于阅读维护，但足够简洁，一般也足够精悍犀利。使用方便，利于装逼，获得满足成就感。
日历
创建过去七天的数组，如果将代码中的减号换成加号，你将得到未来7天的数组集合
// 创建过去七天的数组
[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));
生成随机ID
// 生成长度为11的随机字母数字字符串
Math.random().toString(36).s
2022-06-01 10:46:23
499
0
[15天] Array.from() 五个使用技巧
前言Array.from：允许在 JavaScript 集合(如: array、arrayLike、或者是string、map 、set 等可迭代对象) 上进行有用的转换。在开始之前，我们先回想一下 Array.from() 的作用。语法:Array.from(arrayLike[, mapFunction[, thisArg]])arrayLike：必传参数，想要转换成数组的伪数组对象或可迭代对象。mapFunction：可选参数，mapFunction(item，inde
2022-05-31 14:37:14
501
0