javascript | 佳佳酱

ajax虾米的最有爱了，用起来也很方便。。【第一次写长文，出错请留言来让我改正】

var xmlhttp; //创建一个Request对象先
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST或者GET","请求的脚本文件",true或false【不加引号，true是异步，false是同步】);          //异步通俗的说就是请求时浏览器接着干其他事，同步就是浏览器要等服务器处理完了才接着做其他事
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) //当海枯石烂的时候
{
//这里就可以做ajax接收后行为的事了，然后xmlhttp.responseText是从服务器扔回来的数据。
}
}
xmlhttp.send("这里是发送出去的数据");

继续阅读ajax那啥的通用框架 →

上个例子先。。

然后由于某些原因。。在文章后面的这个太阳或者月亮就是例子了。

单独的例子看这里：demo.luojia.me/sunandmoon/

————下面是神圣的代码————–

<html>
<head>
<script src="http://www.luojia.tk/jquery.js"></script>
<script>
function resunmoondivsize(){
var height=window.innerHeight;
var width=window.innerWidth;
if(height>width){
document.getElementById("sunmoondiv").style.width=width*2;
document.getElementById("sunmoondiv").style.height=width*2;
}
else{
document.getElementById("sunmoondiv").style.width=height*2;
document.getElementById("sunmoondiv").style.height=height*2;
}
document.getElementById("sunmoondiv").style.left=(width-document.getElementById("sunmoondiv").style.width);

var divwidth=document.getElementById("sunmoondiv").style.width;
var divheight=document.getElementById("sunmoondiv").style.height;
var setwidth=width/2;
var setdivwidth=divwidth/2;
document.getElementById("sunmoondiv").style.left=setwidth-setdivwidth;
document.getElementById("sunmoondiv").style.top=divheight/2;

}
function setsunmoon(){
var divwidth=document.getElementById("sunmoondiv").style.width;
var sunwidth=document.getElementById("sun").style.width;
var moonwidth=document.getElementById("moon").style.width;
}
sunshinejiaodu=0;
function zhuansunshine(){
sunshinejiaodu=sunshinejiaodu+0.4;
var jiaodu="rotate("+sunshinejiaodu+"deg)";
$("#sunshine").css({"transform":jiaodu,"-webkit-transform":jiaodu,"-moz-":jiaodu,"-ms-":jiaodu,"-o-":jiaodu});
}
function zhuansunmoon(){
var date=new Date();
var zhengtijiaodu=(date.getHours()*60+date.getMinutes()+date.getSeconds()/60)*0.25;
var jiaodu="rotate("+zhengtijiaodu+"deg)";
$("#sunmoondiv").css({"transform":jiaodu,"-webkit-transform":jiaodu,"-moz-":jiaodu,"-ms-":jiaodu,"-o-":jiaodu});
}
</script>
</head>
<body style="margin: 0px;">
<div style="position:fixed;height:100%;width:100%;overflow:hidden;min-height:360px;min-width:360px;" id="sunmoonmain">
<div style="position:relative;min-height:360px;min-width:360px; margin:0px auto;" id="sunmoondiv">
<!--月亮酱-->
<div style="position:absolute;height:180px;width:180px;overflow:hidden;top:0px;left:50%; margin-left:-90px;transform:scale(0.5);-webkit-transform:scale(0.5);-o-transform:scale(0.5);-ms-transform:scale(0.5);-moz-transform:scale(0.5);" id="moon">
<div style="position:absolute;width:50%;height:50%;left:22.5%;top:22.5%;border-radius:999px; background-color:rgba(255,204,51,0.6)"></div>
</div>

<!--太阳君-->
<style>
div.suncolor{background-color:rgba(255,0,0,0.8);}
</style>
<div style="position:absolute;height:180px;width:180px;overflow:hidden;bottom:0px;left:50%; margin-left:-90px;transform:scale(0.5);-webkit-transform:scale(0.5);-o-transform:scale(0.5);-ms-transform:scale(0.5);-moz-transform:scale(0.5);" id="sun">
<div style="position:absolute;width:50%;height:50%;left:25%;top:25%;border-radius:999px;" class="suncolor"></div>
<div style="position:absolute;height:180px;width:180px;" id="sunshine">
<div style="position:absolute;width:3px;height:13%;left:88.5px;top:16px;" class="suncolor"></div>
<div style="position:absolute;width:13%;height:3px;top:88.5px;right:16px;" class="suncolor"></div>
<div style="position:absolute;width:3px;height:13%;left:88.5px;bottom:16px;" class="suncolor"></div>
<div style="position:absolute;width:13%;height:3px;top:88.5px;left:16px;" class="suncolor"></div>

<div style="position:absolute;height:180px;width:180px;transform:rotate(22.5deg);-webkit-transform:rotate(22.5deg);-moz-transform:rotate(22.5deg);-ms-transform:rotate(22.5deg);-o-transform:rotate(22.5deg);">
<div style="position:absolute;width:3px;height:7%;left:88.5px;top:26px;" class="suncolor"></div>
<div style="position:absolute;width:7%;height:3px;top:88.5px;right:26px;" class="suncolor"></div>
<div style="position:absolute;width:3px;height:7%;left:88.5px;bottom:26px;" class="suncolor"></div>
<div style="position:absolute;width:7%;height:3px;top:88.5px;left:26px;" class="suncolor"></div>
<div style="position:absolute;height:180px;width:180px;transform:rotate(22.5deg);-webkit-transform:rotate(22.5deg);-moz-transform:rotate(22.5deg);-ms-transform:rotate(22.5deg);-o-transform:rotate(22.5deg);">
<div style="position:absolute;width:3px;height:13%;left:88.5px;top:16px;" class="suncolor"></div>
<div style="position:absolute;width:13%;height:3px;top:88.5px;right:16px;" class="suncolor"></div>
<div style="position:absolute;width:3px;height:13%;left:88.5px;bottom:16px;" class="suncolor"></div>
<div style="position:absolute;width:13%;height:3px;top:88.5px;left:16px;" class="suncolor"></div>
<div style="position:absolute;height:180px;width:180px;transform:rotate(22.5deg);-webkit-transform:rotate(22.5deg);-moz-transform:rotate(22.5deg);-ms-transform:rotate(22.5deg);-o-transform:rotate(22.5deg);">
<div style="position:absolute;width:3px;height:7%;left:88.5px;top:26px;" class="suncolor"></div>
<div style="position:absolute;width:7%;height:3px;top:88.5px;right:26px;" class="suncolor"></div>
<div style="position:absolute;width:3px;height:7%;left:88.5px;bottom:26px;" class="suncolor"></div>
<div style="position:absolute;width:7%;height:3px;top:88.5px;left:26px;" class="suncolor"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e) {
resunmoondivsize();
setsunmoon();
zhuansunmoon();
setInterval('zhuansunshine()',100);
setInterval('zhuansunmoon()',60000);
$(window).resize(function() {
resunmoondivsize();
});

});
</script>
</body>
</html>

佳佳酱

标签归档：javascript

ajax那啥的通用框架

太阳君和月亮酱