jxzssy

CSS表盘刻度

某日，群里有这样一个问题，如何实现这样的表盘刻度： 这其实是个挺有意思的问题，方法也有很多。 单标签，使用 conic-gradient 实现表盘刻度 最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常简单，首先，我们实现一个重复角向渐变： 其实比较难理解的是 calc((360 / 60) * 1deg)，这是因为表盘一共通常有 60 个刻度。效果大概是这样： 接下来，只需要将中间镂空即可。如果背景色是白色，直接叠加...

现代 CSS 解决方案：CSS 数学函数

在 CSS 中，其实存在各种各样的函数。具体分为： Transform functions Math functions Filter functions Color functions Image functions Counter functions Font functions Shape functions Reference functions CSS grid functions 本文，将具体介绍其中的 CSS 数学函数（Math functions）中，已经被浏览器大规模支持的 4 个： calc() min() max() clamp() 为什么说是被浏览器大规模...

逻辑选择器 — 父选择器

在 CSS 选择器家族中，新增这样一类比较新的选择器 — 逻辑选择器，目前共有 4 名成员： :is :where :not :has 本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。 :is 伪类选择器 :is() CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。 在之前，对于多个不同父容器的同个子元素的一些共性样式设置，可能会出现如下 CSS 代码： 而如今有了 :is() 伪类，上述代码可以改写成： [crayon-68b2a4221a043786...

css动画控制

今天，有在群里看到这样一个问题：有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧，使用 CSS 可以完成么？ 像是这样： 一个非常有意思的问题，答案是可以的。我们抽取一下其中的关键点： 动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧 动画通过 hover 驱动，只有用户 hover 元素的时候，动画才进行 animation-fill-mode 控制元素在各个阶段的状态 首先，动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧。 这个刚好利用 CSS 动画的 animation-fill-mode: bo...

JavaScript中的事件委托机制跟深浅拷贝

今天聊下JavaScript中的事件委托跟深浅拷贝 一、事件委托 首先呢，介绍一下事件绑定 说下其中的区别 onclick只能绑定一个事件，而addEventListener可以同时绑定多个事件 事件冒泡 点击 “title3里面的文本” 会触发 3 次事件，分别 弹出 “title3inner” -> “title3” -> “container” 事件捕获 至于事件冒泡...

ES6在工作中会用到的核心知识点讲解

一、var, let, const 谈到ES6，估计大家首先肯定会想到var，let，const 咱就先谈谈这三者的区别 很简单吧， var声明的变量可以重新声明，并且是全局作用域， let声明的变量不可以重新声明，并且是局部作用域， const声明的变量不可以重新声明，并且不可以更改值，局部作用域（声明的是对象的话，可以更改对象里面某个属性的值）， 针对const，再举个例子： 在实际中，let经常用在for循环上 二、Promise 谈到Prom...

php函数

php函数 创建函数 语法： 其中函数名称以字母或下划线开头（不能以数字开头） 添加参数 参数在函数名称后面的一个括号内指定 比如： 使用return语句，可以让函数返回值 比如：

前端面试遇到的问题

最近一场面试，发现了自己很多的问题，为此做个总结。非常感谢此次的面试。嘿嘿! 一、闭包中的问题 下列代码存在几个变量没有被回收？ 答案是3个。第一个：全局变量i；第二个：函数变量add；第三个：局部变量i； 首先先分析前两行代码 这两行代码，先用var声明一个变量i然后赋值，接着再次使用var声明同一个变量顺带赋值。毕竟var是可以重新声明同一个变量的。 在这里有个知识点需要了解。全局变量只有在页面关闭的时候才会销毁。 所以以上两行代码运行后，只有一个变量没有被销...