saber酱的抱枕

Fly me to the moon

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>

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

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

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

12/5
08:00
学习

用视频做为页面背景

<video id="homevideo" autoplay="" loop="">
    <source id="video_s" src="/f/nico.flv" type="video/mp4">
</video>
<style>
	#homevideo{position: absolute;top: 0;left: 0;z-index: -999;width: auto;height: 100%;}
</style>

以前见过,现在自己做了个。查看效果

没什么技术含量,不过视频需要绝对定位,所以就要注意父元素有没有定位属性。其他的css修改,例如去掉body背景图,修改文字颜色等看情况,需要的话再改。

用视频做为页面背景

10/11
08:00
学习

手机网页上拨打电话的tel链接

在手机网页上拨打电话的链接是tel:链接,形如:

<a href="tel:01088888888"></a>

今天在使用中遇到了一些问题,记录下来:
1.电话号码中间不要加分隔符,如tel:010-88888888是不行的。
2.在某些小米手机自带的浏览器中(也许不是所有miui版本上都这样),电话所在的这个a标签不能有target属性,例如下面的例子会导致错误链接:

<a target="_blank" href="tel:01088888888"></a>

3.iphone上的Safari默认会把电话号码的数字识别为电话号码,此时点击这串数字可拨打电话,同时数字的表现形式变得形同一个a标签。为了防止这个问题,可以加上以下meta信息:

<meta name="format-detection" content="telephone=no" />

评论里提到QQ浏览器了,它有个缺陷。如果你在css中写了句通用的a标签的颜色:

a{color:#fff;}

这是没卵用的,如果你不对一个a标签在css内精准选择它并为其指定颜色,或者没给它在行内样式设置颜色,QQ浏览器就把它显示为紫色,就像电脑上被点击过的链接的颜色一样。很难看。
UC浏览器连rgba颜色都不支持。
ps:又发现了miui自带的浏览器的一个奇葩问题。同事设置某处字体大小的时候,css选择器里面使用了b这个标签,结果在miui自带浏览器上显示的始终是浏览器的最小字号。最后终于发现了这个问题,不使用b标签做选择器,问题解决了。

手机网页上拨打电话的tel链接

10/7
08:00
学习

css实现position:fixed元素和另一个元素保持固定的距离

标题可能看的有点晕,其实就是说一个div距离页面左侧的位置可能会变动,那如何让fixed定位的元素和它保持固定的距离呢?

看如下代码:

<div class="box">
	<div class="box1"></div>
	<div class="box2">从这里开始是box2的内容部分,左边是内边距</div>
</div>
<style>
	body{margin: 0;}
	.box{width: 810px;margin: 0 auto;}
	.box1{ width:600px; height:2000px; background-color:#3F0;}
	.box2{ width:400px;  height:200px; background-color:#930; position:fixed;top: 0;right: 0;bottom: 0;left: 0;margin: auto;padding-left: 810px;color: #fff;}
</style>

最外层box宽810px,始终水平居中。然后box1宽600px,在外层box里面居左。box2是固定定位position:fixed,想让box2在外层box里面居右,而且和box1有10px的间距。

这时候问题来了,box2是固定定位,而不是相对定位或绝对定位。固定定位是始终相对于窗口定位的,而不是相对于父元素。如果给box2一个固定的left值,窗口宽度一旦改变,外层box距页面的水平位置改变了,box2却保持不变,这就和box1错位了。

然后我去百度,看到有篇文章说的是把固定定位的元素设置居中。我隐约觉得破解这个问题的契机出现了,试了一会儿,终于找到了方法,那就是不使用left定位,而是使用padding或border去挤。

先把fixed定位的元素居中,然后用padding-left或border-left去挤(推荐用用padding-left),其宽度等于外层box的宽度(不能用margin-left,因为它要用来设置居中)。这样,当页面宽度改变时,box2相对于外层box的位置是不变的,也就不会和box1错位了。

但是这样也有缺陷:
第一,fixed的元素因为加了padding或border,实际宽度增加了。如果窗口宽度小于这个宽度,平衡就会被打破。
第二,padding和border都是可见元素,所以fixed定位的元素不要设置背景色和边框,否则在视觉上会影响页面。要设置的话在元素内建立子元素来做。

查看demo

现在想想有点意思,和《绝对定位的元素居中》的方法有相似之处。只不过固定定位的是把元素居中,而绝对定位是把元素左侧居中。然后都是去挤了。

css实现position:fixed元素和另一个元素保持固定的距离

09/5
08:00
学习

修改表单中file控件的外观

表单中的file上传控件在各个浏览器中的外观都不太一样,所以我们可以自己做一个外观。原理是隐藏file控件,然后自己做出文件名的显示区域,以及选择按钮。

<form id="form0">
	<input type="file" id="fileinput1">
	<span id="showfile">尚未选择文件</span>
	<span title="选择文件" id="selectbtn1">选择文件</span>
	<span class="tip">图片必须为jpg格式,体积小于2M,文件名不能包含“sox”三个字</span>
</form>
<style>
	#fileinput1{display: none;}
	#form0 span{border-radius: 5px;font-family: '微软雅黑';display: inline-block;}
	#showfile{width: 300px;height: 34px;line-height: 34px;color: #aaa;padding:0 5px 0 10px;border:1px solid #0c0;white-space:nowrap;  text-overflow:ellipsis;overflow: hidden;vertical-align:top;}
	#selectbtn1{width: 100px;height: 36px;line-height: 36px;background:#4DB849;color: #fff;text-align: center;cursor: pointer;vertical-align:top;}
	.tip{margin-left: 5px;color: #aaa;height: 36px;line-height: 44px;}
</style>
<script>
	document.getElementById("selectbtn1").onclick=function  () {
		document.getElementById("fileinput1").click();
	}
	document.getElementById("fileinput1").onchange=function(){
		if (this.files[0].type!="image/jpeg") {
			alert("文件格式不正确!");
			return false;
		}else if(this.files[0].size>2000000){
			alert("文件体积过大!");
			return false;
		}else if (this.files[0].name.toLowerCase().indexOf("sox")>-1) {
			alert("文件名包含非法字符!");
			return false;
		};
		document.getElementById("showfile").innerHTML=this.files[0].name;//这里没有用value,因为获取不到真实的绝对路径的,不如只显示文件名
		document.getElementById("showfile").style.color="#333";
	}
</script>

点击选择文件按钮的时候用js去触发file控件;在选取文件之后,将文件信息显示到文件名区域里。

你可能会注意到files[]这个集合:

this.files[0]

这是html5中为file控件增加的属性,通用的有name、size、type、lastModified这几个属性。这些属性可以用来对上传的文件做一些检测。

注意,size的单位是Byte(字节)。

修改表单中file控件的外观

08/24
14:35
学习

网页使用固定宽度布局,适应不同宽度的手机屏幕

今天完成了一个手机站专题的排版,然后到手机上测试缩放的时候出了问题,折腾半个上午,摸索出一些心得(后来发现,这就是固定宽度布局嘛)。

1.排版的时候用px排,在css里把body宽度固定,可以定成和设计稿一样,例如360px,640px。其他元素也都用px。

2.使用js动态设置viewport:

var scale=document.documentElement.clientWidth/640;
// var scale=window.screen.width/640;
var metaEl = document.createElement('meta');
document.querySelector("head").appendChild(metaEl);
metaEl.setAttribute('name','viewport');
metaEl.setAttribute('content', 'width=device-width ,initial-scale=' + scale + ',maximum-scale=1.0, minimum-scale=0 ,user-scalable=no');

这里面的640改成自己给body定的的宽度。这个代码的意思就是把initial-scale倍数设置为浏览器device-width/网页固定的宽度,使得页面被缩放到适应屏幕宽度。

ps:本文最近做过更新,第二步动态设置viewport,虽然理论上是正确的,但我还没实践过。我现在尝试用rem布局。

网页使用固定宽度布局,适应不同宽度的手机屏幕

07/30
17:46
学习

html中的fieldset和legend标签

调查表单

吾王的名字:

咖喱棒又称:


答案

阿尔托利亚·潘德拉贡
石中剑

fieldset和legend标签的主要表现是把一些内容组织在一起,加上边框和标题。重点是这个边框,这两个标签让这种边框上加文字的实现变得简单了。

使用时首先把需要放在一起的内容放在fieldset标签里,然后用legend标签起一个标题。

这两个标签不仅可以使用在form表单中,用于组织文本,或给图标区域加个标题都可以。

各大主流浏览器都支持此标签,样式也比较一致。更改一下默认样式会更美观一些。

html中的fieldset和legend标签

01/19
15:46
学习

HTML字符转义工具

在线进行HTML转义的工具

链接点我

最近想学习js,做了一个网页来记录学习到的知识。如果把js代码直接在插入页面,这段js会运行的,而我在记录的时候只是想要看看代码而已。这个时候就要用到转义了,将代码中的<、>、"进行转义,使其表现为正常的字符,不再具有标签的意义。全部自己手动改是不可能的,于是找到了这么一个在线转换的工具,方便好用,大赞。

HTML字符转义工具

11/13
14:05
学习

html的书签链接

书签链接偶尔会用到,但毕竟我用的不多,印象模糊了,所以刚才用的时候又去w3c看了一下。书签链接所需要的是首先给目标位置添加一个a标签并指定其name或者id值;之后在调用时,把a标签的链接写成#+name或者#+id的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>书签链接demo</title>
</head>
<body style="height: 1500px;">
    <a href="#bottom1">用name跳到底部</a>
    <a href="#bottom2">用id跳到底部</a>
    <div style="height: 1400px;"></div>
    <a href="" name="bottom1">底部1</a>
    <a href="" id="bottom2">底部2</a>
</body>
</html>

html的书签链接