用于在页面上通过js附加样式表文本
标签归档：html
[NPM PACKAGE]floatingpreviewimg 浮动预览图
用于在页面上的小图旁边显示一个大的浮动预览图
NPM: https://www.npmjs.com/package/floatingpreviewimg
GitHub: https://github.com/JiaJiaJiang/html-FloatingPreviewImg
[NPM PACKAGE]inputadviser 输入建议
此包封装了使用<datalist>标签为input提供输入建议的功能，仅需要提供一个获取建议数据的方法即可。
NPM: https://www.npmjs.com/package/inputadviser
GitHub: https://github.com/JiaJiaJiang/html-InputAdviser
[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：不同方法在不同浏览器里可能不可用]
关于元素子节点的奇怪事件
[前言]请注意这是一只新手写的文章，请高手不要吐槽，假如可以帮我解答或更正错误请在下面留言
今天想修掉本博客的主题【3】的母主题Twenty eleven在评论数显示上的bug
[对我来说是bug，在首页或其他的文章聚合页面，每篇文章右上都会有个评论数框，在没有评论时，它就是一个框在那，非常莫名奇妙。有评论时才会显示数字。]
在这个过程中，由于包含评论数的链接没有任何id或class类,所以决定使用它带有comments-link类的父标签来获取子节点。
于是我在浏览器里先试了一下是否可以成功获取，结果出现这样的情况
[吐槽]我了个去啊！是我睁眼瞎还是浏览器故意的啊！
[恢复]
很明显可以看出，在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>
