這兩天時間比較清閒，想學習一下原生js實現路由的demo，查詢了好多別人的博客和一些資料，順便做一下元素垂直居中就做成了下面這個樣子：
index.html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js路由和css實現元素垂直居中</title>
<style>
.nav{
text-align:center;
}
.nav li{
display:inline-block;
list-style:none;
}
.nav li a{
display:inline-block;
text-decoration: none;
padding:10px 15px;
}
a{
cursor: pointer;
}
</style>
</head>
<body>
<section class="warp">
<div class="nav">
<ul>
<li><a href="javascript:void(0)" data-path="one">第一種</a></li>
<li><a href="javascript:void(0)" data-path="two">第二種</a></li>
<li><a href="javascript:void(0)" data-path="three">第三種</a></li>
</ul>
</div>
<div id="router" class="router">
<!-- 內容加載區域 -->
</div>
</section>
<script src="jquery-3.4.0.min.js"></script>
<script src="router.js"></script>
</body>
</html>
router.js代碼：
(function(){
var router = [
{
'path':'one',
'url':'./centered_one.html'
},
{
'path':'two',
'url':'./centered_two.html'
},
{
'path':'three',
'url':'./centered_three.html'
}
];
//改變頁面
function change_page(url){
$('#router').load(url)
}
$('a').on('click',function(){
var path = $(this).data('path');
for(var i in router){
$('li')[i].style.background = '#fff';
$('li a')[i].style.color = 'blue';
if(router[i].path == path){
$('li')[i].style.background = 'blue';
$('li a')[i].style.color = '#fff';
change_page(router[i].url);
history.pushState(router[i].url,null,'#/'+router[i].path);
}
}
})
window.addEventListener('popstate',function(e){
var url = e.state;
change_page(url);
});
window.addEventListener('load',function(){
var path = location.hash.slice(2) || '/one';
for(var i in router){//刷新 加載
if(router[i].path == path){
$('li')[i].style.background = 'blue';
$('li a')[i].style.color = '#fff';
change_page(router[i].url);
history.replaceState(router[i].url,null,'#/' + path);
break;
}
if(i == router.length-1){//重定向
change_page(router[0].url);
history.replaceState(router[0].url,null,'#/' + router[0].path);
}
}
});
})();
centered_one.html代碼(即第一種css實現元素水平垂直居中)：
<style>
#father{
width: 500px;
height: 500px;
background-color: skyblue;
position: relative;
margin: 0 auto;
}
.centered{
width: 200px;
height: 200px;
padding: 10px;
background-color: green;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.centered p{
color: #fff;;
}
</style>
<section>
<div id="father">
<div class="centered">
<p>111111111js路由和css實現元素垂直居中111111111</p>
</div>
</div>
</section>
centered_two.html代碼(即第二種css實現元素水平垂直居中)：
<style>
#father{
width: 500px;
height: 500px;
background-color: skyblue;
position: relative;
margin: 0 auto;
}
.centered{
min-width: 180px;
min-height: 180px;
padding: 10px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.centered p{
color: #fff;
}
</style>
<section>
<div id="father">
<div class="centered">
<p>222222js路由和css實現元素垂直居中2222222</p>
</div>
</div>
</section>
centered_three.html代碼(即第三種css實現元素水平垂直居中)：
<style>
#father{
width: 500px;
height: 500px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.centered{
width: 200px;
height: 200px;
padding: 10px;
background-color: green;
}
.centered p{
color: #fff;
}
</style>
<section>
<div id="father">
<div class="centered">
<p>3333333333js路由和css實現元素垂直居中33333333</p>
</div>
</div>
</section>
PS:以上代碼如果直接在桌面運行會報錯：Cross origin requests are only supported for protocol schemes: http, data, chrome, se-extension, https，當然火狐瀏覽器是沒問題的
以下是幾個解決方法：
1.換編輯器
使用webstorm或是visual studio這種重量級的IDE（此類IDE都內置了HTTP服務器）。
2.安裝Server插件:
這裏針對VSCode和Sublime介紹一款插件—VSCode，這個插件功能十分強大，不止可以解決ajax不支持file協議的問題，還可以實現在編輯器裏保存修改後，頁面自動刷新的功能
3.瀏覽器
1）直接用火狐打開即可；
2）Chrome：
Windows：
設置Chrome的快捷方式屬性，在“目標”後面加上–allow-file-access-from-files，注意前面有個空格。
Mac：
打開終端，輸入下面命令：open -a “Google Chrome” –args –disable-web-security然後就可以屏蔽安全訪問了