Saber 酱的抱枕

Fly me to the moon

07/11
2016
软件

QWQ~Tickeys:按键时发出冒泡声/打字机声/机械键盘声~等!

如题。官方网站,全桌面平台哟~!
以下是所有的声音种类:

Tickeys' sounds

Tickeys' sounds


补充:Windows 版本 和 OS X 版本所携带的声音种类有所不同。
Tickeys in Windows

Tickeys in Windows

原本是想弄出机械键盘的声音的,结果发现最喜欢的居然是冒泡声 23333

QWQ~Tickeys:按键时发出冒泡声/打字机声/机械键盘声~等!

07/11
2016
学习

HTML5中的跨文档消息传递

我们可以使用HTML5的postMessage()方法进行跨文档的消息传递,不会触发跨域问题。

例如,我们可以在父窗口中向iframe里的页面或通过window.open()打开的页面发送消息(不仅限于文本数据),这两个页面不必是同源的(跨域可以,不跨域也可以)都不会触发跨域问题。

例如我在当前页面加载了下面的iframe页面:

<iframe src="http://127.0.0.1/t/index.html" id="f1"></iframe>

我们想要向它发送消息,该怎么做呢?

想要实现通信,首先得在接收页面里添加对消息的处理功能。postMessage()发送到页面时会触发message事件,我们在子页面绑定这个事件:

window.addEventListener("message",function(event){
	if (event.origin == "http://www.saber.love"){//确保发送消息的域是已知的域
		alert(event.origin+"说:"+event.data);//处理接收到的数据
		// event.source.postMessage("Received!", "http://www.saber.love");//可选:向来源窗口发送回执
	}
},false);

这样当消息发送到子页面时,子页面就能够处理了。

当触发message事件时,有一些有用的信息:
event.origin:发送消息的文档所在的域;
event.data:postMessage()发送过来的消息;
event.source:发送消息的文档的window 对象的代理。

之后我们在父页面向子页面发送消息,代码如下:

var iframeWindow = document.getElementById("f1").contentWindow;
iframeWindow.postMessage("hello~", "http://127.0.0.1"); //第二个参数指定【接收方】必须是指定的域

子页面接收到消息后就会进行处理:

到这里一个简单的通信就完成了。

这个例子中的通信是单向的,如果要做成子页面也向父页面返回消息,那么父页面也得绑定message事件才行。

不过我有个疑惑,子窗口似乎不能主动用postMessage向父窗口发送消息。只能在接收消息后趁机发送吗?

HTML5中的跨文档消息传递

07/10
2016
学习

向表单的select控件中添加选项

select控件就是下拉选择框,之前我没怎么试过对它进行js操作。今天看到有个add方法,可以向select控件里添加选项(option),记录一下。

var selectE=document.createElement("select");
selectE.id="selectE";
document.body.appendChild(selectE);

var optionE=document.createElement("option");
optionE.text="optionE";
selectE.add(optionE);

上例演示了创建一个select控件并像其中添加了一个选项。在需要使用JavaScript创建控件时很有用。

add语法:

selectObject.add(option,before)

option就是option元素,before是个数字,指示新选项插入在第几个选项之前。

向表单的select控件中添加选项

07/8
2016
学习

简单的仿一下商务通效果

<img src="/f/head15.jpg" id="stwRight">
<img src="/f/saber%E8%A1%A8%E6%83%85_1_1.jpg" id="stwCenter">
<img src="/f/x.png" id="swtClose">
<style type="text/css">
	#LRdiv0,#LRdiv1{display:none !important;}
	#stwRight{position: fixed;right: 0;top: 60px;display: none;z-index: 999;cursor: pointer;}
	#stwCenter{position: fixed;display: none;width: 400px;height: 350px;left: 50%;margin-left: -200px;top: 50%;margin-top: -175px;z-index: 999;cursor: pointer;}
	#swtClose{position: fixed;display: none;width: 24px;height: 24px;left: 50%;margin-left: 175px;top: 50%;margin-top: -175px;z-index: 9999;cursor: pointer;}
</style>
<script type="text/javascript">
	window.onload=function(){
		function showSwtC(){
			document.getElementById("stwCenter").style.display="block";
			document.getElementById("swtClose").style.display="block";
		}
		function showSwtR(){
			document.getElementById("stwRight").style.display="block";
		}
		function hideSwtC(){
			document.getElementById("stwCenter").style.display="none";
			document.getElementById("swtClose").style.display="none";
		}
		function hideSwtR(){
			document.getElementById("stwRight").style.display="none";
		}
		function openSwt(){
			LR_HideInvite();openZoosUrl();return false;
		}

		showSwtR();
		setTimeout(function(){
			hideSwtR();
			showSwtC();
		},4000);
		document.getElementById("stwRight").onclick=function(){
			openSwt();
		}
		document.getElementById("stwCenter").onclick=function(){
			hideSwtC();
			showSwtR();
			openSwt();
			setTimeout(function(){
				hideSwtR();
				showSwtC();
			},8000);
		}
		document.getElementById("swtClose").onclick=function(){
			hideSwtC();
			showSwtR();
			setTimeout(function(){
				hideSwtR();
				showSwtC();
			},8000);
		}
	}
</script>

侧边浮窗没做关闭按钮。

因为openSwt()里用了商务通自带的函数openZoosUrl(),所以页面上还是得加载商务通代码。如果把openSwt()改成直接用网址跳转,则不用加载商务通代码。


上面商务通不仅样式是我们自己做的,显示、隐藏的逻辑也需要自己定义。实际上对于有商务通代码的页面,我们可以直接利用商务通自身的函数来“偷梁换柱”,打开我们自己的商务通图片。

var sTimer = setInterval(function(){
	if(typeof LR_showInviteDiv != "undefined"){
		window.LR_showInviteDiv = function(){	//此处改写了商务通显示邀请框的函数	
			showSwt();
		}
		clearInterval(sTimer);
	}
},100);

LR_showInviteDiv是显示邀请框的函数,如果页面上有这个函数,则改写它,让它执行showSwt,也就是我们自己定义的一个函数,显示自己的邀请框。

恩……我对这这个代码研究了好久,发现这个办法并没有多方便,浪费时间。唯一的优点是不用写css来隐藏商务通的邀请框了。另外改写商务通的这个函数会导致商务通客户端发送邀请失败。麻烦。

简单的仿一下商务通效果

07/7
2016
其他

闲聊 关于理想

小学时一个女生问我,你的理想是什么?

十年过去了,我至今仍然无法回答。

理想是没有的,有的只是妄想。例如想和自己喜欢的人在一起什么的。

因为我是死宅,所以这注定是妄想。

不知道各位的理想又是什么呢?来聊一聊吧

闲聊 关于理想

07/7
2016
学习

JavaScript表单序列化

平时我们表单的提交多数是用action来指定提交到的文件,但这样会产生页面的刷新。用ajax提交可以避免刷新,但是需要我们自己组织要提交的数据。这就是表单序列化了。

jQuery有个serialize方法来做表单序列化,语法如下:

$(selector).serialize();

序列化之后,表单里需要提交的值会被组织成字符串,形如:

"name=124&company=baidu.com&fav=1,2,3"

如果里面有汉字之类,会自动进行url编码。表单序列化完全模拟了浏览器提交时的数据,这样我们就可以用ajax来提交表单了。

如一个id为“yy”的表单,它的提交的地址是"/plus/diy.php",提交按钮id是submit。那么表单序列化并提交的代码如下:

$("#submit").click(function(event) {
	event.preventDefault();
	$.ajax({
		type: "post",
		url: "/plus/diy.php",
		data: $("#yy").serialize(),
		success: function() {
			alert("信息提交成功。");
		}
	})
})

注意用preventDefault()阻止浏览器默认事件(就是跳转到action页面,即使你没写action属性也会跳转的)。

后台对提交数据的处理和用action提交时的数据是一致的。
Read More →

JavaScript表单序列化

07/6
2016
ACG

魔装学园H×H epub下载

魔装学园H×H epub下载

《魔装学园H×H》原本是轻小说来着,不过之前我不知道这部小说。这次7月它出了TV动画,我在b吧看到了关于它的讨论,感觉这……其实……就是……R18……好……吗……

帖子里有老司机分享了epub格式的6卷(我也不知道6卷有没有完结),我下载下来看了看……这年头真是什么都敢改TV动画了,老老实实加入魔穗7月里番合集不好吗?

度盘链接 提取码: mfr3

电脑上看epub小说可以使用chrome应用Readium
Read More →

魔装学园H×H epub下载