分类目录归档：无聊产物

(function() {
	try {
		var siteol = $("#online_number #site_ol"),//获取填写全站在线数的元素
		pageol = $("#online_number #page_ol");//获取填写本页在线数的元素
	} catch(e) {}
	var sitesocket = {
		newconnection: newconnection,
		socket: null,
		pinginterval: null
	},
	pagesocket = {
		newconnection: newconnection,
		socket: null,
		pinginterval: null
	};
	function ssiteol(num) {
		if (siteol.length) {
			siteol.html(num)
		} else {
			$(window).load(function() {
				siteol = $("#online_number #site_ol");//注意修改这里，我后来为了在页面加载完之前就先发起连接，又要确保可以填入正确位置做的修改
				siteol.html(num)
			})
		}
	}
	function spageol(num) {
		if (pageol.length) {
			pageol.html(num)
		} else {
			$(window).load(function() {
				pageol = $("#online_number #page_ol");//还有这里
				pageol.html(num)
			})
		}
	}
	function _(type, data) {
		return JSON.stringify({
			type: type,
			data: data
		})
	}
	function newconnection(url, callback) {
		clearInterval(this.pinginterval);
		if (this.socket && this.socket.readyState !== 3) {
			return
		} else {
			delete this.socket
		}
		var inte;
		this.socket = new WebSocket("ws://urlonline.coding.io:80");//修改成你自己的在线服务器地址
		var so = this.socket;
		this.socket.ping = function() {
			so.send("1")
		};
		this.socket.onopen = function(data) {
			so.send(_("url", url));
			inte = this.pinginterval = setInterval(so.ping, 30000)
		};
		this.socket.onmessage = function(data) {
			if (typeof data == "string" && data === "1") return;
			var msg = JSON.parse(data.data);
			switch (msg.type) {
			case "ol":
				{
					callback(msg.data);
					break
				}
			}
		};
		this.socket.onerror = function(data) {
			clearInterval(inte);
			delete so;
			setTimeout(newconnection, 3000, url);
			callback(0)
		};
		this.socket.onclose = function(data) {
			clearInterval(inte);
			delete so;
			setTimeout(newconnection, 3000, url);
			callback(0)
		}
	}
//初始化连接
	sitesocket.newconnection("site://blog.luojia.me", ssiteol);//使用site://前缀标识统一的被请求地址(此网站)
	pagesocket.newconnection(window.location.href, spageol)//使用本页的href作为被请求地址
})();

可以断线自动重连，喵喵喵！

不过人少的站加上了它显得更寒酸了 (๑•́ ₃ •̀๑)

悠哉博主的日常、无聊产物

Web Audio Api获取音乐频率演示

2015 年 1 月 18 日罗佳(博主) 19条评论

使用的canvas库是我的COL，参考刘哇勇的部落格和基于Web Audio API实现的音频可视化效果(被我翻译了一部分)完成。

食用方法：点选择文件放首歌进去，或者把歌拖到选择文件的框上面。

请确保你的浏览器最新！(经测试只有chrome和firefox支持良好)

经测试2，把<我的滑板鞋>放入其中观看效果更佳！

在新页面中打开旧版
 在新页面中打开新版
 精心特制的coding参赛作品
 继续阅读Web Audio Api获取音乐频率演示 →

无聊产物

【自制】【消磨时间用】小太鼓

2014 年 2 月 22 日罗佳(博主) 2条评论

打开一首歌然后用鼠标点一下这个鼓，接着就尽情的按zxcv吧！

继续阅读【自制】【消磨时间用】小太鼓 →

无聊产物

文件床进行不可用版本更新

2014 年 1 月 5 日罗佳(博主) 4条评论

总觉得那么久都没有相关消息有点对不起自己和有关群众，所以我现在发个看起来没什么区别的版本出来。
虽然看起来是没有什么区别，不过其实这个版本是更新了许多代码的。

包括：
·几乎完成了“服务器信息”页面的逻辑（用了很多时间），这个页面的工作方式还是我一开始就做在里面的命令行请求模式。（我现在发现这个模式还真好用，省不少脑力）
·改变了“命令行”函数，让它可以不阻塞（异步）的工作，同时保留了阻塞模式。（当然这个改动从外观来看是看不到的啦。。）
·改变了配置文件的内容，把参数单独分离到一个文件里了。
·补上了强制刷新内容页面的快捷键：Ctrl+Alt+R（按了以后会强制刷新当前显示的内容页，如果没有的话[怎么可能]就不会有任何反应）
·把打开以后的默认页面设置到服务器信息（因为制做好了这一个页面）（由于苦逼的教育环境我的进度极慢）
·打开浏览器控制台你会发现一大堆调试信息。。。。。。（这算哪门子特点吖啊喂！）
·增加容错能力（这又算哪门子特点吖。。。）
·修复了部分不明显的错误
继续阅读文件床进行不可用版本更新 →

无聊产物

文件床残疾版征求意见

2013 年 11 月 30 日罗佳(博主) 15条评论

仅征求上传部分的意见，所以无关的部分我全部注释掉了，你能看到的只有上传按钮和上传列表（按ctrl+alt+u可以快捷调出/隐藏上传列表）。
暂时不会有断点续传之类的功能出现（也许最终完整版会有这功能，也许永远没有，取决于我的时间和是否有支持的API）
注：对于手机等小屏设备显示布局很有问题，而且上传文件方面我无法测试是否有问题。

测试地址：http://filebed.duapp.com/
名字:test 密码:123456
求测试者别给我搞跪了，不要上传大文件。

【再次提醒】不是只有这么点功能，是因为无关部分被我阉割掉了，而且还没做好。
源码

【新版】 http://luojia.me/2014/01/04/文件床进行不可用版本更新/ ‎

无聊产物

日志 2013 年 11 月 17 日罗佳(博主) 留下评论

放一个文件床的先行版（基本没有功能，UI也还没做好，而且问题也没有解决）
而且还是不可以使用的（文件能上传但是你不一定知道在哪里。。。）

如果你的浏览器里有控制台的话你可以试试输入

cmd("lsdir");

来看看有哪些文件夹

这还是普通用户不能用的。。。

http://pan.baidu.com/s/15TYp5

[追加信息]
刚刚因为要出门了急急忙忙写了点，现在补充说明一下已知问题
不能用于IIS
中文文件名的文件不能上传（除了ASCII有的字符应该都不行
你看到的界面除了上传按钮以外都还是没有用的
注意文件大小和php设置中的限制
按Ctrl+Alt+T可以看到一个未完成的自制控制台
上传的文件暂时可以自己cmd那个命令然后脑补
下周有很小的可能会放出基础可用版（有各种干扰因素所以也不要抱太大希望）

无聊产物

canvas函数图

2013 年 5 月 4 日罗佳(博主) 留下评论

【初始编辑】2013/4/21 14:55
【更新 2013/5/1 14:36 】
更新日志：加上坐标轴的箭头，加了两个函数(其实这个不算更新吧。。)。
优化了一下绘制方法：修改了清除画布的方法，极大提高效率。
自定义函数的功能还是没有修好。
代码中已经包含了一部分下次更新的功能：差不多是坐标轴的单位线

昨天我翻出来了以前一时兴起做的一个渣渣函数图绘制的代码，然后又一时兴起想把它改好一点，于是就出现了今天的这篇文章。
【我可是冒着期中考试前不复习的风险来做这个的】
【用chrome浏览效果更佳，其他浏览器可能会有卡顿现象】
现在已经做成了这个样子
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

源地址在这里，佳佳实验室的地址在这里，代码在文章最下面，自带注释
继续阅读canvas函数图 →

无聊产物、笔记、这不是吐槽

哔哔哔哔

2013 年 3 月 30 日罗佳(博主) 6条评论

这是一个无聊的产物[那是相当无聊才会来做这种东西啊~]
先隆重介绍一下，这是一个可以发出声音的程序！[其实就是用Beep函数。。]
然后我给它取了个好长好长名字的名字，叫“音乐灵感的来源~”

然后就上代码了

#include "iostream.h"//带上输出功能
#include "windows.h"//用Beep函数
int main(){
	int pinlv;//定义频率变量
	for(int i=0;i<1000;i++){//循环999次 pinlv=rand();//得到随机数 while(pinlv>2000){//超出了预定范围的话[频率超过一定范围声音会刺耳听不清]
			pinlv=rand();//再来得一次随机数，一直到得到范围内的数为止
		}
		Beep(pinlv,200);//哔哔哔哔哔哔~
		cout<<i<<"  "<<pinlv<<endl;//输出次数和本次的频率为多少
	}
	return 0;//结束啦
}

这是多么可爱的一个程序啊。然后我就不说什么了。。

悠哉博主的日常、无聊产物

本博加上了loading大菊花

2013 年 2 月 18 日罗佳(博主) 一条评论

[前言：由于种种原因，功能性的代码全放到一个单独页面去了]

大部分修改自无聊的等待状态一枚

今天因为?????,我给博客加上了一个菊花来表示页面还在加载,防止有些朋友因为我的博客加载时间过长(这是为什啊！)而以为我博客挂了.

做这个东西几乎用了我一天的时间..说明我的技术还是不足啊,加油!

接下来是正文.

本次修改用到了jquery(我是赖上它了么),原本是把所有代码都写在header里的,后来我发现这样并不好,这样每次加载这个载入画面也要废一些资源，于是我把它单独放在一个html文件里，这样也是有好处的(虽然对有些人来说这样做并不好),好处在于此页面会单独缓存，不用每次一起加载，就算强制刷新也不会牵涉到刷新iframe里的内容，这样可以更快速的加载。

首先是html里的内容,

<html>
  
  <head>
    <script src="../js/jquery.js"></script>
    <style>div#waitallload { position: fixed; height: 100%; width: 100%; background-color: rgba(204,204,204,0.5); } div.huaban { position: absolute; background-color: #000; opacity: 0.4; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; } .caozuodingweidiancenter { -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } div#loadingall { position: relative; height: 28px; width: 28px; display: block; -webkit-transform: scale(3); -moz-transform: scale(3); -ms-transform: scale(3); -o-transform: scale(3); transform: scale(3); margin: 0 auto; opacity: 0.5; top: 50%; }</style></head>
  
  <body>
    <div id="waitallload">
      <div id="loadingall" class="caozuodingweidiancenter">
        <div class="huaban" id="huaban1" style="top:0px;left:12px;width:4px;height:8px;"></div>
        <div class="huaban" id="huaban2" style="right:3px;top:5px;width:8px;height:4px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
        <div class="huaban" id="huaban3" style="right:0px;top:12px;width:8px;height:4px;"></div>
        <div class="huaban" id="huaban4" style="right:5px;bottom:3px;width:4px;height:8px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
        <div class="huaban" id="huaban5" style="bottom:0px;left:12px;width:4px;height:8px;"></div>
        <div class="huaban" id="huaban6" style="left:3px;bottom:5px;width:8px;height:4px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
        <div class="huaban" id="huaban7" style="left:0px;top:12px;width:8px;height:4px;"></div>
        <div class="huaban" id="huaban8" style="left:5px;top:3px;width:4px;height:8px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
      </div>
    </div>
  </body>
  <script>huaban = 1;
    function huabanblack() {
      $("#huaban" + huaban).fadeTo(0, 1);
    }
    function huabanwhite() {
      var xiaoshi = 0;
      if (huaban < 8) {
        huaban = huaban + 1;
      } else {
        huaban = 1;
      }
      if (huaban == 1) {
        xiaoshi = 8;
      } else {
        xiaoshi = huaban - 1;
      }
      $("#huaban" + xiaoshi).fadeTo(600, 0.4);
    }
    /*等待菊花*/
    var juhua1haohei, juhua1haobai;
    function loadingstart() {
      juhua1haohei = setInterval('huabanblack()', 90);
      juhua1haobai = setInterval('huabanwhite()', 90);
    }
    loadingstart();</script>

</html>

然后在header里加入html的iframe

<iframe src="<?php echo get_template_directory_uri();?>/framepage/wait.html" style="z-index:-2;display:none;" id='waitiframe' class="bgiframe"></pre>

请无视php脚本，把它放在z-index的-2层上，以便显示在最下面,【z-index的-1层为太阳君和月亮酱】,先让他的显示为none,这样可以利用fadeIn淡入.接下来是就剩js的事了.

在head中的functions.js文件中进行了一下定义

$("#waitiframe").ready(function(e) {      //iframe加载好时进行操作，防止出现元素不存在的错误
	var waitiframe = $("#waitiframe");//获取这个iframe
	waitiframe.fadeIn(500,         //500毫秒(0.5秒)飘进
	function() {                            
		function loadingstop() {      //停止加载状态的函数
			waitiframe.fadeOut(500,//菊花iframe飘出去
			function() {
				waitiframe.remove();    //删掉这个iframe【这样就可以省去启动和停止菊花转动的代码了~~】
			});
		}
		$(window).load(function(e) { // 当完全加载好的时候
			loadingstop();    //停止载入动画
		})
	});
});

但是使用$(window).load有时还是会失效，所以我在页面最底下的修bug的js文件中加入了

var checkwaitiframetimeout;         //延时变量
function checkwaitiframe(){      //检测加载状态的函数[叫这个名字是因为原本它是用来检测iframe是否还在的函数，后来就没改]
	if(document.readyState =="complete"){            //加载状态
		clearTimeout(checkwaitiframetimeout);     //清除延时
		$("#waitiframe").remove();               //清除iframe
	}	
}

接着给下面的$(document).ready中加入

checkwaitiframetimeout=setInterval("checkwaitiframe()",3000);//3秒检测一次载入状态

至于不用自带的状态改变事件是因为担心事件不被捕获。。毕竟连上面的load事件都会丢失，所以还是用这种方法了。

悠哉博主的日常、无聊产物、这不是吐槽

突然不知为什么就去给我的bilibili空间改了个css

2013 年 2 月 3 日罗佳(博主) 2条评论

也许是我太耐得住寂寞了，也或者是太爱分心了，【iTi】工程一直都排在了复线程制作[根本就没怎么动吖啊喂！]
回到主题，简单地说就是我给自己的bilibili空间换了个样式，虽然没人去也没有什么日志[bilibili的空间真有人用么。。]，但我还是傻了吧唧的熬夜改了下css
先上地址[就当个广告吧~]：http://space.bilibili.tv/589803/list.html
就目前情况来看这个在某些浏览器上看就会是个渣滓..

佳佳工具、无聊产物

图片转data:URI工具

2013 年 1 月 29 日罗佳(博主) 8条评论

昨晚由于需要用data:uri，于是做了这么个转换工具
可本地使用，因为文件不用上传
疯狂的点击这里看demo
截图[此截图使用datauri,看不见请升级人品]

上面这张图的datauri

data:image/png;base64,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7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQRL/G/+c//wNAn/5fp2D0CgAAAABJRU5ErkJggg==

datauri优点：
在页面添加图片不用额外上传文件了！
还有什么就不知到了
缺点：
无法缓存，每次加载页面都要载入（其实想缓存它只要用js文件复制给变量就行了，而且可以一个文件存N张图，和图片分割异曲同工啊）
浏览器支持不全面
转出来的字符串体积一般比原文件大= =。。。

demo源码[部分参考其他网站]

把图片拖到这里

[其实我发现除了图片以外还可以拖其它任何文件进来，只不过下面的预览图会裂掉另外最好不要把超过1MB的文件拉进来，不然你懂的]

PS:如果同时拖入多个文件，只操作第一个，拖入文件夹无效

Minecraft、无聊产物

Minecraft成功撸出罗小黑一只！

2013 年 1 月 27 日罗佳(博主) 10条评论

花了好长时间【一个晚上+一个晚上】才撸出了这个罗小黑~挂出来纪念一下~

原图：

luoxiaohei1
注：头上发光的是灯

这是白天的时候
luoxiaohei2
（正面）

（反面）
luoxiaohei3

总结：还像个样子。。嘴巴略残

友情撸头：BlackGlory

无聊产物

太阳君和月亮酱

2012 年 10 月 13 日罗佳(博主) 留下评论

上个例子先。。

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

单独的例子看这里：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>