把github、git、github pages大概搞清楚了之后俺就开始写托管在github pages上的简历网页了,第一次感觉自学以来不算是浪费时间,还是学到了一些东西的。
感觉响应式设计和浏览器兼容会是一个很大的问题,我的预想大概是这样:
判断是移动端还是浏览器端:
移动端:加载移动端的样式表
浏览器端:判断是哪个浏览器(因为发现相同样式在谷歌和火狐上的效果有一定差别)
浏览器端浏览:大概设置两个断点,即三套有些微不同的样式表。
不准备用bootstrap的栅格系统,感觉没有意思ฅʕ•̫͡•ʔฅ
在简历中准备了一块用来展示过去四个月做的小demo,顺便作为面试家园工作室/暑期实习前的复习了
还是用version的形式来记录,预计version2.0.0开始就是完整的谷歌浏览器端的界面,包括字蛛爬取出来的字体啊,svg图标等等。
记录一下其中一个小模块:音乐播放器
(谷歌浏览器)
(注意,上图中圈出来的地方都是自己添加的,用的转义字符或者icon图标。)
js代码
$(function(){
var audioCounts = 0;
var songs = ["王若琳-Let's Start From Here.mp3",
"马修·连恩 - 布列瑟农.mp3",
"The Brothers Four - 500 miles.mp3",
"Kygo,Ed Sheeran - I See Fire (Kygo Remix).mp3"];
var audioSrcFile = "../audio/";
var player = document.getElementsByTagName("audio")[0];
var audioCounts;
$("#rightChange").click(function next (){
player.pause();
if(audioCounts == 3){
audioCounts = 0;
}else{
audioCounts++;
}
var audioSrc = audioSrcFile + songs[audioCounts];
console.log(audioSrc);
document.getElementsByTagName("source")[0].setAttribute("src",audioSrc);
player.load();
player.play();
$("#audioTitle").text(songs[audioCounts].slice(0,-4));
});
$("#leftChange").click(function(){
player.pause();
if(audioCounts == 0){
audioCounts = 3;
}else{
audioCounts--;
}
console.log(audioCounts);
var audioSrc = audioSrcFile + songs[audioCounts];
console.log(audioSrc);
document.getElementsByTagName("source")[0].setAttribute("src",audioSrc);
player.load();
player.play();
$("#audioTitle").text(songs[audioCounts].slice(0,-4));
});
$("#closeBtn").click(function(){
player.pause();
$("#container").hide();
$(".showPlayer").show();
});
player.onended = function(){
var audioSrc = audioSrcFile + songs[audioCounts];
console.log(audioSrc);
document.getElementsByTagName("source")[0].setAttribute("src",audioSrc);
player.load();
player.play();
$("#audioTitle").text(songs[audioCounts].slice(0,-4));
};
})
由于是静态页面(没有php、没有asp、没有sql、没有node.js),这是我目前想到的比较okay的一个实现方式,缺点就是在github pages上运行时加载音乐资源需要5s以上的延迟(本机数据)。
几个需要注意的地方:
1.点击“>”按钮时跳转到下一首歌的这个步骤,在更改了路径以后,需要执行一次player.load(),重新加载资源文件,否则不会切换。
2.谷歌浏览器对自动播放政策是有限制的,详情可以点击这篇文章,希望你会有收获。