马上纪念日了，下载了网站模板修改了一下准备当作纪念日的礼物送给女朋友。
主要步骤：
- 购买云服务器
- 购买域名，绑定到云服务器上
- 可以从模板之家下载模板，按照自己的要求进行修改就可以了
- 将本地代码部署到云服务器上
其中1、2、4步骤可以参照0038 如何将网站部署到阿里云服务器
部署之后可能会出现css、js加载不出来的问题，解决方法如下：
更改目录和子目录的权限：
chmod 755 /usr/share/nginx/html/*
这里主要讲一下第三步：首先从模板之家下载模板，因为对web不太了解，只是在原有的基础上进行图片、内容以及简单格式的调整。额外加了一些功能。
- 属于自己和女朋友的小屋所以加了一个登录界面,主要借鉴了下面这个博客的源码，做了一些修改：HTML登录界面的实现详解。为了方便，加了个回车实现登录效果。其他可以根据自己的需求进行调整。回车登录效果如下：
- login.html的head添加了js效果
<script>
function keyLogin(){
if (event.keyCode==13){ //回车键的键值为13
// alert("回车！");
// $("#login").submit();
document.getElementById("login").click(); //调用登录按钮的登录事件
}
}
</script>
- body标签添加如下：
<body onkeydown="keyLogin();">
- 添加多页面连续播放，并且自动播放。主要是登录网站时音乐自动播放，并且在更换页面时，音乐连续播放。
因为当前谷歌浏览器不支持audio自动播放，因此我们使用iframe标签。
- 首先创建music.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
<!--由于实现iframe操作之后，后续js操作不能实现，因此我们必须把iframe放在body标签之后-->
<!--iframe标签实现自动播放，而audio实现循环播放，同时设置muted，即audio为静音播放，否则会出现两个声音-->
<iframe src="bgm/遇见你的时候所有星星都落到我头上.mp3" allow="autoplay" style="display: none"></iframe>
<audio id="back_music" controls src="bgm/遇见你的时候所有星星都落到我头上.mp3" autoplay loop muted></audio>
</html>
- 而后创建新的html文件，并当作主页即index.html，这里login.html为实际的网站主页：
<!DOCTYPE html>
<html>
<frameset cols="0%,100%">
<frame src="music.html"/>
<frame src="login.html" />
</frameset>
</html>
或者：
<!--第二种方法-->
<audio src="./bgm/遇见你的时候所有星星都落到我头上.mp3" muted autoplay loop id="myaudio" style="display: none"></audio>
<script>
/*
* muted 静音
* autoplay 自动播放
* loop 循环播放
*/
var audio = document.getElementById('myaudio');
var t1 = 3e3;//如果是轮询，这个时间必须大于音频的长度。如果是webscoket，应该设置一个状态play，避免重复播放，如下：
var t2 = 250000;//音频的长度，确保能够完整的播放给用户
var play = false;
function run(){
if(play){
return false;
}
audio.currentTime = 0;//设置播放的音频的起始时间
audio.volume = 0.5;//设置音频的声音大小
audio.muted = false;//关闭静音状态
play = true;
setTimeout(function(){
play = false;
audio.muted = true;//播放完毕，开启静音状态
},t2);
}
setInterval(function(){
run();//假装在轮询服务器，或者从websocket拉取数据
},t1);
</script>
之上这种自动播放方式使用了frameset框架导致页面切换而url不变为什么网页跳转 url 不变（只显示主域名）？
网友评论