木灵鱼儿
JavaScript
前端可视化图表库
百度的ECharts官网：ECharts这是我看到百度唯一一个良心的东西了，很强大，主题定制也有，插件也可以自己定制。蚂蚁金服的ant-v官网
分类：前端
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
谷歌 google验证码 reCAPTCHA V2 隐藏式 对接
相对于复选框式的，该插件还支持隐藏式的。基本型基本型是最简单的一个方式，它需要先将js文件引入，不能异步，并且要开启自动加载组件，基本就是把一个组件绑定在一个按钮元素上，而且这个隐藏式，还需要单独申请一个隐藏式的key，自行申请。<script src="https://www.recaptcha.net/recaptcha/api.js"></script> <script> function onSubmit(token) { console.log(token) } </script><but...
木灵鱼儿
JavaScript
谷歌 google验证码 reCAPTCHA V2 复选框形式 对接
申请key地址：googlev2版就是常见的验证方式，v3是通过判断评分的方式，这里先看看v2的用法。首先google官方文档： 文档提供的api链接国内是无法使用的，需要调整下：https://www.google.com/recaptcha/api.js将这段链接改为：https://www.recaptcha.net/recaptcha/api.js即可。引入js由于js我们可以异步引入，所以官方支持一个load回调，所以使用异步加载js文件的话，你的回调函数记得要写在加载js文件之前官方引入示例：<script src="https://www.recaptcha...
木灵鱼儿
CSS
fit-content()函数
css3的grid格子布局中，对于设置格子大小的处理，要么是固定的，要么是百分比这种相对的。如果电脑端这个header的高度为50px，而手机端由于大小限制，原来50px可能要变成30px，那么此时我们可以利用媒体查询去调整：grid-template-rows属性。grid-template-rows: 30px 1fr;调整完这个大小后，我们还要调整里面元素的大小，这样做可能有点麻烦。甚至于我们可能只是改变了里面元素的布局而已，横向的布局改为竖列的多行布局，那么这个高度可能是无法精确获取的，如果内容的高度为100px呢，而我们只设置了30pxgrid的默认效果会是一个overflow...
木灵鱼儿
HTML
仿写了一个angular落地页
最近看了angular的官网，感觉还阔以，以前一直想做一个这种页面，这次我logo材料也凑齐了，对侧边栏的一些问题也搞定了，b4也学了，jq也会了，完事具备只欠东风，说干就干预览图demodemo最重要的一点是明白了怎么搞定手机端浏览器底部工具条的问题，这玩意特别让人头疼。
木灵鱼儿
锋利的JQuery
jq pjax笔记
github地址： pjax中文说明文档（非官方）： pjax基本参数$(document).pjax(selector, [container], options)selector为click选择器container为需要更新内容的容器选择器options为设置selector的一些技巧：我们可以给a元素添加一个属性：data-pjax来表示这是一个需要使用pjax的链接，这样就可以避免全部的a元素使用pjax了<a href="xxxx" data-pjax>$(document).pjax("a[data-pjax]", [con...
木灵鱼儿
锋利的JQuery
jQ 复制剪切版权信息提示插件 jquery-Copyright-notice
最近发现好多站点都开始做这个功能，每次复制都给我弹一次窗口，每次粘贴末尾总是带一大段版权文字，虽然不喜欢，但是没办法。比较这年头分享的知识ctrl+c和ctrl+v就是自己的了，加上超多机器人抓取，原创分享真的很难呢！效果图默认效果开启弹窗提示使用教程[hide]引入插件后，调用copyrightNotice方法： $("选择器").copyrightNotice();默认效果只会在复制的内容后面添加一句版权信息的提示文字。注意：您复制的为原创内容，转载请注明出处！谢谢！当然也是可以支持自定义的，支持传入一个对象，这个对象有三个参数。keyvalue说明copyri...
木灵鱼儿
JavaScript
关闭或者刷新网页启用弹窗提示
之前可能学过但是忘记了，这个东西平时也用的少，但是却很有用处，就是一个事件。$(document).ready(function () { $(window).on("beforeunload", function (e) { return confirm("弹出提示信息") }) });必须要给window绑定一个beforeunload事件，这个事件会在刷新页面或者关闭页面时触发，而且他不会马上生效，要等页面加载后，等一会才会生效。必须要return出一个confirm确认弹出提示，其他的alert这些是无效，不使用return...
木灵鱼儿
CSS
通用《少数派》文章css样式
本来想多搞几个文章的通用样式的，每次写主题，对于文章的样式确实很头疼，目前用的是vue的文章样式，很适合代码和文字混排，但是对于图文混排感觉一般般吧。所以就做了一个新的样式，仿《少数派》的css样式。预览图[hide]使用方法首先我们需要对使用改css样式的文章元素用一个div包裹，并且这个div的id为pai-md；<div id="pai-md"> 这里放文章内容 </div>这样css的作用域就设置好了，然后我们只需要在head引入这个pai.css即可。特殊的md写法## **红色数字**标题二级标题的第一个加粗元素颜色是红色高亮还...
木灵鱼儿
SASS
sass 函数
函数部分比较少用，有时间我再来细看，这里扒了一下简书的文章。文章来自：链接1. 字符串函数unquote（$string）：删除字符串中的引号；quote（$string）：给字符串添加引号；To-upper-case（$string）：将字符串小写字母转换为大写字母To-lower-case（$string）：将字符串大写字母转换为小写字母（1） unquote（$string）unquote函数主要功能是删除字符串中的引号：不管是双引号还是单引号包裹的字符串，引号皆被去掉；只能删除字符串最前边和最后边的引号，没法去掉中间的引号；如果字符串没有带引号，则返回原字符串；若引号中，有半个不...
木灵鱼儿
SASS
@extend 继承
sass支持继承css属性，一般来说，我们的css继承是从父元素继承一部分可以继承的属性，比如color，font啊，这些，但是如果我们书写一个button按钮，样式会复杂很多，我们会修改它的颜色，边框，内边距等等一系列的属性，但是这些属性我们可能复用很多部分。但一般来说我们不可能对button这个元素名进行样式修改，而是单独建立一个class名来进行样式定制，但就是因为这样，后面如果还有多个button元素，我们可能会不断重复书写一些相同的代码。sass可以通过@extend 去继承某一个class的属性，并且本身也能够进行变动。.button-basic { border: ...
木灵鱼儿
SASS
@mixin 和 @include
@minxin为混入，实际上可以理解为一个通用的变量，这个变量会将自身里面的属性全部return出去，和function一样，你调用我，我就给你返回一个内容。定义一个混入@mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; }混入的名字为：important-text，并且这个名字使用了连接符号-，和class的命名一样，并且sass的连接符除了这个还可以使用下划线_，也就是可以写成：important_text调用混入body { ...
木灵鱼儿
SASS
@import
sass可以将文件分割成多个片段文件，并通过一个scss文件引入这些片段，从而生成一个完整的css文件。首先我们要知道css3有一个 @import的属性，它可以引入本地或者外部文件，但是会生成一个http的请求，这就会导致网页的css渲染会发生延迟。而sass也支持这个属性，但是它的作用远不止如此。@import假设我们现在有两个sass文件，一个是主要的style.scss，一个用于初始化的reset.scss文件，我们要在style中引入reset；@import "reset"; body { font-family: Helvetica, sans-s...
木灵鱼儿
SASS
嵌套
sass最大的也是最常用的功能就是嵌套了。#nav { ul { color:red; } }这种写法可以理解为：#nav ul { color:red; }当我们要对#nav下多个元素控制css样式的时候，嵌套就显得非常方便，因为父选择器我们只需要写一次。虽然说可以无限嵌套下去，但是如果你根据dom树的结构进行嵌套，你会发现维护起来非常麻烦，因为内容一多，你可能都不知道这个class的父级是谁，所以一般来说，sass的嵌套最好保持在四层以内。嵌套属性我们写css经常会有很多重复的前缀名，比如说font系列的前缀，background的前缀，前面都是相同的，只有后面部...
木灵鱼儿
SASS
变量
sass支持变量，开头使用$符号表示，并且可以存储多种数据类型。字符串数字颜色值布尔值列表null 值例子$myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor; } #container { width: $myWidth; }变量也是有作用域的。$myColor: red; h1 { $myColor: green...
木灵鱼儿
实例
木灵鱼儿
Bootstrap4
关于原生Bootstrap4 二级菜单点击整个菜单消失的bug
在写《MUFlow》主题的时候，我遇到一个很头疼的问题，就是点击分类会显示分类菜单，但是这个菜单还会有子级菜单，按照嵌套规则，我对这个子级的菜单元素，用一个div包裹，并且加上了class类名dropdown-menu，然后里面的内容就按照官方的标准书写，但是就出现了一个问题。当我点击子级菜单后，整个菜单都消失了。一脸蒙蔽，什么鬼，难道我做错了，什么情况，在不断的对照不同人写的例子后，我崩溃了，然后无意间看到开发者控制台的class变化后，我大概有点知道为什么了。当我点击子级菜单后，子级菜单对应的dropdown-menu元素是显示的，它的class有了show类名，但是一级菜单就没了，...
木灵鱼儿
锋利的JQuery
木灵鱼儿
CSS
远程字体 详解阿里巴巴矢量字体库css原理
关于自定义字体，我一开始只以为只能本地加载，也就是css里面定义的字体，都只能从本地加载到，但是后来我了解到字符图标，一开始也是照本宣科使用本地字体，这就导致了一个问题，如果服务器网速带宽不够，就会产生字符字体文件未加载完整时，有一个占位字符显示，时间一长就显得极度的难看。然后我使用了阿里矢量字体库里面的字体，是可以直接下载一个css文件，然后本地引用，就可以直接用了，我就奇了怪了，怎么做到的，当然，这个疑问到今天也就完全明白了。首先要明确一点，阿里巴巴的那个css文件虽然写的很多，但是个人测试的时候好像也不支持ie9以下，也不知道是代码问题还是什么，不过现在能兼容ie11就不错了。自定...
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
剪贴板事件 copy、cut、paste
很多项目里面会用到复制和粘贴两个功能，但是我平时也用不到，这里就详细学习一下是怎么运作的。剪贴板事件了解剪贴板有6个事件，其中现代浏览器火狐只支持三个，ie和谷歌则支持全部。事件名说明beforecopy复制事件触发之前触发copy复制beforecut剪切事件触发之前触发cut剪切beforepaste粘贴事件触发之前触发paste粘贴其中火狐浏览器只支持 copy，cut，paste三个事件。其中ie和谷歌浏览器的话是都支持的，并且在ie中使用右键菜单进行复制剪切粘贴的操作，事件会触发多次，而在现代浏览器中，你复制一次，只会触发一次copy事件和beforecopy事件这种，哪怕是右...
木灵鱼儿
JavaScript
数字跳动特效-countUp插件用法
逛高斯键盘官网的时候，应该是去年的时候，官网改版后有一个特效挺有意思的，就是数字跳动，之前一直没空研究，今天抽空去看了下，js有一个开源的插件：countUp.js 先看看高斯的效果图：效果就是这样，我们先去下载js文件CountUp.js下载完我们找到dist目录下的countUp.min.js文件，拿出来在你需要的项目中。再新建一个js文件，名称自定义，这里是用于调用countUp的，你可以命名为：start.counUp.js教程注意，使用该功能你需要一个服务器环境，本地直接打开是不行的!引用由于版本更新后，采用了es6的模块写法，引入js文件的时候需要注意不能使用传统的type属...
木灵鱼儿
CSS
css3 字体渐变动效
以前写过一篇关于字体渐变效果的文章，那时候初出茅庐，啥都不太懂，就只会个静态，这次逛animate.css网站的时候发现他的字体是动态渐变效果的，这就有点刺激了，于是研究了一下。效果图教程主要是利用了css3的滤镜效果，也就是hue-rotate()色调转盘，他会根据当前的颜色进行调整，大概可以理解为ps中的调整色相吧。 p { font-size: 60px; color: #f35626; background-image: linear-gradient(92deg, #f35626 0%, #feab3a 100%); -webkit-ba...
最近评论