saber酱的抱枕

Fly me to the moon

03/24
08:00
学习

JavaScript处理加载失败的图片

最近我修改某个网站,删除了很多上传的图片,但是又懒得去文章里一篇篇去掉出错的图片(任务量太大),所以就想到了用JavaScript在网页上找出出错的图片,并将其隐藏。

一开始我自己尝试了写了一些代码试试,主要是使用img元素的onerror事件。虽然代码在demo中达到了预期效果,但是加在实际页面里却不生效。对此我有一些猜测,但尚不能确定准确原因,后来还是用谷歌搜了现成的代码。

document.addEventListener("error", function(e){
    var elem = e.target;
    if(elem.tagName.toLowerCase() === 'img'){
    	// 如果引发error事件的元素是img元素,就进行处理
        elem.style.display="none";		//隐藏该图片
    	// elem.src = "/img/hint.jpg";	//或者替换为其他图片
    }
}, true /*指定事件处理函数在捕获阶段执行*/);

将这份代码加在网页开头(所有img元素之前)即可。

参考:《以全局监听的方式处理img的error事件》

JavaScript处理加载失败的图片

03/20
10:27
学习

iphone上网页字体变大/显示得很大的解决办法

刚才同事告诉我有个网页的字体很大,果不其然,他是iphone手机。

正常的情况下文字大小一致(css里设置的字号是一样的)如下:

iphone上网页字体变大/显示得很大的解决办法 Safari字体变大

在pc端各大浏览器、chrome的手机模拟器、安卓所有主流浏览器上都是正常显示。

但如果iphone上出了问题,就是字号变大:

iphone上网页字体变大/显示得很大的解决办法 Safari字体变大
Read More →

iphone上网页字体变大/显示得很大的解决办法

03/17
13:52
学习

解决百度地图生成器的标注图片失效问题

今天我使用百度地图生成器制作在线地图之后,发现了标注图片失效的问题。

正常时:
解决百度地图生成器的标注图片失效问题

生成后:
解决百度地图生成器的标注图片失效问题

搜了下这个情况,好像是去年底出现的,官方论坛上有人反映但一直没有恢复。

后来我找到了原因。我们使用百度地图生成器添加标注的时候是正常的,因为当时显示的是确实存在的图片。后来生成的地图里,标注图标使用的图片是另一个图片,但是这个图片已经不存在了,所以就出现了这个问题。

我们可以将生成后的地图里的不存在的图片替换为地图生成器里的正常图片来解决问题。将下面的JavaScript代码加在百度地图代码的页面里即可:

var bzT=window.setInterval(function () {
    if (!!document.querySelector("#platform > div:nth-child(2) > div:nth-child(5) > span > div > img")) {
         document.querySelector("#platform > div:nth-child(2) > div:nth-child(5) > span > div > img").src="http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png";
         clearInterval(bzT);
    }
},500)

解决百度地图生成器的标注图片失效问题

03/11
08:00
学习 软件

GM_xmlhttpRequest获取响应头

JavaScript是可以获取Response Header(响应头)的信息的:

如果是使用XMLHttpRequest, 这个对象本身有一个getResponseHeader(DOMString header)的方法来获取。
如果是使用jQuery.ajax, 在success属性对应的回调函数中,第三个参数会被jQuery设置一个jqXHR的对象,这个对象是对XMLHttpRequest对象的一个封装,也是有getResponseHeader方法的。

不过我这里要说的是GM_xmlhttpRequest,也就是俗称的“油猴脚本”里的功能。在firefox里的油猴扩展是Greasemonkey,在chrome中则是Tampermonkey。它们都内置了GM_xmlhttpRequest方法,用于处理ajax事件。

GM_xmlhttpRequest有个很好用的地方是它不会受跨域限制(当油猴脚本跨域时,会先提示你是否允许跨域,允许即可)。

要使用GM_xmlhttpRequest,需要先在脚本头部引入GM_xmlhttpRequest:

// @grant        GM_xmlhttpRequest

然后用GM_xmlhttpRequest的head方法获取响应头:

GM_xmlhttpRequest({
	url: "url",
	method: "HEAD",
	onload: function(response) {
		console.log(response.responseHeaders);
	}
});

我获取了p站一个图片的响应头,输出类似下面:

Date: Tue, 07 Mar 2017 05:31:54 GMT
X-Content-Type-Options: nosniff
Last-Modified: Tue, 08 Mar 2016 09:00:36 GMT
Server: nginx
Content-Type: image/jpeg
Cache-Control: max-age=31536000
Accept-Ranges: bytes
Content-Length: 528794
Expires: Fri, 02 Mar 2018 10:41:44 GMT

不过我现在还有个疑惑,就是油猴怎么从响应头中提取某个特性属性的值。它好像没有getResponseHeader方法。

参考文档
Read More →

GM_xmlhttpRequest获取响应头

03/10
16:32
学习

在织梦列表页调用文章正文

在织梦的列表页我们会使用dede:list标签调出文章。此标签可以自动分页,但是要在其中调用文章正文的一部分来做简介的话,却不像dede:arclist标签那么方便。

要在列表页调用文章正文,需要我们更改频道模型。

到后台 核心 -> 频道模型 -> 内容模型管理 -> 普通文章 -> 更改,在“列表附加字段”一栏填入“body保存,其他不用改。

点击查看图片

之后即可在dede:list里调用:

{dede:list pagesize='10'}
[field:body function='cn_substr(html2text(@me),600)'/]
{/dede:list}

在织梦列表页调用文章正文

03/8
00:00
学习

使用 ::before 和 ::after 伪元素来制作CSS3动画

我们经常对html元素使用hover选择器来做一些效果,比如当鼠标放在一个a标签上时改变文字颜色:

a{color: #F4A801}  //超链接的文字是橘黄色
a:hover{color: #FF0000}  //当鼠标经过时变成红色

如果加上css3的一些过渡属性就会出现变化的过程,成为简单的css3动画。

但是之前我没想到 ::before 和 ::after 这俩伪元素也可以用类似hover的选择器触发它们的动画。今天见识到了,感觉很棒。

如下效果,当鼠标放到这个按钮上时会在底部展开一条线:

查看更多

这个是怎么做的呢?

按钮是A标签,需要给它设置相对定位和超出隐藏:

a{position: relative;overflow: hidden;}

然后用::before伪元素在底部做一条线,只不过一开始没让这条线显示出来。::before伪元素需要设置绝对定位,这样可以让它位于按钮内部。

最后,当鼠标经过按钮时(hover)改变::before伪元素的css属性,如同文章开头的代码中改变a标签的属性一样,只是写法不同:

a:hover::before{
    /*css属性*/
}

最终实现的代码如下:

<a href="" id="more">查看更多</a>
<style>
	#more{display: inline-block;width: 150px;height: 48px;line-height: 48px;text-align: center;font-size: 20px;color: #fff;text-decoration: none !important;text-shadow:none !important;background: #8EE964;
		/*最后的por和ovh是必须的*/
		position: relative;overflow: hidden;
	}
	#more:before{
	  /*设置初始状态*/
	  content: "";
	  position: absolute;
	  left: 50%;
	  right: 50%;
	  bottom: 0;
	  background: #ff9d2e;
	  height:5px;
	  /*transition-property 设置过渡时要改变的属性 若不设置则为all*/
	  transition-property: left, right;
	  transition-duration: 0.3s;
	  transition-timing-function: ease-out;
	}
	#more:hover:before, #more:focus:before, #more:active:before {
		/*当鼠标经过、或按钮被焦点、被激活时对before的属性进行改变*/
	  	left: 0;
		right: 0;
	}
</style>

ps:
我这次没使用::after伪元素,大家可以按需使用。

伪元素前面写两个冒号是符合标准的写法,写一个冒号是为了兼容比较旧的浏览器,实际使用中写一个或两个均可。

如有需要,也在hover外部定义动画,然后在hover内引用。如:

#more:hover:before, #more:focus:before, #more:active:before {
  	animation:showUnderline .3s forwards;
}
@keyframes showUnderline {
	to{
		left: 0;
		right: 0;
	}
}

注意,@keyframes定义的动画和直接在样式里写的动画有区别:
以鼠标hover时执行动画为例,@keyframes定义的动画,当鼠标离开后没有逐渐恢复至原来状态的过程,而在元素样式内定义的则有。
以本文的按钮为例,@keyframes定义的动画,当鼠标离开按钮后那个底边不会逐渐向中间收缩,而是瞬间就消失了。

使用 ::before 和 ::after 伪元素来制作CSS3动画

03/7
08:00
学习

JavaScript中event.currentTarget的使用

我最近做了一个带下拉菜单的导航,学到了event.currentTarget的使用。

demo如下:

代码:

<nav>
	<ul>
		<li class="lelve1">
			<a href="">下拉菜单</a>
			<div class="subNav">
				<a href="">企业简介</a>
				<a href="">发展历程</a>
				<a href="">主营业务</a>
			</div>
		</li>
	</ul>
</nav>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	var isHover=false;
	$(".lelve1").mouseenter(
		function (event) {
			isHover=true;
			$(this).find(".subNav").fadeIn();
			//$(event.currentTarget).find(".subNav").fadeIn();
		}
	);
	$(".lelve1").mouseleave(
		function (event) {
			isHover=false;
			var a=$(this);
			setTimeout(function () {
				if (!isHover) {
					a.find('.subNav').fadeOut();
					//$(event.currentTarget).find(".subNav").fadeOut();
				}
			},50)
		}
	);
</script>

因为鼠标进入、鼠标离开事件都是绑定在一级导航上的,所以操作子导航的显示、隐藏时,都是通过在一级导航的元素里寻找子元素达到的:

$(this).find(".subNav").fadeIn();
a.find('.subNav').fadeOut();

这时都是使用this来指代一级导航,但除了使用this,还有另一个办法,就是使用event.currentTarget。

那event.currentTarget是什么呢?event.currentTarget指向事件所绑定的元素。

我们的鼠标进入、鼠标离开都是绑定在一级导航上,所以event.currentTarget所指向的元素始终是一级导航,使用起来很方便,而且可靠。

this在多层事件函数嵌套时经常会发生改变。但如果使用event.currentTarget的话,在这个作用域链里,event.currentTarget都不会变。所以我觉得event.currentTarget更方便可靠。


ps:event的属性里有一个大概比event.currentTarget更常用的,是event.target,指向触发该事件的元素。

event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。

以前我有个错误的认知,以为哪个元素绑定的事件,那么触发事件的元素也是这个元素。其实不是的,像本例,当鼠标从子导航上离开时,触发一级导航mouseleave事件的元素(event.target)是a标签,而不是一级导航li标签。

JavaScript中event.currentTarget的使用

03/3
08:00
学习

在JavaScript中使用document.all来判断是否是IE浏览器

今天看到一个代码,通过document.all函数判断浏览器是否是IE。代码大致是这样的:

 if (document.all){
 	// 是IE
 }else{
 	// 不是IE
 }

这里面有个有意思的地方。

document.all函数会返回页面上所有html元素的集合,现在主流浏览器均支持,比如在chrome中执行一下:

在JavaScript中使用document.all来判断是否是IE浏览器

在返回的集合中包含了页面上所有的html元素。

那么问题来了,既然chrome也支持这个函数,结果也不为空,这样判断时不应该是true吗?

试一下将其转换为布尔值,结果竟然是false!惊了!

在JavaScript中使用document.all来判断是否是IE浏览器

其实,在IE之外的浏览器里,运行 typeof document.all ,得到的都是结果都是undefined。而在IE里就是object。

这个现象是有历史原因的。document.all最早是由IE4实现的,当时很多程序猿就通过document.all来判断是否是IE浏览器。后来其他浏览器也实现了document.all,但是又不想被旧程序判断为IE浏览器,所以就把document.all的类型设置为undefined了。

这样,在IE之外的浏览器里判断document.all就会得到false了。

ps:IE11里判断document.all也是false了,所以此方法已经不可靠。

在JavaScript中使用document.all来判断是否是IE浏览器

03/2
08:00
学习

JavaScript小数取整的3种方法

JavaScript中要对小数取整的话(单纯舍弃小数部分,不涉及四舍五入),有原生函数parseInt()。不过除此之外还有两种“歪门邪道”的写法,这三种写法合起来比较一下:

parseInt(10/3)
// 返回 3

~~(10/3)
// 返回 3

10/3|0
// 返回 3

其实第二种的波浪号和第三种的竖线都是“位操作符”。

注意:
第二种写法是两个波浪线哦。一个波浪线是达不到取整效果的。
第三种写法的竖线和0是一个整体哦,不然也是达不到取整效果的。

JavaScript的3种小数取整方法

参考来源

JavaScript小数取整的3种方法