Saber 酱的抱枕

Fly me to the moon

01/9
2017
学习

使用js的insertAdjacentHTML方法插入元素

以往我们插入、移动DOM元素经常是使用appendChild和insertBefore方法。

appendChild:在父级元素内追加新元素。
insertBefore:在父级元素内的某个元素之前插入新元素。

但是这两个方法的参数只能接收元素对象,不能使用字符形式的html代码,而且它们插入元素的位置也不够灵活。我们可以使用insertAdjacentHTML方法来更方便的插入元素。

insertAdjacentHTML可以将字符串形式的html代码(需要能解析为DOM元素)解析为一个节点,并将其追加到指定元素的指定位置。

insertAdjacentHTML方法的语法如下:

element.insertAdjacentHTML(position, text);

position参数有以下四个值(都是字符串形式):

beforebegin:在元素的开始位置之前插入。
beforeend:在元素的结束位置之前插入。
afterbegin:在元素的开始位置之后插入。
afterend:在元素的结束位置之后插入。

text参数则是字符串形式的html代码。

根据position参数,我们可以将新元素插入到到指定元素的四个位置:

使用js的insertAdjacentHTML方法插入元素

示例:

<div id="a">
	<div></div>
</div>
<script type="text/javascript" defer>
	var a=document.querySelector("#a");
	a.insertAdjacentHTML("afterbegin","<a href='' >xxx</a");
</script>

结果如下:

<div id="a">
	<a href="">xxx</a>
	<div></div>
</div>

insertAdjacentHTML方法的兼容性表现良好,主流浏览器均已支持。我们也可以如下语句来检查浏览器是否支持方法:

document.documentElement.insertAdjacentHTML

此外,由于insertAdjacentHTML是根据位置插入元素的,因此它不能把新元素插入到img、input等单标签元素里(想这么做的人才是有毛病吧)。

相关文档:《https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML》


ps:与insertAdjacentHTML系列“同一系列”的还有insertAdjacentElement方法和insertAdjacentText方法。

insertAdjacentElement方法除了第二个参数是DOM节点(不能是字符串形式)外和insertAdjacentHTML方法都一样。

insertAdjacentText方法则只接收字符串格式的参数,并输出为字符串。其他地方也和insertAdjacentHTML方法一样。

使用js的insertAdjacentHTML方法插入元素

01/8
2017
学习

bilibili上使用的一个下雪效果

今天fgo开了圣诞活动,bilibili上的活动页面上下着雪,于是我把代码扒了下来。

这个下雪的js依赖jquery,实际使用中感觉效果一般←_←

<body style="background: #000;">
    <canvas class="snow-canvas" speed="1" interaction="true" size="8" count="40" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false"></canvas>
    <script src="//apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
    <script src="//static.biligame.net/fgo/event_santa/pc/js/snow.js?v=d659f803.js"></script>
    <script>
    	$(".snow-canvas").snow();
    </script>
    <style>
    	.snow-canvas { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
    </style>
</body>

demo如下:

效果不是很好……不过如果像活动页面那样,有背景图片什么的,瑕疵应该不会很明显。

bilibili上使用的一个下雪效果

01/8
2017
软件

chrome浏览器缓存查看器——ChromeCacheView

chrome浏览器缓存查看器——ChromeCacheView

ChromeCacheView是一款chrome浏览器缓存查看工具,启动之后它就会自动读取chrome的缓存,并列出所有已缓存的文件。使用它可以方便的对缓存内容进行排序、查找、导出等操作,非常好用。在软件内可以随时右键刷新,不用重新打开软件即可读取最新的缓存内容。

导出文件的话是点工具栏第三个按钮,然后选择保存目录并导出。支持一次导出多个文件。

下载最新版本

官方网站

在官网里,我们可以看到这个公司还开发了IE、opera、firefox浏览器的缓存查看器,简直惊了

chrome浏览器缓存查看器——ChromeCacheView

01/5
2017
软件

2345图片批量转换器

今晚我想把电脑上一些png图片都转换文jpg格式,减少文件体积。我现在的看图软件XnView以前批量转换png的时候蓝屏过数次,现在我是不敢再用它转换了,只好临时抱佛脚再去网上找转换器。

现在我用的是2345图片批量转换器,感觉还算可以,能满足常见的转换要求。

从上面的链接下载下来的2345图片批量转换器是绿色版的,它的界面如下图所示。

2345图片批量转换器

2345图片转换器支持添加来自不同文件夹的文件,转换后可以把图片分别保存到该图片所在的原文件夹。

先在左上角添加或拖入要转换的文件/文件夹,再在左下角设置图片尺寸,再在右上角选择转换后的格式和向量设置,最后选择右下角的转换后操作。确认无误后就可以开始转换了。
(左下角的使用完整版什么的别点,点了就安装2345好压了)

2345图片批量转换器

不过2345图片转换器也有个缺陷,比如你有一个文件夹,里面有jpg和png格式的图片,只想转换png的。这个转换器没这个功能,我们只能先把要转换的png格式的图片筛选出来(可以使用资源管理器搜索或者everything搜索),再把搜索出来的png文件选中,拖到2345图片转换器里。

另外这2345图片转换器转换完成后会自动关闭。

顺便求大家推荐其他好用的图片转换器~
Read More →

2345图片批量转换器