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

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

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

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

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

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

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

使用思否猫素材实现一个轮播图本文参与了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 楼层按钮（包含上升和下降按钮...

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

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

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

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

1.Expanding Cards效果如图所示:源码在线示例[ ] 知识点总结:CSS:弹性盒子布局中的flex属性:让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。JavaScript:利用[].filter.call()方法可快速实现简单的选项卡切换。如上述示例源码: {代码...} 2.Progress Steps效果如图所示:源码在线示例[ ] 知识点总结:...

mini版本的vue.js2.X版本框架模板代码首先我们看一下我们要实现的模板代码: {代码...} 逻辑代码然后就是我们要编写的javascript代码。 {代码...} 运行效果我们来看一下实际运行效果如下所示:思考一下，我们要实现如上的功能应该怎么做呢?你也可以单独打开以上示例:点击此处。源码实现-2.xminiVue类首先，不管三七二十一...

第一次加入思否还是因为问题而进入的，不得不说思否的问答做的很棒，有很多热心的大佬解决问题，所以我被思否深深的吸引了，也加入了回答问题的大军，我的想法很简单，能把我所理解到的解答出来，对我来说即是一种提升。

坐标成都，大专，4年前端，分享一次自己在蚂蚁金服的面试经历。一面1.自我介绍答：我是XXX,经历。。。。2.vue data响应式的实现答:啪啦啪啦说了一大堆，感觉我很兴奋。3.vue computed的实现答:好吧到这里我就卡住了，因为我当时比较紧张了，尽管我内心不停的劝告自己，然后脑海一片空白。4.你在css方面的擅长?答:我擅长...

绝大多数情况下，this的指向由函数的调用方式决定。它不能被赋值，并且每次函数调用，它也有可能会不同。ES5引入了bind方法来设置函数的this值，而不需要考虑函数的调用方式，ES6的箭头函数不提供自身的this绑定，它的this由当前上下文决定。

ew-color-picker这是一个用javascript编写的灵活的，高度自定义的颜色选择器。使用场景这个颜色选择器适用于中小型项目，例如主题的切换。不同于组件库中的颜色选择器组件，它的配置自主化，根据用户的需求来自定义。优点html5 的原生颜色选择器样式不好看，而组件库的颜色选择器不够灵活多变，这样一来，就有了这个颜色...

初看到掘金 - 2020年度人气创作者榜单这个网站，感觉整体界面效果给我一种清爽的感觉，于是花了点时间琢磨如何实现。目前实现的功能有:列表展示，搜索，无限加载(与原网站有些区别，加了loading效果)，活动介绍，tab切换。通过这些，我对vue3.0的composition api有了一定的认知，下面让我们来看看吧！

在编写代码时，我们需要用到es6的语法，因此我们还需要安装@babel/core @babel/cli @babel/preset-env babel-loader依赖来处理es6兼容语法。继续执行如下命令:

消息提示框在实际应用场景当中比较常见，最常用的就是element ui的消息提示框，我们通常都是直接使用它们,但是我们有没有尝试过去探究其实现原理，并自己动手实现呢？为了提升我们的个人能力和竞争力，我们可以尝试来实现这样一个消息提示框。

预览图片是一个很常用的业务功能，比如掘金的预览图片功能，下面我们就来模拟实现一个类似掘金的简单预览图片功能（PS:最终实现动画效果不如掘金，可自行扩展，还有就是嵌套的元素与掘金的方式也有区别）。

假如你的女朋友发给你一堆衣服的图片，然后问你哪件好看，只能选一件最好看的，你会如何做？为什么不交给程序来进行抉择呢？本文的主题就是开发一个选择程序来解决你的女朋友的选择问题。