-
原生JS实现三级联动
所属栏目：[资源] 日期：2020-12-14 热度：201
h2 id="代码实现"代码实现 pre class="html" !DOCTYPE html JS的三级联动 .js-demo { width: 700px; margin: 0 auto; padding-top: 100px; } select { margin-right: 50px; }/style div class="js-demo" 省份： select id="province" 城市：select id="city"[详细]
-
纯CSS修改checkbox复选框样式
所属栏目：[资源] 日期：2020-12-14 热度：136
借鉴网友博客,改用后整理收录 效果图: 移入: div class="cnblogs_code" .box_inner1 label/spanspan style="background-color: #f5f5f5; color: #000000"gt;{/spanspan style="background-color: #f5f5f5; color: #ff0000"gt; cursor/spanspan style="backgr[详细]
-
纯CSS修改checkbox复选框样式-02
所属栏目：[资源] 日期：2020-12-14 热度：83
我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好),这个是改动最简单的: css代码 { : ;} input[type="checkbox"] {span style="color: #ff0000" -webkit-appearance :span style="color: #0000ff" none ;span style="color: #ff0000" verti[详细]
-
React 中 Link 和 NavLink 组件 activeClassName、activeStyle
所属栏目：[资源] 日期：2020-12-14 热度：137
首先 导航链接应该使用?? ?而不再是?? ? ? ?使用方法见?https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md ? ?和?? ?一起使用的时候，会出现 激活链接样式（当前页面对应链接样式，通过 activeClas[详细]
-
十分钟通过 NPM 创建一个命令行工具
所属栏目：[资源] 日期：2020-12-14 热度：77
p class="article-title"大过年的，要不要写点代码压压惊？来花十分钟学一下怎么通过 NPM 构建一个命令行工具。 div class="article-content" data-v-5fb28c70="" data-id="5c58ec07f265da2dd1683f81" 写了一个小 demo，用于代替? touch ?的创建文件命令? to[详细]
-
React 实现拖拽功能
所属栏目：[资源] 日期：2020-12-14 热度：121
实现效果：（可戳 查看） 因为工作中会用到 JIRA 所以想实现一下相似的功能，顺便学习一下 H5 的拖拽。不支持拖拽改变顺序，感觉有点麻烦，而且没必要。感觉相关的博文好少的，大部分都是直接上代码，没有解释。 图片默认可以拖动，其他元素的拖动效果同图片[详细]
-
Vue实现移动端页面切换效果
所属栏目：[资源] 日期：2020-12-14 热度：74
找了好多博客实现效果都……emmm…… 应用Vue自带的过渡 《??》和 嵌套路由 和 fixed定位实现 其实还是挺简单的。 在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将? ?用? ?套起来，并加上过渡动画就可以啦。 代码： Document 下一层 第一层 span st[详细]
-
一步一步用Canvas写一个贪吃蛇
所属栏目：[资源] 日期：2020-12-14 热度：190
之前在慕课网看了几集Canvas的视频，一直想着写点东西练练手。感觉贪吃蛇算是比较简单的了，当年大学的时候还写过C语言字符版的，没想到还是遇到了很多问题。 最终效果如下（图太大的话 时间太长 录制gif的软件有时限…） 首先定义游戏区域。贪吃蛇的屏幕上[详细]
-
Vue中实现一个无限加载列表
所属栏目：[资源] 日期：2020-12-14 热度：171
参考?https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候，不要获取数据。 div class="cnblogs_code" 列表无限加载 {{ item }} Loading...... span style="color: #0000ff;" span style="color: #800000;"script span[详细]
-
用CSS实现一个抽奖转盘
所属栏目：[资源] 日期：2020-12-14 热度：120
效果 基本是用CSS实现的，没有用图片，加一丢丢JS。 完全没有考虑兼容性。 首先画一个转盘， 幸运大转盘 开始抽奖 效果如下，配色什么的不要在意，可能比较丑。。。 然后写抽奖指针的小箭头，用CSS画三角形是一个比较常见的问题，通过设置width和height为0，[详细]
-
原生JS实现弹幕效果
所属栏目：[资源] 日期：2020-12-14 热度：133
纯属无聊写的，可能有很多问题，欢迎批评指教。 效果图：图一是预设的一些弹幕，图二是自己发射的弹幕，效果是一样的。 首先是弹幕的位置，是要从最右滑到最左，为了防止随机高度弹幕会覆盖的问题，设置了通道。 每一个通道是从左到右的一条，高度固定，这样[详细]
-
React 实现一个时钟
所属栏目：[资源] 日期：2020-12-14 热度：165
最终效果 其实主要难点在于最左边的小时钟 指针的实现方式很简单，就是通过绝对定位将指针移到中间，然后以下边中间的位置为圆心旋转即可。代码如下： 效果 秒针转起来的效果也很简单，通过定时器setInterval每隔一秒更新秒针的角度。 setInterval(() => = D[详细]
-
Ajax,JSONP以及跨域问题
所属栏目：[资源] 日期：2020-12-14 热度：146
没用过裸的Ajax 也没听过jsonp，也不了解跨域问题，emmm… 参考： http://www.runoob.com/ajax/ajax-tutorial.html https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6[详细]
-
使用FormData格式在前后端传递数据
所属栏目：[资源] 日期：2020-12-14 热度：179
为什么一定要使用formdata格式……很大原因是因为当时我犯蠢…… 前端肯定是JS了，具体不写了，使用Postman测试，后端语言是Java，框架Spring Boot，使用IntelliJ IDEA 一、基本类型 例: 可以看到form-data只能传递键值对形式。 简单类型直接传递就可以了。[详细]
-
CSS box-sizing属性
所属栏目：[资源] 日期：2020-12-14 热度：92
全文摘抄自 专门抄一遍是因为，我想当然的以为标准盒子模型设置的宽高是包括padding的，但是实践中好像并不是这样的。 box-sizing? 属性用于更改用于计算元素宽度和高度的默认的?CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为[详细]
-
【转】CSS中的浮动和清除浮动
所属栏目：[资源] 日期：2020-12-14 热度：188
以下转自《》 浮动到底是什么？ 浮动核心就一句话： 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素 。请默念3次！ 浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已，如下所示： 但是早期的前端开发者发现：浮[详细]
-
CSS position 属性
所属栏目：[资源] 日期：2020-12-14 热度：113
1. static 默认值。没有定位，元素出现在正常的流中（忽略 top,bottom,left,right 或者 z-index 声明）。 position 金黄色方块会在左上角显示，没有偏移。 2. fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left","top","right" 以[详细]
-
在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏
所属栏目：[资源] 日期：2020-12-14 热度：61
项目需要在线展示和编辑Json文件，所以需要找一个代码编辑器，因为我们的项目直接使用的??这个模板 json编辑器也是直接从??项目扒下来的…… //好吧 这个项目看起来很炫，其实有很多坑，我们组没人用过vue，又需要快速完成任务，就随便找了一个= = JsonEdito[详细]
-
引入CSS的三种方式
所属栏目：[资源] 日期：2020-12-14 热度：122
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。 1.内联式 内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码： css代码写在元素的开始标签里。 css样式代码要写在style=""双引号中，如果有多条css样式代[详细]
-
手动实现一个虚拟DOM算法
所属栏目：[资源] 日期：2020-12-14 热度：55
发现一个好文：《》 文章写得非常详细，仔细看了一遍代码，加了一些注释。其实还有有一些地方看的不是很懂（毕竟我菜qaq 先码 有时间研究下diff算法 util.js _ = span style="color: #008000;"/ span style="color: #008000;" 获取一个对象的类型 匹配 '[obj[详细]
-
同时使用 Ant Design of React 中 Mention 和 Form
所属栏目：[资源] 日期：2020-12-14 热度：64
使用场景，在一个列表中，点击每一行会弹出一个表单，通过修改表单数据并提交来修改这一行的数据，其中某个数据的填写需要通过Mention实现动态提示及自动补全的功能。 具体效果为： 遇到的问题： 1、希望所需要的提示和自动补全的内容不同，实际场景类似于id[详细]
-
CSS实现table固定宽度，超过单元格部分内容省略
所属栏目：[资源] 日期：2020-12-14 热度：92
table-layout:fixed 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 超过指定长度的文本以省略号的形式显示。 test 12345678901[详细]
-
用Margin还是用Padding？（转载）
所属栏目：[资源] 日期：2020-12-14 热度：196
转载出自??本文地址:? 用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。 CSS边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School边界(mar[详细]
-
浅谈pc和移动端的响应式
所属栏目：[资源] 日期：2020-12-14 热度：127
身为一个前端攻城狮，是不是经常遇到各种各样的响应式问题？下面我们来说一下： 响应式 跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 如下图所示，对于同一个页面（图中的Html），如果用响应式布局来[详细]
-
Web布局中的几种宽高自适应
所属栏目：[资源] 日期：2020-12-14 热度：92
前言 打开浏览器，输入一个网址，显示一个页面，页面最基本的布局和框架用户一目了然。但是用户所用的浏览器、显示器、分辨率大多都是不一样的，如何确保不同用户持有不同设备所看到同一个网址的页面显示内容相同呢？当然像亚马逊首页那一种布局会更个性化一[详细]
