saber酱的抱枕

Vive la France

04/8
15:27
学习

使用a标签的download属性让浏览器下载文件

html5对a标签新增了download属性用于下载文件,简单的理解是a标签如果添加了download属性,那么点击它的时候就不会跳转,而是会触发浏览器下载文件。如:

 a chrome download firefox html html5 兼容性 浏览器

浏览器兼容性

 a chrome download firefox html html5 兼容性 浏览器

但firefox有点麻烦,它有同源限制,如果href里的url和当前页面的url不是同源就不能下载。

 a chrome download firefox html html5 兼容性 浏览器

其他几大浏览器都没这限制(Edge、Chrome、Opera)。

另外firefox在由download属性触发下载时,可能会提示处理方式:

 a chrome download firefox html html5 兼容性 浏览器

这好像是firefox下载文件时特有的提示,chrome没这个提示。

实际上firefox麻烦事还挺多,参见本文结尾的dwmo。


其他资料:

MDN文档

测试demo

使用a标签的download属性让浏览器下载文件

03/20
10:27
学习

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

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

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

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

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

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

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

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

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动画

12/13
13:42
学习

使用autocomplete属性控制表单元素的自动完成

现代浏览器基本都带有自动完成功能,当我们在表单里提交过数据之后,浏览器会记住输入的内容。以后我们再次输入时,浏览器就会在下面给出提示,或者在输入框内根据输入的内容自动补全。

使用autocomplete控制浏览器的自动补全

在chrome中,输入框需要位于form中并且有name值,浏览器才会记住它的输入内容,如:

<form action="">
	<input type="text" name="a">
</form>

html5给表单元素增加了一个autocomplete属性,当此属性为off时,表示浏览器不会对该元素启用自动完成。

autocomplete属性适用于form元素,以及它里面的input:text, search, url, telephone, email, password, datepickers, range 以及 color。

使用autocomplete属性控制表单元素的自动完成

11/17
08:00
学习

sublime text3使用LiveReload插件热更新页面

sublime text3使用LiveReload插件热更新页面

前端在编辑页面时经常需要切换到浏览器里刷新页面来查看显示效果,不断地这个重复过程是非常坑爹的。sublime text3可以使用LiveReload插件来热更新页面,不过配置步骤就有点坑爹了,找了好几个教程才找到一个正确的的。

LiveReload插件是分两个部分的,需要在编辑器上和浏览器上分别安装(本文只讨论chrome浏览器)。只要能在浏览器里显示并且能用sublime text3编辑的本机文件都可以使用LiveReload插件来实现热更新。

LiveReload插件还有一个地方很强大,例如html里引用了外部的css、js文件,那么当你修改了这些外部文件后,浏览器里的这个html页面也会自动更新。这对于调整样式、调试js代码也是很方便的。

不过LiveReload插件似乎只能更新本机文件和本机url的文件,如果编辑一个www域名里的文件,并在浏览器里的该页面上启用热更新,能否生效呢(试了下不行。chrome上LiveReload的global.js里设置了ip为127.0.0.1,没法改。不过就算能改,也很可能遇到其他问题)。
Read More →

sublime text3使用LiveReload插件热更新页面

07/5
12:22
学习

input输入时对值和颜色的处理

input输入时对值和颜色的处理

input输入时对值和颜色的处理

在表单里添加input的预设值是常见的做法。当用户点击输入框之后,预设值消失,同时文字颜色也要加深,变成正常的颜色。如果用户清空了输入的内容,则恢复默认值。

以前我做这个效果用的代码比较繁琐,现在有更简单的方法。下面的js代码直接写在input标签里就可以了。

onfocus="if(this.value==this.defaultValue){this.value='';this.style.color='#333'};" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#aaa'}"

这里面有个defaultValue,这个属性是浏览器自动保存的,我们可以直接拿来用。以前我都是把默认值用js保存到一个变量里的,那样就麻烦了。

input输入时对值和颜色的处理

06/28
17:22
学习

html5中input的一些新特性

刚才看《JavaScript高级程序设计》,读到input控件的部分,看到了html5中对input增加了一些新的功能,试验了一番,这些实在让人excited!下面发点测试图。

1.新的type类型。

input有些type我们是很熟悉的,例如text、password等。html5中增加了一些新的type类型,而且这些type类型基本都可以承担一部分表单验证的工作,很实用。这些新的type有:
"email"、"url"、"number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"、"time"。

举一些例子:

email类型,必须要有@符号:
html5中input的一些新特性

url类型,必须要有协议:
html5中input的一些新特性

number类型,只能输入数字:
html5中input的一些新特性

date类型,只能输入日期:
html5中input的一些新特性

range类型,会出现一个滑块以调节:
html5中input的一些新特性

需要注意的是,浏览器(如果支持的话)会对这些控件的值进行检查。有些类型是在输入的时候进行检查,有些则是在提交表单时进行检查。所以,如果input没写在form里,有些类型可能起不到限制作用。

2.新的属性。

如required属性,当表单提交时,这个控件的内容不能为空。
html5中input的一些新特性

对于数值类型的控件,还可以设置最小值、最大值、增量值等,如:

<input type="number" min="60" max="100" step="5">

3.新的方法。

主要是stepUp()和stepDown()方法。这两个方法分别使input控件的值增加或减少。不带参数默认为1,也可以带参数。如对range的调节:

html5中input的一些新特性

html5中input的一些新特性

06/10
14:10
学习

html中使容器内不固定宽度的内容居中

html中使容器内不固定宽度的内容居中

如图,下面有三个小图,这三个小图使用的是标签li,父元素是ul,如下:

html中使容器内不固定宽度的内容居中

现在的问题是底下小图的数量不固定,那么如何使它们始终居中呢?

对于行内内部元素的居中,可以在父元素上使用

text-align: center;

这里面一个关键的地方在于,子元素得是行内元素。li是块状元素,所以这个属性就没有生效。把li改成类似于行内元素就行了:

display: inline-block;

这样不管有多少个li,都可以居中了。这样设置也是代替浮动的一个好办法。

需要注意的是,display设置为inline-block的元素之间不要有空格或断行,否则在页面上显示时中间会有空隙。

html中使容器内不固定宽度的内容居中

12/29
08:00
学习

saber酱の音乐播放器

这个html5音乐播放器是我花了一天时间琢磨出来的,因为好歹做了个像样的界面,所以版本姑且就叫1.0了。

使用了cookie来记住播放的音乐、音量和循环模式。没有做后台功能,例如评分、喜欢等。

使用网易云音乐的歌单做歌曲列表。

另外,音乐的缓冲进度条可能加载到中途就停止了,这个浏览器的行为,和本播放器无关。chrome经常会这样,火狐则是一口气加载完。如果有需要的话,浏览器会继续加载。
Read More →

saber酱の音乐播放器

12/26
09:30
学习

在网页中播放背景音乐的简单示例

这是昨天圣诞的时候,本站播放背景音乐《ホーリーナイト》的代码:

<div id="MerryChristmasMusicCtrl" date-playCtrl="pause"></div>
<style>
	 #MerryChristmasMusicCtrl{width:25px;height:118px;text-align:center;font-size:14px;font-family:微软雅黑;position: fixed;z-index: 9999;background:#444;color:#fff;cursor: pointer;right:0;top:30%;border-radius: 4px;border:1px solid #000; display: none;}
</style>
<script>
	var MerryChristmasMusic=document.createElement("audio");
	MerryChristmasMusic.src="http://m2.music.126.net/RLgypZOeXF0W2HEUIA0Wpg==/5959353022986536.mp3";
	MerryChristmasMusic.loop="loop";
	MerryChristmasMusic.play();
	$("#MerryChristmasMusicCtrl").show();
	$("#MerryChristmasMusicCtrl").html("暂停播放音乐");
	$("#MerryChristmasMusicCtrl").click(function  () {
		if ($("#MerryChristmasMusicCtrl").attr("date-playCtrl")=="pause") {
			MerryChristmasMusic.pause();
			$("#MerryChristmasMusicCtrl").html("继续播放音乐");
			$("#MerryChristmasMusicCtrl").attr("date-playCtrl","play");
		}else{
			MerryChristmasMusic.play();
			$("#MerryChristmasMusicCtrl").html("暂停播放音乐");
			$("#MerryChristmasMusicCtrl").attr("date-playCtrl","pause");
		};
	});
</script>

请无视蛋疼的超长变量名……

这两天打算写个音乐播放器出来,看能不能完成吧。

在网页中播放背景音乐的简单示例