再一次折腾hexo博客,主要是升级脚手架和next主题。
升级的过程中发现 next的local_search不能用了,控制台也没有js的报错,于是我看到有一条对search.xml的请求。
直接打开xml页面在浏览器中显示了问题的原因
“Input is not proper UTF-8, indicate encoding !”
找到对应的行数之后,把对应的字符重新敲了一遍就好了。
再一次折腾hexo博客,主要是升级脚手架和next主题。
升级的过程中发现 next的local_search不能用了,控制台也没有js的报错,于是我看到有一条对search.xml的请求。
直接打开xml页面在浏览器中显示了问题的原因
“Input is not proper UTF-8, indicate encoding !”
找到对应的行数之后,把对应的字符重新敲了一遍就好了。
最近在做公司的官网,首页用到了一些循环播放的动画,类似于轮播图。之前一般是直接套用插件,不常手动自己做这种,但是为了避免引入第三方库导致网页过于臃肿,所以就凭着自己掌握的 setTimeout 和 setInterval 的一些简单的知识就开始了制作。
要求:五个 div 依次切换。间隔3s
最近在学习慕课网一门课程,里面需要实现一个上拉加载更多的功能,最常见的做法就是监听scroll事件,比较滚动距离和窗口高度。于是代码是这样的:1
2
3
4
5
6
7
8function callback(){
const top = wrapper.getBoundingClientRect().top
const windowHeight = window.screen.height
if(top && top < windowHeight){
loadMoreFn()
}
}
window.addEventListener('scroll',callback.bind(this),false)
此时有一个问题就是,每次滚动都会调用callback,如果callback处理的比较复杂(常见的是导航栏的隐藏和显示)就会对性能和展示造成影响。
解决办法就是声明一个定时器,每次出发事件是就清空老的定时器,然后赋值新的定时器,当滚动结束的时候,定时器中的函数就会执行,时间间隔设置比较小,就不会造成明显的延时。
代码如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15let timeoutId
function callback(){
const top = wrapper.getBoundingClientRect().top
const windowHeight = window.screen.height
if(top && top < windowHeight){
loadMoreFn()
}
}
window.addEventListener('scroll',function(){
if(timeoutId){
clearTimeout(timeoutId)
}
timeoutId = setTimeout(callback,50)
}.bind(this),false)
在使用远程服务器启动node项目时,发现无法访问其8080端口,经过查询资料,解决办法为:1
iptables -I INPUT -p tcp --dport 80 -j ACCEPT
由于权限问题可能要加sudo
rem.js1
2
3
4
5
6
7
8
9
10
11/* rem.js文件内容 */
(function() {
var html = document.documentElement;
function onWindowResize() {
html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
}
window.addEventListener('resize', onWindowResize);
onWindowResize();
})();
需要注意的是在html
文件的head
标签中需要加入一行:1
<meta name="viewport" content="initial-scale=1.0,width=device-width">
指定页面宽度为设备宽度。
JavaScript中的对象有一个特殊的[[Prototype]]内置属性,其实就是对于其他对象的引用。几乎所有的对象在创建时[[Prototype]]属性都会被赋予一个非空的值。
当你试图引用对象的属性时会触发[[Get]]操作,比如myObject.a
。对于默认的[[Get]]操作来说,第一步是检查对象本身是否有这个属性,如果有的话就使用它。但是如果a不在myObject中,就需要使用对象的[[Prototype]]链了。1
2
3
4
5
6
7
8var anotherObject = {
a:2
};
//创建一个关联到anotherObject的对象
var myObject = Object.create( anotherObject );
myObject.a; //2