这两天时间比较清闲,想学习一下原生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然后就可以屏蔽安全访问了