本文参与了SegmentFault 思否 2023 年度有奖征文活动，欢迎正在阅读的你也加入。2023 年终总结又是这样匆匆忙忙的度过了一年，今年付出了很多，也收获了不少，接下来，我想盘点一下我今年所做的付出与收获。收集曾经的作品我收集了我曾经写的诗词，小说等作品，虽然写的不怎么样，但也是值得看看，留作纪念，网站地址我...

观察题目，其实就是将两个联合类型的值组合成接口，其中第一个联合类型的值作为属性，第二个联合类型的值则作为属性值，并且两者的属性顺序是一一对应的。下面跟着我一起来分析，通过这道题，我们能理解到 ts 的不少知识点，不信继续往下看。

有关隐藏元素的方式 display: none 与 visibility:hidden 的区别，这可以说是 css 面试题当中最常见的一道题了。相信大多数开发者被问到的第一答案就是:display: none 不占据空间，visibility: hidden 占据空间。但实际上两者之间的区别并不只是不占据空间这么简单，且听我娓娓道来。

js没有相关接口可以准确获取安卓手机软键盘的高度，这样也就无法处理当软键盘弹出时，能够将输入框顶上去，并且与软键盘完美的贴合，比如输入框在最底部的场景，此时页面滚动高度不够，因此无法准确的滚动到底，使得软键盘将输入框顶上去并与之完美的贴合。

事情是这样的，有个群友在业务当中碰到一个小小的需求，需求是这样的: 页面当中存在多个输入框，输入框的 value 值是一个数值组成的字符串（盲猜应该是身份证号码），这个字符串的位数是 15 位或者是 18 位，例如:'621848063680370'(15 位)和'621848063688370808'(18 位)，然后默认的值是这样的，现在问题来了，需求希望...

ew-message一个基于 typescript 而封装的消息提示框插件，可用于不使用ui组件库的中小型网站中。安装与使用安装 {代码...} 引入 {代码...} 消息提示框插件如下: {代码...} option 配置对象有如下参数: {代码...} ps: 推荐使用导入样式文件的方式。cdn 引入 {代码...} 在组件中使用 {代码...} 当然也可以不引入样式，插件...

问题很简单，先使用 let 在全局中定义了一个变量 a,并定义初始值为 1，然后定义了一个函数，在函数的内部又定义了一个同样的变量 a，然后调用这个函数，在调用函数之后打印变量 a，问题就是在函数内部添加一些代码使得最终打印变量 a 的结果是 3。

自译: 兔年既然来了，为了表示欢迎兔年的到来，而且我也认为兔兔很是可爱，令人喜欢，因此写了一个兔兔相册展示器，用来收藏可爱的兔兔图片，现在让我们先来看看这个相册展示器的效果吧，正如下面所展示的:

css content 属性有很多实用的用法，这其中最为强大的莫过于是计数器了，它甚至可以实现连 javascript 都不能够实现的效果，下面我们一起来研究一下吧。

将 dot 元素设置为内联元素(display:inline-block),并设置溢出隐藏(overflow:hidden)，高度设置为 1em。

要实现两个小圆球，我们可以思考两种方案的实现，第一种就是css方案，画两个小圆球，然后使用css动画来实现，而第二种则是使用canvas方案。我们首先来尝试第一种方案，首先肯定是要画出两个小圆球，这不就是相当于画两个圆嘛，所以使用宽高加圆角属性即可实现。

时光如梭，岁月匆匆而过，2022年一转眼就已经到了末尾，今年的环境异常艰难，可是想想自己这一年来的付出，也还是值得做一个复盘总结的，正所谓有得必有失，在这一年我失去了太多，不过却也让我成长了不少，当然这些都是题外话，我主要还是来复盘一下今年我所学习的成果。

本文参与了思否技术征文，欢迎正在阅读的你也加入。前言特别说明: 本文只适合新手学习这篇文章带我们入门go语言的定义变量的方式，其实和javascript很相似，所以特意总结在此。在go语言中，也有变量和常量两种，首先我们来看变量的定义，定义变量我们分为定义单个变量和多个变量。本文知识点总结如下图所示:定义单个变量...

最近在做项目，碰到了这样一个需求，就是页面有一个元素，这个元素可以在限定的区域内进行拖拽，拖拽完成吸附到左边或者右边，并且在滚动页面的时候，这个元素要半隐状态，停止滚动的时候恢复到原来的位置。如下视频所示:

使用思否猫素材实现一个轮播图本文参与了1024程序员节，欢迎正在阅读的你也加入。通过本文，你将学到:htmlcssjs没错，就是html，css,js,现在是框架盛行的时代，所以很少会有人在意原生三件套，通过本文实现一个丝滑的轮播图，带你重温html,css和js基础知识。为什么选用轮播图做示例？有如下几点:业务当中最常用轮播图说...

vue3实现一个思否猫连连看小游戏本文参与了1024程序员节，欢迎正在阅读的你也加入。通过本文，你将学到:vue3的核心语法vue3的状态管理工具pinia的用法sass的用法基本算法canvas实现一个下雪的效果，一些canvas的基本用法rem布局typescript知识点开始之前在开始之前，我们先来看一下最终的成品是怎么样的，如下图所示:首...

前面有总结过一篇《简易动物版的羊了个羊》的实现，今天参考了鱼皮大佬的鱼了个鱼,我好奇研究了一下他的源码实现，并结合自己的理解，也用react + antd实现了一版，在实现的过程中，我只是简单修改了一下核心逻辑和游戏配置，然后借助于reactivue这个库将vue的composition API用到了这里。

手写一个mini版本的React状态管理工具目前在React中，有很多各式各样的状态管理工具，如：React ReduxMobxHox每一个状态管理工具都有着不尽相同的API和使用方式，而且都有一定的学习成本，而且这些状态管理工具也有一定的复杂度，并没有做到极致的简单。在开发者的眼中，只有用起来比较简单，那么才会有更多的人去使用它...

通过本文的50个web示例你将学到:Vue3核心基础语法和进阶语法less核心基础语法和进阶语法scss核心基础语法和进阶语法1.Expanding Cards效果如图所示:源码在线示例学到了什么?JavascriptVue ref方法定义基本响应式变量。如: {代码...} ref方法当然也可以定义一个对象，但是通常定义对象应该使用reactive方法。Vue v-for指...

这两天火爆全场的《羊了个羊》游戏，相信大家都玩过了，那么在玩这个游戏的同时，我想大家都会好奇这个游戏的实现，本文就带大家使用css,html,js来实现一个动物版的游戏。

查看效果我们先来看一下今天要实现的示例的效果，如下所示:好，接下来我们也看到了这个示例的效果，让我们进入正题，开始愉快的编码吧。技术栈介绍这个小程序，我们将采用React + typescript + css in js语法编写,并且采用最新比较流行的工具vite来构建。初始化项目我们可以选择在电脑按住shift,然后右键，选择powershel...

通过本示例，你将学到什么?CSS 相关CSS定位CSS弹性盒子布局CSS动画CSS变量的用法js相关类的封装DOM的操作与事件的操作样式与类的操作延迟函数的使用示例效果废话少说，先看效果如图所示:分析小程序的构成电梯井（也就是电梯上升或者下降的地方）电梯电梯门（分为左右门）楼层4.1 楼层数4.2 楼层按钮（包含上升和下降按钮...

知识点emotion语法react语法css语法typescript类型语法效果让我们来看一下我们实现的效果图:结构分析根据上图，我们来分析一下，一个手风琴组件应该包含一个手风琴容器组件和多个手风琴子元素组件。因此，假设我们实现好了所有的逻辑，并写出使用demo，那么代码应该如下: {代码...} 根据以上的结构，我们可以得知，首先...

时间过的很快，一转眼一年就已经过去了，在2021年的一年里我的收获还是蛮多的，可惜的是，今年我的目标一样也没有完成，有些遗憾与可惜。不过明年的我将会更加努力，争取实现我的目标。

题目:在一个长度为 n 的数组 nums 里的所有数字都在 0～n-1 的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。

在线三角形生成器通过本文，你将学到如下知识:快速入门vue 3.2的核心API知识掌握最新浏览器实现的复制粘贴的clipboard API按需引入element plusvite 的一些入门配置正则表达式以及typescript的类型less语法element plus 国际化快速创建一个vite项目参考文档官网vite。我们可以快速创建一个项目: {代码...} 接下来，我们...

1.Expanding Cards效果如图所示:源码在线示例学到了什么?React的函数组件中建立数据通信，我们通常使用useState方法。它的使用方式采用数组解构的方式，如下: {代码...} 解构的第一个参数是我们定义并且访问的数据状态，第二个参数则是当我们需要变动数据状态时所调用的方法，其作用类似类组件中的this.setState。更详细...

首先，我们无需搭建项目的环境，我们还是直接用最简单的方式，也就是引入的方式来创建这个项目，这样也就方便了我们一边编写一边测试。创建一个空目录，命名为ColorPicker,创建一个js文件，即color-picker.js,然后创建一个index.html文件以及创建一个样式文件color-picker.css。现在你应该可以看到你的项目目录是如下所示:

有这样一个需求:页面已经写了太多的详情表单元素，并且每一个表单元素都使用了Tooltip组件来包裹，这样是不符合需求的，因为用户需要限定当表单元素的文本太多时，也就是说出现了省略号才会出现Tooltip组件的包裹。比如项目采用的element UI组件库。在一个页面有太多的这样的表单元素:

也许有人咋一看，看到这个网站有些熟悉，没错，这个网站来源于[链接]。我花了三天时间，用create-react-app + react + typescript重构这个网站，与网站效果不同的是，我没有加入任何的动画，并且我添加了中英文切换以及回到顶部的效果。