saber酱的抱枕

Here We Are Again (《喜剧之王》插曲)

@saber1分钟前

02/20
16:45
学习

SuperSlide的一些坑

刚才用SuperSlide做一个banner图切换的效果。SuperSlide的demo里的图片都是固定宽度(单位px)的,然而我的banner图是按百分比的(100%)。原图宽1920px,用SuperSlide的banner图效果的话,图片在小于1920px的屏幕里就会被压扁。

原因在于SuperSlide是用img标签加载的图片,那我们把图片改成背景图并居中就行了。

SuperSlide中banner图的代码:

<li><a href="" target="_blank"><img src="bimages/banner1.jpg"></a></li>

修改后的代码:

<li><a href="" target="_blank"><img style="background: url(images/banner1.jpg) center top no-repeat;"></a></li>

SuperSlide的一些坑

@saber3天前

02/17
08:00
学习

移动设备触摸手势库——Hammer.JS

一直以来,JavaScript对于鼠标事件和触摸事件提供的支持都比较初级,此问题在pc端不是很明显,但是移动端的触摸手势就比较多样化了,为此我们有必要使用js库来帮助我们处理触摸事件。

Hammer.JS是一款轻量级的移动设备触摸手势库,不依赖其他js库,兼容性好(支持WP),支持常见的点击、拖动、缩放、旋转等触摸事件,也可支持多点触控。

Hammer.JS支持的六大事件:

移动设备触摸手势库——hammer.js

Hammer.JS支持在pc端浏览器上用鼠标模拟触摸事件,这样我们开发时可以在pc上进行测试,极大提高了开发效率(看它官网的描述,似乎是可以在pc上模拟出全部的6种动作。不过缩放和旋转我试不出来,按下shift模拟双指操作也没反应①)。

简单的使用示例:

<div id="test"></div>
<script type="text/javascript">
    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
    var hammertime = new Hammer(document.getElementById("test"));
    //为该dom元素指定触屏移动事件
     hammertime.on("pan", function (ev) {
         //控制台输出
         console.log(ev);
     });
</script>

参考资料


① 有资料说,pinch 和rotate 默认情况下是禁用的,因为他们会使元件闭锁(这里貌似是机翻),如有需要可以通过下面的方法调用:

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

在现在的Hammer.JS中不知还是否需要如此处理。有空了我试试吧。

移动设备触摸手势库——Hammer.JS

@saber2周前

02/9
16:19
学习

封装document.querySelector和document.querySelectorAll方法

JavaScript原生的document.querySelector和document.querySelectorAll方法很好用,不过依旧摆脱不了原生方法名太长的麻烦。所以我们可以封装下,如:

function $(selector) {
  return document.querySelector(selector)
}

function $$(selector) {
  return Array.prototype.slice.call(document.querySelectorAll(selector))
}

这里用了$、$$作为方法名,分别对document.querySelector方法和document.querySelectorAll方法进行封装。

$方法返回单个元素(第一个符合的元素),$$以数组形式返回所有符合的元素(即使符合的元素只有一个)。

这样我们就可以方便的使用封装的方法来选择DOM元素了:

$("#div .class img")
$$("#div .class img")

不过如果$、$$的定义冲突了可能会出问题,所以如果页面上引用jQuery了的话,可以换个方法名。

ps:至于为什么方法名要用$和$$呢,并不是模仿jQuery,而是模仿chrome(至于chrome是不是模仿jQuery的方法名那我就不清楚了)。

chrome浏览器控制台里内置了封装好的$、$$方法,可以直接使用。(当然,如果$、$$的定义被页面上的代码覆盖了就不行了)

如图:

封装document.querySelector和document.querySelectorAll方法

封装document.querySelector和document.querySelectorAll方法

封装document.querySelector和document.querySelectorAll方法

@saber1月前

01/9
08:00
学习

使用js的insertAdjacentHTML方法插入元素

以往我们插入、移动DOM元素经常是使用appendChild和insertBefore方法。

appendChild:在父级元素内追加新元素。
insertBefore:在父级元素内的某个元素之前插入新元素。

但是这两个方法的参数只能接收元素对象,不能使用字符形式的html代码,而且它们插入元素的位置也不够灵活。我们可以使用insertAdjacentHTML方法来更方便的插入元素。

insertAdjacentHTML可以将字符串形式的html代码(需要能解析为DOM元素)解析为一个节点,并将其追加到指定元素的指定位置。

insertAdjacentHTML方法的语法如下:

element.insertAdjacentHTML(position, text);

position参数有以下四个值(都是字符串形式):

beforebegin:在元素的开始位置之前插入。
beforeend:在元素的结束位置之前插入。
afterbegin:在元素的开始位置之后插入。
afterend:在元素的结束位置之后插入。

text参数则是字符串形式的html代码。

根据position参数,我们可以将新元素插入到到指定元素的四个位置:

使用js的insertAdjacentHTML方法插入元素

示例:

<div id="a">
	<div></div>
</div>
<script type="text/javascript" defer>
	var a=document.querySelector("#a");
	a.insertAdjacentHTML("afterbegin","<a href='' >xxx</a");
</script>

结果如下:

<div id="a">
	<a href="">xxx</a>
	<div></div>
</div>

insertAdjacentHTML方法的兼容性表现良好,主流浏览器均已支持。我们也可以如下语句来检查浏览器是否支持方法:

document.documentElement.insertAdjacentHTML

此外,由于insertAdjacentHTML是根据位置插入元素的,因此它不能把新元素插入到img、input等单标签元素里(想这么做的人才是有毛病吧)。

相关文档:《https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML》


ps:与insertAdjacentHTML系列“同一系列”的还有insertAdjacentElement方法和insertAdjacentText方法。

insertAdjacentElement方法除了第二个参数是DOM节点(不能是字符串形式)外和insertAdjacentHTML方法都一样。

insertAdjacentText方法则只接收字符串格式的参数,并输出为字符串。其他地方也和insertAdjacentHTML方法一样。

使用js的insertAdjacentHTML方法插入元素

@saber1月前

01/8
12:45
学习

bilibili上使用的一个下雪效果

今天fgo开了圣诞活动,bilibili上的活动页面上下着雪,于是我把代码扒了下来。

这个下雪的js依赖jquery,实际使用中感觉效果一般←_←

<body style="background: #000;">
    <canvas class="snow-canvas" speed="1" interaction="true" size="8" count="40" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false"></canvas>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
    <script src="http://static.biligame.net/fgo/event_santa/pc/js/snow.js?v=d659f803.js"></script>
    <script>
    	$(".snow-canvas").snow();
    </script>
    <style>
    	.snow-canvas { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
    </style>
</body>

demo如下:

效果不是很好……不过如果像活动页面那样,有背景图片什么的,瑕疵应该不会很明显。

bilibili上使用的一个下雪效果

@saber2月前

01/3
08:00
学习

JavaScript实现全国三级城市联动select选择

JavaScript实现全国三级城市联动select选择

刚才在懒人之家找了一个JavaScript做的全国省市县三级联动的下拉选择插件,记录一下。

下载压缩包

这个js文件的日期是2014年,使用方法如下:

<select id="s_province" name="s_province"></select>  
<select id="s_city" name="s_city" ></select>  
<select id="s_county" name="s_county"></select>
<script src="form/area.js" type="text/javascript"></script>
<script type="text/javascript">_init_area();</script>

JavaScript实现全国三级城市联动select选择

@saber2月前

12/30
08:00
学习

使用FileReader读取并将文件存储在localStorage中

本文要做的事情是,用户通过file控件选择一个文件,之后我们使用FileReader将其转换为base64编码,并储存在LocalStorage里。

如下代码,在用户选择一张图片时,程序会将图片以base64编码保存到LocalStorage里,然后把这张图作为网页的背景图片。

<input type="file" name="img">
<br>
<input type="button" name="clearMyBG" value="清除我的设置">
<script>
// 尝试读取localStorage中存储的背景图片,如果有就设置
var myBGStorage = localStorage.getItem("myBG");
if (myBGStorage) {
 document.body.style.backgroundImage="url("+myBGStorage+")";
}

// 将选择的文件储存在localStorage里
document.querySelector("input[name=img]").addEventListener("change",function(){
	if (!/image\/\w/.test(this.files[0].type)) {
		alert("请确保文件为图像类型");
		return false;
	}
	setMyBG(this.files[0]);
})

//清除存储的背景图片
document.querySelector("input[name=clearMyBG]").addEventListener("click",function(){
	localStorage.removeItem("myBG");
	alert("设置已清除");
	location.reload();
})

//转换、存储和设置背景图片
function setMyBG (imgfile){
	var fileReader = new FileReader();
	fileReader.readAsDataURL(imgfile);
	fileReader.onload=function(){
		var result = this.result;
		document.body.style.backgroundImage="url("+result+")";
		try {
			localStorage.setItem("myBG", result);
		}catch (e) {
			console.log("Storage failed: " + e);
		}
	}
}
</script>

如下图,是localStorage中存储的键值对。注意localStorage的值都会被转换成string类型的。

使用FileReader读取并将文件存储在localStorage中

相关资料:
FileReader localStorage

有一个检测localStorage容量上限的工具:
Test of localStorage

它会在你的localStorage里存储数据,直到塞满为止。chrome约为5M。据说opera和firefox可以自己调整限制,厉害了。
Read More →

使用FileReader读取并将文件存储在localStorage中

@saber2月前

12/29
08:00
学习

使用URL.createObjectURL创建url对象

今天发现了window.URL.createObjectURL这个东西,非常的好用啊。

语法如下:

objectURL = URL.createObjectURL(blob || file);

URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象。

我们可以使用URL.createObjectURL()方法给file对象或blob对象创建一个url来使用它。

在处理本地数据时,它是很有用的,比如说上传前预览。

下面代码展示了一个表单,我们想用它上传图片和声音文件。

<form id="form1">
	<input type="file" name="img">
	<input type="file" name="audio">
</form>
<img src="" id="preview" width="300">
<audio autoplay="autoplay" controls="controls" src=""></audio>
<script>
	document.querySelector("#form1 input[name=img]").addEventListener("change",function(){
		var img=this.files[0];
		var imgUrl=window.URL.createObjectURL(img);
		document.querySelector("#preview").src=imgUrl;
	})

	document.querySelector("#form1 input[name=audio]").addEventListener("change",function(){
		var audio=this.files[0];
		var audioUrl=window.URL.createObjectURL(audio);
		document.querySelector("audio").src=audioUrl;
	})
</script>

在页面上有一个空的img元素和audio元素,在用户选择了图片或音乐后,该图片或音乐会直接显示/播放。是不是很方便呢?

你可以在下面直接操作:(第一个按钮传图片,第二个按钮传音乐)





虽然blob对象是个很方便的东西,但需要注意的是,当页面被关闭时,这个页面上生成的blob对象会被浏览器自动释放(清空)(但刷新页面不会清空blob对象),给它创建的url也就失效了。


此外有个URL.revokeObjectURL方法,用于释放blob对象的url。语法如下:

window.URL.revokeObjectURL(objectURL);

更加详细的信息可以参考此处

使用URL.createObjectURL创建url对象

@saber2月前

12/20
17:26
学习

使用HTML5的formData做ajax提交表单

我之前写过一篇《JavaScript表单序列化》的文章,表单序列化可以方便我们使用ajax来提交表单数据,避免网页刷新。我在这篇文章的末尾也附上了示例代码。但是使用表单序列化也有不太方便的地方:
第一,需要额外的代码来做表单序列化;
第二,需要在请求头里规定表单数据的格式。我第一次使用的时候因为不知道加这个就出错了。而且这个格式还有好几种。
第三,有很多用原生js做的表单序列化代码不能通过ajax提交附件。jquery的表单序列化可以,但也有点麻烦。

现在,HTML5的formData将上面的问题全部解决了,进一步简化了使用ajax提交表单的步骤。也就是说,formData可以自动实现表单序列化,并自动在请求头里设置合理的表单数据格式。formData也可以使用ajax发送附件。

使用formData配合ajax提交表单代码如下(当表单触发onsubmit事件时执行):

var e = event || window.event; //firefox里的event是临时的,不是window下的全局变量
e.preventDefault ? e.preventDefault() : e.returnValue = false; //阻止浏览器默认事件
var formData = new FormData(document.querySelector("#formID"));	//生成formData
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
	if (xhr.readyState === 4) {
		if (xhr.status === 200) {
			console.log(xhr.responseText);
		} else {
			console.log("发生了异常,状态码为" + xhr.status + "," + xhr.statusText);
		}
	}
}
xhr.open("post", "/t/t.php", true);
xhr.send(formData);	//发送formData

比起用表单序列化要简单的多了~


上例中没有写发送附件该怎么做,其实很简单,要用到formData对象的append方法。formData对象的append方法可以通过添加键值对来追加内容。附件就是要用append方法添加进表单的formData里。

假如表单里有个file控件,我们要传递它,那么在上面代码里的new formData下面追加这个file控件的附件即可:

formData.append('file',document.querySelector("#formID input[type=file]").files[0]);

之后用ajax发送表单时会把附件也一并发送。


如果有必要,我们也可以创建一个空的formData对象,全部使用append方法添加内容。

var formData = new FormData();
formData.append("name", "value");
formData.append("a", 1);
formData.append("b", 2);

兼容性:IE浏览器从IE10开始支持formData对象,其他现代浏览器均已支持。

使用HTML5的formData做ajax提交表单