hsj project code

928

<!DOCTYPE html>
<html>

<head>
<title>欢迎！黄手绢工作室.Happy </title>
</head>

<body>
<link rel="stylesheet" href="heatstyle.css">

<div id="header">
<div id="titlebgleft" class="titlebg"></div>
<div id="titlebgright" class="titlebg"></div>
<div id="squareleft"></div>
<div id="squareright"></div>
<div id="nav">
<span id="title">Happy. 黄手绢工作室</span>
<ul id="navlist">
<li onclick="navchoose('posts')">阅读</li>
<li onclick="navchoose('chat')">交流</li>
<li onclick="navchoose('movies')">欣赏</li>
<ul>
</div>
</div>

<div id="content">
<div id="choose"></div>
<div id="news"></div>
<div id="loading"></div>
<div id="posts">
<div class="post">
<div class="post_title">心灵的使者</div>
<div class="post_content">
光明
</div>
<div class="post_read">
展开全文
</div>
</div>
</div>
<div id="chat">

</div>
<div id="movies">

</div>
</div>

<script src="heatfunc.js"></script>
</body>
</html>

　　

*{
	outline:none;
}
*::-moz-focus-inner{
	border:0;
}
body{
	background-color:#FDFDFA;
	width:100%;
	height:100%;
	overflow:auto;
}
#nav{
	width:100%;
	font-size:2.5em;
	padding-left:1em;
	padding-top:0.5em;
}
#navlist{
	margin-left:9.5em;
	position:absolute;
}
#navlist li{
	width:3em;
	color:#222222;
	background-color: rgba(255,255,255,0);
	text-align:center;
	display:inline;
	padding:0.5em;
}
#nav #title,#title:link,#title:hover,#title:active,#title:visited{
	z-index:100;
	background-color:rgba(255,255,255,0);
	color:#5D5D5C;
	text-align:center;	
	position:absolute;
	margin-top:1em;
}
.titlebg{
	z-index:80;
	position:absolute;
	width:19em;
	height:20em;
	background-color:#FFFBDA;
}
#titlebgleft{
	margin-left:-1em;
	margin-top:-10em;
	transform:rotate(-10deg); 
}
#titlebgright{
	margin-left:10em;
	margin-top:-10em;
	transform:rotate(10deg);
}
#squareleft{
	position:absolute;
	z-index:90;
	margin-left:-1em;
	margin-top:-1em;
	width:2.1em;
	height:13em;
	background-color:#FDFDFA;
}
#squareright{
	position:absolute;
	z-index:90;
	margin-left:27em;
	margin-top:-1em;
	width:3em;
	height:13em;
	background-color:#FDFDFA;
}
#navlist li:hover{
	color:#5B5B5B;
}
#content{
	width:100%;
	margin-top:11em;
}
#content div{
	z-index:-10;
}
#content #loading{
	margin:auto;
	z-index:10;
}
#content #choose{
	z-index:20;
}

　　

var loadimg = {"posts":"","chat":"","movies":""},contents=["posts","chat","movies"];


function navchoose(where){
	changecontent(where)
	window.location.href="#"+where;
}
function getdata(url){
	xhr=new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHttp")
	xhr.open("GET",url,true)
	xhr.responseType="text"
	xhr.onreadystatechange = function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				return xhr.response;
			}
			else{
				/*调试
				alert("信号不好,加载不出来啦##xhr.status"+xhr.status)
				*/
				console.log("AJAX网络故障:xhr.status"+xhr.status)
				return null;
			}
		}
		else{
			/*调试
			alert("奇怪的网络故障:xhr.readyState"+xhr.readyState)
			*/
			console.log("网络故障:xhr.readyState"+xhr.readyState)
			return null;
		}
	};
	xhr.send()
}
function changecontent(which){
	put=document.getElementById(which)
	for(i=0;i<contents.length-1;i++){
		document.getElementById(contents[i]).style.display="none";
	}
	loadtag = document.getElementById("loading")
	loadtag.innerHTML="<img src='"+loadimg[which]+"'></img>"
	loadtag.style.display="block";
	inner=getdata("GET","https://www.cnblogs.com/...")//content
	/*放入信息(如posts)
	put.innerHTML=...
	*/
	put.style.display="block";
	loadtag.style.display="none";
}

//init
urlnow=window.location.href
if(urlnow.indexOf("#")+1){
	changecontent(urlnow.substring(urlnow.indexOf("#")+1,urlnow.length));
}
else{
	changecontent("posts");
}
//init.

　　

posted @ 2020-09-28 00:35  慕舲-不再使用  阅读(429)  评论(2)    收藏  举报