木灵鱼儿发布的文章

木灵鱼儿 5年前 JavaScript 锋利的JQuery 实例

jq自动轮播v1.2

之前看过一个主题，忘记是谁的了，他的首页轮播特别好看，当时我还天真的以为他的轮播的背景色是自动获取的，为此还特意自己去看了下自动获取图片平均色，现在学了jq后尝试性仿写了一个，因为找不到原来主题的地址，所以大部分都是凭借自己的印象做的，有能力者可以自行移植到typecho主题上。先上图：响应式预览：功能特性：[x] 采用jquery 3.4.1[x] 图片预加载[x] 自动提取对应的内容[x] 增加自动轮播功能[x] 可以自行移植到主题上使用[x] 响应式功能完善，只是320分辨率及以上设备演示地址轮播图demo

9065 0 10

select下拉列表移动

木灵鱼儿 5年前锋利的JQuery 实例

select下拉列表移动

下拉列表平时遇到的少，这里做个笔记先，主要功能就是从左边的select1中将选中的option元素移动到右边的select2中去，其实也很简单，主要是涉及到如何筛选选中的，然后使用到新的一个属性方法prop()。html：<div class="centent"> <select name="" id="select" multiple style="width: 100px;height:160px;"> <option value="1"...

3411 0 0

select

键盘测试触发页面更新v1.1

木灵鱼儿 5年前 JavaScript

键盘测试触发页面更新v1.1

看了一些jq，一时技痒就做了一个，说实话，纸上得来终觉浅，得知此事要躬行，这句话一点都没错，看书的时候我觉得我啥都知道了，用起来，变通的感觉就差很多了，很多东西看上去简单，组合搭配起来还是要花些心思的，不多说，上图。2019-9-3 更新至v1.1[X] 修复三个交互逻辑错误[X] 对特殊按钮离开页面时增加重置操作[X] 优化重置按钮事件在线地址：https://key.mulingyuer.com/

5079 0 2

jq 机械键盘在线测试

品牌列表效果

木灵鱼儿 5年前锋利的JQuery

品牌列表效果

普通切换效果html代码： <div class="box"> <ul> <li><a href="#">佳能<i>(30440)</i></a></li> <li><a href="#">索尼<i>(30440)</i></a></li> <li><a href="...

2888 0 0

jq jquery javascript

原型继承Object.create()

木灵鱼儿 5年前 javascript语言精粹

原型继承Object.create()

使用Obejct.create()方法继承的原型和传统的new方法是一样的，但是又有些不同，因为create()支持第二个参数，第一个参数往往是父类的prototype，比如Obejct.create(Box.prototype);这是正常的对一个Box构造函数的原型继承。Obejct.create本身会创建一个新的对象并继承Box.prototype原型然后返回该新建的对象，但是还有一种情况是这样的：var Box = { name : '666'; } var o = Obejct.create(Box.prototype);如果这样写，就会报错，Box实际...

2841 0 0

Lazy_F Typecho 响应式博客主题 V2.4

木灵鱼儿 5年前 Typecho 主题

Lazy_F Typecho 响应式博客主题 V2.4

主题名由来大海中有一种鱼，名叫：䲟鱼；这种鱼靠吸附在大鱼身上周游世界，这种鱼被称为懒惰鱼，于是英文翻译就是Lazy fish；于是偷个懒就成了Lazy_F，233...主题预览主题介绍Lazy_F集合了一些资讯类和个人博客主题的东西，个人经常发表大篇大篇的文章，因为之前使用过的主题整体ui下来并不方便阅读，为此我自己也根据资讯类的博客样式对主题做了相应调整，为此还针对md的书写做了样式优化，大部分样式都是根据 Cmd Markdown 这款在线编辑器做的，具体的变动下面会讲解到。功能特性[x]HTML5+CSS3响应式设计，适应320以上分辨率的设备[x]Cmd Markdown样式风格...

3.9w 0 32

typecho Lazy_F 博客主题

微格式

木灵鱼儿 5年前高级web标准解决方案

微格式

hCard微格式一般用于提高seo识别，方便内容获取，比如，你给一个span元素添加一个电话号码，但是你要是想要软件可以识别，或者seo能够更直接抓取到内容，就使用微格式。<div class="vcard"> <span class="tel">0621-032145</span> </div>使用一个class等于vcard，表明这是一段微格式代码，通过不同class类名来声明其意义，微格式其实有很多的类名，这里枚举一下常用的。类名含义adr工作地址agent代理本人可以联系的人bday出...

3222 0 0

微格式

编程实践

木灵鱼儿 5年前 javascript高性能

编程实践

避免双重求值其实就是字符类型的js代码被运行时所产生的第二次运行求值我们都知道eval()方法是可以将字符类型的js代码运行的，但是除了它还有其他三种方法也支持。new Function()setTimeout()setInterval()这三个方法也都支持传入一个字符串类型的js代码，然后当这个函数运行后会识别这个字符并运行传入的js。这样就会产生两次求值，其中eval和Function这两种方法用的很少，甚至不使用了，而定时器确是比较常用的手段，所以为了规避这个问题，定时器里面第一个参数不要传字符，而是用函数封装。避免重复的工作在事件函数上，我们要做两个判断，要判断这个浏览器是支持d...

3435 0 0

事件

Ajax

木灵鱼儿 5年前 javascript高性能

Ajax

异步监听readyState == 3当readyState的值等于3时，此时服务器正在与浏览器传输数据，这个时候其实是可以进行获取到responseText值得，但是这个值并不完整，只有当readyState == 4时，值才是完整的。但是如果我们需要获取的内容是极其长的字符，那么就可以通过监听这个状态，然后轮询的方式，可以在内容没有全部下载来之前就可以提前更新内容了，这样就可以避免在下载的过程中产生的等待时间。var req = new XMLHttpRequest(); var getLastInterval =null, lastLength = 0; req.open(...

3752 0 1

AJAX

VM虚拟机centos7 搭建samba共享磁盘

木灵鱼儿 5年前教程

VM虚拟机centos7 搭建samba共享磁盘

写这篇文章前还是要感谢：https://blog.csdn.net/m_nanle_xiaobudiu/article/details/80631437 \该文章的教程，我百度了超久，才找到一篇干货，然后根据自身的经历些写的这篇教程。首先安装sambayum install -y samba*提示y/n这种统统输入y并回车安装完毕最后会提示：Complete!如果不是请自行根据提示调整。配置smb.conf安装完我们要配置samba的config文件，输入命令：vim /etc/samba/smb.conf编辑配置文件，如果提示vim不存在的话，估计就是没有安装这个工具，输入命令yum ...

3256 0 0

虚拟机磁盘共享 centos搭建samba

快速响应的用户界面

木灵鱼儿 5年前 ·

快速响应的用户界面

ui线程每个浏览器用于执行js代码和更新ui的进程就只有一个，这个被称为‘ui线程’，它基于一个简单的队列系统，也就是根据代码的先后循序将代码插入队列并执行。一般来说，当用户点击一个按钮botton的时候，就会触发ui线程，他会创建两个任务并添加到队列中，第一个任务是更新ui按钮，它需要改变外观来表示它被点击了，然后再触发onclick事件，如果你对这个事件进行了调用其他函数，就会执行所调用的函数。事实上，大多数浏览器会在js代码运行时停止把新的任务加入ui队列中去，也就是说当用户点击一个事件，这个事件所调用的函数运行时间过长，那么在运行的这段时间中用户再点击其他的事件是没有交互的，产生...

5374 0 3

ui线程定时器 workers

字符和正则表达式

木灵鱼儿 5年前 javascript高性能

字符和正则表达式

字符串连接标准的方式都是A+B通过+进行连接，如果是下面这种写法：str += 'one' + 'two';这段代码会经历四个步骤：先在内存中创建一个新的临时字符串（内容为空）one和two先进行连接并赋值给临时字符串临时字符串与str进行连接返回的值赋值给str如果我们这样写可以避免创建临时字符串str += 'one'; str += 'two';因为只有一个字符串需要添加，然后str本身就是字符串，所以只对str进行了操作，没有再去创建新的临时字符。但是这样写太过麻烦，于是可以这样写：str = ...

2836 1 0

字符正则表达式

CommentToMail 邮件回复提醒美化版

木灵鱼儿 5年前 Typecho 主题

CommentToMail 邮件回复提醒美化版

自从注册了猎聘网账号后天天发垃圾邮件，你特么又不能不看，重点是他那个皮肤还挺好看的，简洁，然后我发现自己的博客邮件回复提醒插件皮肤不好看，于是就按照猎聘的那个样式自己做了一个。预览图：有需要的可以下载使用：下载地址注意：Typecho 1.2 版本已经不支持了，有需要最新版可查看最新的文章：《Typecho CommentNotifier邮件回复提醒美化模板》更新：2021-06-30 修复蓝奏云地址失效的问题（官方改了网址）[hide]https://wwa.lanzoui.com/b0rez2ve 密码:9zd9[/hide]

11.7w 0 173

CommentToMail 邮件回复提醒美化版

解决css引用本地字体不同域名打开提示跨域

木灵鱼儿 5年前教程

解决css引用本地字体不同域名打开提示跨域

其实以前也有出现过类似的问题，但是第二次来查看的时候又没有报错，其实问题主要是在于域名访问上的问题，当我在一级域名mulingyuer.com访问时就会出现跨域，原因是因为php转换后的css文件链接是二级域名下的www.mulingyuer.com，为此，即便是css引用的是本地的字体文件还是会提示跨域的问题，为此我查了下，发现后端就有很方便的解决办法。首先我是根据我自己的运行环境写的这篇博文，使用宝塔面板，使用阿帕奇，这里就简单说下解决方法：首先我们要确定阿帕奇已经开启了mod_headers模块，具体方法直接在宝塔里找到配置--然后ctrl+f 搜索：LoadModule head...

6804 0 6

字体跨域

算法和流程控制

木灵鱼儿 5年前 javascript高性能

算法和流程控制

循环for循环是常见的编程模式之一，也是提升性能必须要关注的要点之一。js的循环有四种：for循环while循环do--while循环for--in循环其中在浏览器中，while的循环会快于for循环，而for--in循环是最慢的，因为他会先从对象实例属性开始到从原型链继承而来的属性一一枚举。如何提高循环的性能？首先我们要知道，除了for--in，其他的循环性能都差不多，深究那种循环最快其实没有什么意义，循环的方式要看你环境的需求，那么抛开最快来讲，我们怎么才能提高循环的性能？无非就两点：每次循环处理的事物循环的次数通过减少两者中的一个，或者全部的时间开销，就可以提升整体的性能。减少循环...

2988 0 0

算法优化

关于Typecho 邮件回复提醒的修复方案

木灵鱼儿 5年前教程

关于Typecho 邮件回复提醒的修复方案

邮件提醒这个东西真的是让人头大，搬家后发现出了无法使用的问题，明明其他的东西都没有问题的说，尝试禁用并启用毫无效果，设置那些也是没有问题的，当然，这个方法只适用于我之前提供的邮件回复插件。首先我们要进入sql管理，如果你的博客表里有一个typecho_mail表单请删除，这个应该是新版邮件提醒插件创建的，使用我之前那个插件不会有这个东西，所以以防万一请删除。删除后找到typecho_options表，在这个表里选择显示100行，这个看你表单里的项有多少，选择能够一次性全部显示完的，方便查找，这个时候我们浏览器ctrl + f 进行搜索，搜索关键字 mail，然后就可以找到一栏名为Comm...

5861 0 6

邮件回复提醒的修复方案

DOM编程

木灵鱼儿 5年前 javascript高性能

DOM编程

dom是浏览器中非常重要的一部分，他其实相对于js是一个独立的语言，我们通过js去操作其实只是利用api沟通，并不是直接操作的，也就是说dom和js是两个部分，他们之间通过api进行沟通，那么这个沟通的过程自然就会产生性能的损耗，那么你沟通的越多，网页的响应速度就越慢。dom的访问与修改function innerHtmlLoop() { for(var i =0;i<15000;i++) { document.getElementById('box').innerHtml += 'a'; } }这里我们对元素box添加内容，...

2883 0 0

DOM编程

数据存取

木灵鱼儿 5年前 javascript高性能

数据存取

JavaScript中，不同存储位置，他的读取速度是不一样的，就好像一个距离你只有一米的饮料和一个距离你十米的饮料，当然是一米的你拿起来喝的速度最快。js中有四种基本的数据存取位置：1.字面量字面量只代表自身，不存储在特定的位置，js的字面量有：字符串、数字、布尔值、对象、数组、函数、正则表达式、及特殊的null和undefined值。你可以这么理解，if(true)语句中的true布尔值就是字面量，他就是一个值，不需要命名什么的就可以用的那种。2.本地变量使用var定义的数据存储单元，被作用域影响读取快慢。3.数组元素存储在JavaScript数组中的，以数字作为索引。4.对象成员存储...

3032 0 0

数据存取

加载和执行

木灵鱼儿 5年前 javascript高性能

加载和执行

js的加载会阻塞页面的加载和渲染，那么常用的方式就是将script元素放置在body元素里面最底下的位置，但是这样还是会有阻塞，但是不会阻塞下载，阻塞的是渲染，也就是说，js运行长时间的话，页面也会长时间显示空白，哪怕所有的资源都已经下载完毕了。延迟脚本为此便有了无阻塞的模式，那么最简单的就是给script添加defer和async属性了，但是这两个属性当初也只有ie支持，其他的浏览器并不支持，但是目前为止，如果都是新版本的浏览器，这两个属性已经全面支持了。defer表示当前的js文件不需要修改dom，所以他会在dom加载完运行，async则是异步加载，谁先加载谁先运行，但是如果js文件...

3445 0 0

js无阻塞加载

js深度克隆

木灵鱼儿 5年前 JavaScript

js深度克隆

深度克隆主要用于引用类型，因为大部分的引用类型如果某一个实例进行了修改，那么其他同一个引用的实例对象也会发生改变。经过我小段时间的研究，以我目前的了解的来说，方法是没办法完全克隆的，你最多拿到独立属性，原型是共享的，这个没办法克隆，所以有点无解的样子，感觉这个深度克隆也只是表面意义上的克隆。因为不是很懂啊，所以暂时先丢出写的方法吧，等待以后有机会更深入了解再详细说明，主要是我百度到的都是es6标准的一个方法，有些属性我并不了解，不知道他们的实际意义是什么。所以，很无奈啊！function say() { console.log('hi'); } functio...

2693 0 0

js深度克隆

js阻塞和css阻塞

木灵鱼儿 5年前 JavaScript

js阻塞和css阻塞

js阻塞js阻塞其实浏览器的一个很好的机制，浏览器必须在js文件或者代码运行完毕后才会继续其他的工作，比如一个js文件被script元素引用，该元素在head标签中。那么当浏览器加载到head时，会先加载并运行这个js文件，此时，这个script后面的内容都不会做任何处理，只有加载运行完浏览器才会接着加载后面的内容并解析渲染。为什么会这样？原因是因为浏览他并不知道你的js文件做什么，如果他对dom里面的内容做了操作，改变了dom树，那么如果dom树已经完成加载了，js改变后那不是又要重绘一次，那么用户打开网页，页面会先加载完然后闪烁或者发生其他的改变，这对于浏览器来说并不是一个好的方式，...

2791 0 0

js阻塞 css阻塞

JavaScript里面继承是怎样实现的？如何避免原型链上的对象被共享？

木灵鱼儿 5年前 JavaScript

JavaScript里面继承是怎样实现的？如何避免原型链上的对象被共享？

JavaScript里面继承是怎样实现的？最简单的就是通过原型链继承，然后衍生出几种方法：构造函数继承、组合继承、原型式继承、寄生继承、寄生组合式继承。function Box() { this.name = "鱼儿", this.age = 666 } Box.prototype.run = function(){ return this.name; } function Pox() { this.run = function() { alert(this.name + this.age); } } Pox.prototype = ne...

3505 0 0

原型构造函数 prototype

加载动画小心得

木灵鱼儿 5年前 JavaScript

加载动画小心得

网页加载动画的原理其实就是当页面加载时他显示的就是加载动画，这个动画浮动于最上层将下面的内容全部遮盖住，而当dom已经加载完毕，触发onload事件，此时再将动画层进行移除处理。那么这样写会导致一个问题，就是你打开任何页面，都会先触发动画层，然后再显示内容，这样就会影响体验，我们之所以加一个动画层，就是为了在用户第一次打开页面的时候，不会卡在空白啊，或者加载资源中而导致页面布局不完整，但是当第一次onload事件完成后，其实浏览器本地已经将大部分的资源进行了缓存，包括css、font文件、img文件，所以，我们只需要第一次加载的时候显示动画层即可。如何判断是第一次加载常用的方法有创建co...

2875 0 0

加载动画

百叶窗动效

木灵鱼儿 5年前 JavaScript

百叶窗动效

因为没啥太大的想法，然后也不是很成功，就先上个预览图吧，以后有机会再来预览图：

2702 0 0

百叶窗动效

高仿Skeleton Screen 骨架屏 V2

木灵鱼儿 5年前 JavaScript

高仿Skeleton Screen 骨架屏 V2

经过多次修正，差不多就是这样了，再加强就比如针对性的做适配，总体来说，要想简单点还是目前自己用的这个简单些。效果图：源码：蓝奏云密码:b077

2716 0 0

骨架屏

发布者：木灵鱼儿

jq自动轮播v1.2

select下拉列表移动

键盘测试触发页面更新v1.1

品牌列表效果

原型继承Object.create()

Lazy_F Typecho 响应式博客主题 V2.4

微格式

编程实践

Ajax

VM虚拟机centos7 搭建samba共享磁盘

快速响应的用户界面

字符和正则表达式

CommentToMail 邮件回复提醒美化版

解决css引用本地字体不同域名打开提示跨域

算法和流程控制

关于Typecho 邮件回复提醒的修复方案

DOM编程

数据存取

加载和执行

js深度克隆

js阻塞和css阻塞

JavaScript里面继承是怎样实现的？如何避免原型链上的对象被共享？

加载动画小心得

百叶窗动效

高仿Skeleton Screen 骨架屏 V2

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

发布者：木灵鱼儿

jq自动轮播v1.2

select下拉列表移动

键盘测试触发页面 更新v1.1

品牌列表效果

原型继承Object.create()

Lazy_F Typecho 响应式博客主题 V2.4

微格式

编程实践

Ajax

VM虚拟机centos7 搭建samba共享磁盘

快速响应的用户界面

字符和正则表达式

CommentToMail 邮件回复提醒美化版

解决css引用本地字体不同域名打开提示跨域

算法和流程控制

关于Typecho 邮件回复提醒的修复方案

DOM编程

数据存取

加载和执行

js深度克隆

js阻塞和css阻塞

JavaScript里面继承是怎样实现的？如何避免原型链上的对象被共享？

加载动画小心得

百叶窗动效

高仿Skeleton Screen 骨架屏 V2

最近评论

博客文章RSS订阅

博客评论RSS订阅

键盘测试触发页面更新v1.1