标签归档：html

佳佳工具

[Javascript]Object2HTML

留下评论

把特定格式的js对象转换成HTML元素

https://github.com/JiaJiaJiang/Object2HTML

演示对象

{_:'div',
	child:[
		{_:'button',prop:{innerHTML:'poi'},event:{'click':function(){alert('niconiconi');}}},
		{_:'br'},
		{_:'video',prop:{src:'http://www.w3school.com.cn/example/html5/mov_bbb.mp4'},attr:{controls:true}}
	]
}

结果

 

笔记

iframe元素操作

留下评论
本文所有内容均未测试，只是看着参考写出来的笔记，不保证内容的准确性，如果发现了错误请指出谢谢。

在很久很久以前(其实是忘了时间。。。)我发现iframe内部的内容是可以在iframe外面操作的。

在这之前我曾经把Glory的blog做了iframe放在我的佳佳实验室里，然后他一脸黑线，现在我终于知道是为什么了~

接下来进入正文

访问iframe元素的关键就在于要知道连接到iframe的方法，看下面

[PS：不同方法在不同浏览器里可能不可用]

继续阅读iframe元素操作 →

神奇的问题

关于元素子节点的奇怪事件

留下评论

[前言]请注意这是一只新手写的文章，请高手不要吐槽，假如可以帮我解答或更正错误请在下面留言
今天想修掉本博客的主题【3】的母主题Twenty eleven在评论数显示上的bug
[对我来说是bug，在首页或其他的文章聚合页面，每篇文章右上都会有个评论数框，在没有评论时，它就是一个框在那，非常莫名奇妙。有评论时才会显示数字。]

在这个过程中，由于包含评论数的链接没有任何id或class类,所以决定使用它带有comments-link类的父标签来获取子节点。

于是我在浏览器里先试了一下是否可以成功获取，结果出现这样的情况

20130220-004827.jpg

[吐槽]我了个去啊！是我睁眼瞎还是浏览器故意的啊！

[恢复]
很明显可以看出，在chrome开发人员工具里，父标签中除了链接没有其它任何东西，那么获取子节点的结果中前后两个是啥？

我们先来单独获取每个#text看看是啥
第一个

$(".comments-link")[0].childNodes[0]
#text
attributes: null
baseURI: "http://localhost:56964/"
childNodes: NodeList[0]
data: "↵	 "
firstChild: null
lastChild: null
length: 5
localName: null
namespaceURI: null
nextSibling: a
nodeName: "#text"
nodeType: 3
nodeValue: "↵	 "
ownerDocument: #document
parentElement: div.comments-link
parentNode: div.comments-link
prefix: null
previousSibling: null
textContent: "↵	 "
wholeText: "↵	 "
__proto__: Text

然后是第二个

$(".comments-link")[0].childNodes[2]
#text
attributes: null
baseURI: "http://localhost:56964/"
childNodes: NodeList[0]
data: "			"
firstChild: null
lastChild: null
length: 3
localName: null
namespaceURI: null
nextSibling: null
nodeName: "#text"
nodeType: 3
nodeValue: "			"
ownerDocument: #document
parentElement: div.comments-link
parentNode: div.comments-link
prefix: null
previousSibling: a
textContent: "			"
wholeText: "			"
__proto__: Text

第一个的内容看似是回车的符号【难道是换行符？
第二个是一堆tab【在电脑上记事本中选中时是一长条，所以我认为它是TAB

现在我个人得出了结论：在父子节点间的所有内容会分别成为两个文本节点[前后两个](仅个人观点，欢迎修正)

最后我想说：搞什么灰机啊！

无聊产物

太阳君和月亮酱

留下评论

上个例子先。。

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

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