前端
关注
分享
扫一扫
文章平均质量分 62
fukaiit
-大圣，此去欲何?-踏南天，碎凌霄。-若一去不回……-便一去不回
展开
-
vue项目npm run serve出现【- Network: unavailable】（从排查到放弃）
【代码】vue项目npm run serve出现【- Network: unavailable】（从排查到放弃）原创 2024-11-12 10:37:56 · 1333 阅读 · 4 评论 -
HTML5 Web Notifications（网页通知）
概述优点：缺点：references：MDN 使用 Web Notifications原创 2021-09-12 21:16:26 · 2209 阅读 · 0 评论 -
CSS背景遮罩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {原创 2021-07-27 10:06:03 · 1124 阅读 · 0 评论 -
margin塌陷
1. 什么是margin塌陷有的人会解释为垂直方向上两个兄弟元素的margin非加和，而是取较大值，这其实是【margin合并】；有的人会解释为子元素浮动造成父元素高度为0，这其实是【高度塌陷】；准确的说，本文不是讨论margin塌陷问题，因为我也不知道怎么定义【margin塌陷】，本文讨论的是：设置margin后不符合常规预期的一个场景。2. 问题场景<style type="text/css"> .parent{ width: 100px; height: 100px;原创 2021-07-23 00:15:35 · 592 阅读 · 0 评论 -
scss/sass
原创 2021-03-21 17:00:22 · 162 阅读 · 0 评论 -
[CSS3] :nth-child() / :nth-of-type() 相关选择器
文章目录一、:nth-child() / :nth-of-type()区别二、括号中怎么写 `{ an + b; n = 0, 1, 2, ...} `三、常见需求1. 第一个2. 前3个3. 前3个之后4. 最后一个5. 后3个6. 后3个之前一、:nth-child() / :nth-of-type()区别虽然感觉nth-child用的更多，但是其实nth-of-type()理解起来更单...原创 2019-10-26 12:29:08 · 524 阅读 · 0 评论 -
如何用js判断是否能连通某网页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { background: gre...原创 2019-10-20 21:48:53 · 2629 阅读 · 0 评论 -
Html+CSS实现滚动条不挤占内容区宽度
思路来源于该文章：https://www.cnblogs.com/yigeqi/p/5488554.html但该文章似乎有什么重要的要点没有交代，直接按照文中的css写并不能实现所要的效果。1. 目的：有一个滚动区，默认是不显示滚动条的，在鼠标移入时显示滚动条，在正常情况下，滚动条会挤占内容区宽度，使得内容区变窄，会晃动一下。要实现的效果是，鼠标移入显示滚动条，滚动条就像浮在上层一样。...原创 2019-09-01 17:50:46 · 36599 阅读 · 0 评论 -
input type="number" 保持小数点后面两位
其实下面的方法看起来也很low，但是查了很多资料，也没找到一个完美的方法。<input type="number" class="number"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script type="text/javascrip...原创 2019-09-07 15:50:16 · 5177 阅读 · 1 评论 -
前端插件收藏夹
有些插件用了就想不起来了，整理在收藏夹太多太乱，想写点简介也不方便；曾做了一个类似导航页的单页面，但是维护起来还是太麻烦；就整理在这篇博客里，会持续更新。前端插件drag0. 引入1. Muuri2. jquery.dad.js3. Multi Dragdrag0. 引入为了做一个可拖拽排序的列表，查找了相关drag插件，比较好用的记录如下。但其实最后也没有达到理想的效果，M...原创 2019-09-07 16:41:55 · 616 阅读 · 0 评论 -
CSS tricks
想要记录一些CSS使用的little tricks，每一个点可能太小，不足以构成一篇博客，在此汇总记录，持续更新。CSS tricks1. `text-align: justify`在单行上不起作用怎么办1. text-align: justify在单行上不起作用怎么办实现文本两端对齐：text-align: justify;多行文本：最后一行左对齐，其它行两端对齐；就像在wor...原创 2019-09-08 00:51:29 · 489 阅读 · 0 评论 -
CSS 函数
函数描述CSS 版本attr()返回选择元素的属性值。2calc()允许计算 CSS 的属性值，比如动态计算长度值。3linear-gradient()创建一个线性渐变的图像3radial-gradient()用径向渐变创建图像。3repeating-linear-gradient()用重复的线性渐变创建图像。3repeati...原创 2019-09-08 02:24:56 · 313 阅读 · 0 评论 -
js 数组&对象遍历
遍历对象for…in循环var site = { name: 'baidu', url: 'https://www.baidu.com', slogen: '百度一下，你就知道'};for (var key in site) { console.log(key + ': ' + site[key]);}遍历数组for…of循环va...原创 2019-09-13 18:40:49 · 340 阅读 · 0 评论 -
基于colResizable-1.6实现一个表头固定、列宽可调的table
colResizable官网：http://www.bacubacu.com/colresizable/能够实现各列完全对齐能够兼容有无滚动条两种情况只能在表头部分拖动改变列宽（不能在表体列边框上拖动，我完全可以接受）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...原创 2019-10-11 00:07:03 · 2392 阅读 · 0 评论 -
通过js和css禁止复制网页内容
方法1：在body上添加：<body οncοntextmenu="return false" οndragstart="return false" onselectstart ="return false" οnselect="document.selection.empty()" οncοpy="document.selection.empty()" onbefo...原创 2019-08-31 22:19:47 · 2058 阅读 · 0 评论 -
jQuery.extend()方法
1. 作用将一个或多个对象合并到目标对象；如果多个对象具有相同属性，则后者会覆盖前者的属性值。2. 语法$.extend( [deep, ][target, ]object1 [, objectN ] )deep：表示是否深度合并；不支持传false，要么没有，要么true；默认false。target：目标对象；默认JQuery对象本身。object1…N：被合并的对象。实...原创 2019-07-31 23:03:41 · 238 阅读 · 0 评论 -
《Flex 布局教程：实例篇》学习笔记（1）——骰子的布局
本文参照阮一峰博客Flex 布局教程：实例篇学习。主要使用Flex布局实现了骰子的布局，如下图所示：本文不做具体的语法解释，具体语法说明可参见Flex 布局教程：语法篇。本人基于学习过程，编写了极简Demo，用于需要时通过开发者工具查看复制，已上传至Github。预览地址：https://fukaiit.github.io/Flex/flex_layout_case.html整体效果图：...原创 2018-03-03 23:51:55 · 359 阅读 · 0 评论 -
《Flex 布局教程：实例篇》学习笔记（2）——常见布局
首先说明，本文参照阮一峰博客Flex 布局教程：实例篇学习。本文不做具体的语法解释，具体语法说明可参见Flex 布局教程：语法篇。本人基于学习过程，编写了极简Demo，用于需要时通过开发者工具查看复制，已上传至Github。本文主要实例有：（1）基本网格布局（2）百分比布局（3）圣杯布局（4）输入框的布局（5）悬挂式布局（6）固定的底栏（7）流式布局预览地址：圣杯布局：https://fukaii...原创 2018-03-04 17:07:24 · 287 阅读 · 0 评论 -
在父窗口中获取Iframe中的元素 & 在Iframe中获取父窗口中的元素
1. 在父窗口中获取Iframe中的元素(1) JQuery// 方式1$("#iframe的id").contents().find("#iframe中控件的id").事件();//方式2$("#iframe中控件的id",document.frames("iframe的name").document).事件();(2) JSwindow.frames["iframe中...原创 2018-03-05 23:00:07 · 11694 阅读 · 4 评论 -
jQuery-select2通过ajax请求获取远端数据
select2官网：https://select2.org/一、上手1. CDN&amp;amp;lt;link href=&amp;quot;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; /&a原创 2018-08-18 14:34:47 · 17339 阅读 · 0 评论 -
jQuery-select2 官方文档笔记（一）——基础应用
select2官网：https://select2.org/一、上手1. CDN2. 单选select3. 多选select4. 禁用状态5. 宽度（width）6. 关于选项（Options）7. Placeholders二、Data Sources1. select2数据源格式要求2. 在数据源中标明预选中(&amp;quot;selected&amp;quot;: tru原创 2018-08-18 17:04:50 · 79713 阅读 · 6 评论 -
jQuery-select2 官方文档笔记（二）——较高级应用
select2官网：https://select2.org/一、Search1. matcher2. 分组matcher3. 设置最短最长搜索词组长度(minimumInputLength &amp;amp; maximumInputLength)4. 最小搜索结果数设置（minimumResultsForSearch）4. 单选select隐藏搜索框（minimumRes...原创 2018-08-19 20:21:29 · 9235 阅读 · 1 评论 -
js实现replaceAll方法
js本来有replace方法，请看w3school的说明：replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。语法：stringObject.replace(regexp/substr,replacement)第一个参数为一个字符串或者一个正则表达式，第二个参数为一个字符串或者一个用于生成字符串的函数。注意重点：如果 regexp ...原创 2018-10-21 22:07:00 · 98568 阅读 · 9 评论 -
自适应网页设计
一、自适应网页设计基础1. 允许网页宽度自动调整首先，在网页头部加入viewport元标签&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;2. 不使用绝对宽度不能指定width: XXpx;，只能指定width: XX...原创 2018-11-18 23:48:18 · 2415 阅读 · 0 评论 -
jsonp其实很简单【ajax跨域请求】
原文地址：jsonp其实很简单【ajax跨域请求】1. 同源策略ajax之所以需要“跨域”，罪魁祸首就是浏览器的同源策略。即，一个页面的ajax只能获取这个页面相同源或者相同域的数据。如何叫“同源”或者“同域”呢？——协议、域名、端口号都必须相同。例如：http://google.com 和 https://google.com 不同，因为协议不同；http://localhost:80...转载 2018-12-04 23:58:03 · 191 阅读 · 0 评论 -
js判断某进程是否存在
原文地址: https://bbs.youkuaiyun.com/topics/350062273function FindProcess(strProcess) { //查询指定进程 var locator = new ActiveXObject("WbemScripting.SWbemLocator"); var service = locator.ConnectServer("."...转载 2019-04-01 00:17:38 · 3522 阅读 · 0 评论 -
ajax不跳转页面提交表单
1. 普通表单表单<form action="/handleForm1" method="post"> name: <input type="text" name="name" /><br /> <input type="submit" value="Submit" /> </form>ajax提交$('fo...原创 2019-04-08 23:36:50 · 1884 阅读 · 0 评论 -
《Flex 布局教程：语法篇》学习笔记
大神文章，一篇足矣：阮一峰：Flex 布局教程：语法篇。该文详细介绍了Flex布局的各属性及取值说明，并且附有JailBreak制作的Demo。本人基于学习过程，编写了极简Demo，用于需要时通过开发者工具查看复制，已上传至Github。预览地址：https://fukaiit.github.io/Flex/...原创 2018-03-02 23:13:55 · 410 阅读 · 0 评论