LENTON'S BLOG
[27天] 一条分割线能耍什么花样
这是一条普通的HTML分割线
<hr class="line1">
两条实线
.line1{
border: 0;
border-bottom: 3px double;
}
一条虚线
.line1{
border: 0;
border-bottom: 1px dotted;
}
一条可控线段长度与间距的虚线
.line1{
border: 0;
padding-top: 1px;
background: re
2022-06-12 17:27:50
896
0
[26天] 页面刷新后滚动条回到顶部
浏览器默认行为
如果浏览器不是强制刷新（Ctrl + F5），而是普通刷新（点击刷新按钮，或者按下 F5 刷新），则页面重新载入完毕后，滚动条会调到之前访问的位置。
大多数时候，这种体验对用户是友好的。但如果我我们希望滚动条回到顶部该如何处理？
不优雅的方式：
在页面加载完成事件中执行：
document.documentElement.scrollTop = 0
原生的 API
浏览器已经提供了原生的 API，可以轻松实现浏览器滚动后每次都回到顶部的能力。
只需在页面中执行：
2022-06-11 17:20:44
1698
0
[25天] 巧用border-radius实现波浪加载
先看看只用了一个div加上css实现的效果：由于录制gif体积较大，所以只录了加载到一半的效果。先帖上完整代码，如果不好读后面有大致的思路说明：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=&qu
2022-06-10 16:55:10
887
0
[24天] background-clip实现文字遮罩效果
前言这真是一个屌炸天的新属性，可以发挥想像实现各种镂空效果。目前还没有被所有浏览器支持，Chrome需要添加-webkit-前辍。开胃小菜全文颜色渐变代码超简单：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-
2022-06-09 16:58:12
821
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
1126
0
[22天] CSS冷门实用特性
一、毛玻璃效果backdrop-filter 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。下例为一个毛玻璃效果：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
&nbs
2022-06-07 14:53:53
721
0
[21天] 前端开发chrome调试技巧
一、一键重新发起请求前端与后端联调时，最常见的就是后端反复的说：你操作一下再发个请求我下个断点看一下。但是对于前端来说可能要在页面上鼓捣半天才能达到指定的接口发起(即使用PostMan等工具也很麻烦不是)。这个痛点chrome早已经为我们想到并解决了。可以一键重发请求。按F12打开控制台选中Network标签找到Fetch/XHR 类型下我们刚发过的请求右键点击 Replay XHR命令 那如果要调整一个参数呢？二、修改请求信息后重新发起请求同上右键请求，选择copy -&g
2022-06-06 09:28:49
832
0
[20天] 上手Markdown语法
前言
Markdown 是一种轻量级标记语言。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。
由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至
2022-06-05 14:49:54
900
0
[19天] IndexedDB初学笔记(一)
前言
MDN介绍：IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。 然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaS
2022-06-04 14:49:12
755
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
744
0