分类目录归档:笔记

iframe元素操作

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

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

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

接下来进入正文

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

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

继续阅读iframe元素操作

memcache用法笔记

PS:虽然本文是我写的但是我还没有经过实验。。。如果发现了错误请留言让我修正
PS:[ ]中的都为可有可无的内容
ps:第一次给文章加这么多样式。。感慨万千吖

Memcache是一个内存存储方案[多简洁的描述啊。。]

在PHP官方有比较全面的说明文档

http://www.php.net/manual/zh/book.memcache.php【中文】

这里就来简单写一下他的数据操作部分的用法

创建一个Mencache对象

$memobj=new Memcache;
//使用函数形式的时候不需要创建这个对象

然后就可以以对象的形式对他进行操作

继续阅读memcache用法笔记

响应式布局练习

今天我稍微试了试响应式布局的操作方法来为iti做准备,于是就拿我的博客开刀了。
想了一想,这个博客的主题本身就是响应式的了,可以非常好的适应小屏幕,于是我就不再做小屏幕的响应了,于是我做了更大屏幕的响应。

级别[我做的]:800~1299,1300~1460,1461~1880,1881~+∞

由于只是练习,所以我就拿多说评论框做实验了。

目标:让多说评论框在宽度超过1300的屏幕上从文章底部跑到右边,文章靠到左边。
[请掠过代码先看下面]。 继续阅读响应式布局练习

视频手动载入js

俺花了好长时间,用我这不熟练的技术好不容易做了个带满缺点的js
那么这货的用处就是屏蔽掉flash这样的东西【当然如果修改一下js可以屏蔽掉body里的任何标签
先来个示例【有视频有真相
embed标签的例子(无视频源)video标签的例子(同上)

其实屏蔽了以后看起来都是一样的。。

这货的功能:点击以后再载入,防止意外流量损失或带宽?占用
这就是个鲜明的例子181
里面装满了视频,这样就可以解决打开这个网页一下载入很多视频的问题了

原理:让div插队再干掉背后的原标签并给这个div添加可以给自己内部写入被杀掉标签的事件↓

objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);//插队到原标签前面
objarray[i].parentNode.removeChild(objarray[i]);//干掉原标签

特点:插队的div使用源元素的宽高和定位【本来想把z-index也算进去的,时间不够就不做了↓

//一堆if用来判断是否有这些属性
if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);}
if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);}
if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);}
if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);}
if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);}

全代码↓

var changevideos=function(){
var target=new Object;
function findtag(tag) {
return document.getElementsByTagName(tag);
}
function getwidth(obj){
if(obj.width){return obj.width;}else if(obj.style.width){return obj.style.width;}else{return false;}
}
function getheight(obj){
if(obj.height){return obj.height;}else if(obj.style.height){return obj.style.height;}else{return false;}
}
function getposition(obj){
return obj.style.position?obj.style.position:false;
}
function getright(obj){
return obj.style.right?obj.style.right: false;
}
function getleft(obj){
return obj.style.left?obj.style.left:false;
}
function changeinner(html){
target=event.srcElement?event.srcElement:event.target;
target.innerHTML=html;
}
function run(objarray){
for (var i = 0; i < objarray.length; i++) { var aimhtml = objarray[i].outerHTML; var tmpdiv=document.createElement("div"); if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);} if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);} if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);} if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);} if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);} tmpdiv.innerHTML='<div class="hideitemzhanwei" style="width:'+getwidth(objarray[i])+'px;height:'+getheight(objarray[i])+'px;"><center><h2 style=\'color:#fff;\'>为了防止流量计费用户的流量损失<br>此处已被自动屏蔽</h2><span style="position:absolute;bottom:2px;right:2px;">点击恢复</span></center></div>';//填上填充显示的内容
//tmpdiv.style.overflow="hidden";
tmpdiv.setAttribute('onClick','changevideos.changeinner(\''+aimhtml+'\')');
tmpdiv.style.display="inline-block";
objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);
objarray[i].parentNode.removeChild(objarray[i]);
}
}
function changehideneededtag() {
var tmpstyle=document.createElement("style");
tmpstyle.innerHTML=".hideitemzhanwei{position:relative;background-color:#66ccff;color:#fff;cursor:pointer;}";
document.getElementsByTagName("head")[0].appendChild(tmpstyle);
var a;
if(a=findtag("embed")){
run(a);}
if(a=findtag("object")){
run(a);}
if(a=findtag("video")){
run(a);}
}
changehideneededtag();
}
changevideos.changeinner=function(html){
target=event.srcElement?event.srcElement:event.target;
target.innerHTML=html;
}

没时间了所以还有些可能出错的地方没做错误处理,以后来补上

[javascript]document.createElement()

正在SB的制作找喷的底栏中,为了装到B的效果,所以要做成一个完整的可以对底栏进行操作的对象,自然就要创建标签了。
假如用innerHTML的话,会出现各种苦逼,why就自己思考吧。。
所以使劲百度,找到了document.createElement()这个东西
它的作用:创建标签
可创建标签:所有(IE请另当别论)
用法

document.createElement("div")
document.createElement("a")
document.createElement("table")
document.createElement("header")
.......

 

创建以后会返回一个对象,所以创建的时候要用个变量(对象)来把返回值接住,像这样

var f_u_*_k=document.createElement("div")

然后创建好的标签不会自己显示出来【浏览器表示迷路了<( ̄▽ ̄)> 哇哈哈…】,所以我们要给它指一下路
这里要用到appendChild()和insertBefore() 两个。。函数?

//先找个要操作的对象,比如一个div标签的对象【youjiecao】
youjiecao.appendChild(f_u_*_k) //功能:把创建的标签插入youjiecao的内部底端
youjiecao.insertBefore(f_u_*_k) //功能:【不知道,欢迎大家来填补】

这样就可以创建很多可以控制的标签而不用每个标签都设置id啦!
(>^ω^<)

[javascript]offsetWidth和offsetHeight

之前一直在为没法知道一个不确定宽高元素的实际宽高而困扰,结果发现用style.width和style.height获取的都是在元素里定义的值
偶然发现了以前经常见到但是又怕麻烦所以没去接触的offsetWidth和offsetHeight,这两个可以获取一个元素在页面中占用的实际尺寸,不管有没有定义。
比如

<div id="1">12eddcvg42few</div>
<script>
alert(document.getElementById("1").offsetWidth);
</script>

弹出警告窗显示627(也就是现在div由于里面的文字而撑开来以后所占的宽度)

给wordpress加上了个代码显示函数

原理:文档加载完成以后运行相关函数修改所有code标签

首先要做一件事,把加载文章的php的一个函数修改一下,阻止其给code标签内自动把\n换行替换成<br>标签(这个问题苦了我好久吖╮(╯3╰)╭),函数名wpautop,此函数位于/wp-includes/formatting.php中,找到这个函数里的
`$pee = preg_replace_callback(‘/&lt;(script|style).*?&lt;\/\\1&gt;/s’, ‘_autop_newline_preservation_helper’, $pee);`
这一行,括号里加上|code,变成这样:
`$pee = preg_replace_callback(‘/<(script|style|code).*?<\/\\1>/s’, ‘_autop_newline_preservation_helper’, $pee);`
【这要怎么理解呢。。应该就算是不进行修改的标签列表吧】
然后一切就都方便了,给onLoad加上自己的code处理函数。
以下是我的code处理函数:

function tolist(string,  width)  {
	if  (width  ==  "")  {
		width  =  "auto";
	}
	var codelist  =  '<div style=\'background-color:#fff;overflow:hidden;width:'  +  width  +  ';max-width:'  +  width  +  ';word-wrap:break-word;word-break:break-all;word-wrap:break-all;display:block;margin:0px;font-family: "微软雅黑";\' ><div style="color:#CCCCCC;font-size:13px;background-color:#fff;width:100%;height:20px;font-weight:900;">Code:</div><ol style="margin:0px;background-color:#E7E7E7;border:1px solid #CCCCCC;padding-left:50px;color:#00CC33;">';
	//string=string.replace(/&/g,"&amp;");
	string  =  string.replace(/</g,  "&lt;");
	string  =  string.replace(/>/g,  "&gt;");
	string  =  string.replace(/ /g,  "$nbsp;");
	string  =  string.replace(/\'/g,  "&apos;");
	string  =  string.replace(/\"/g,  "&quot;");
	string  =  string.replace(/<br\/>/g,  '<span style="color:#999999;"><br/></span>');
	var code  =  string.split("\n");
	for  (var i  =  0;; i++)  {
		if  (code[i]  ==  ""  ||  code[i]  ==  " ")  {
			code[i]  =  null;
		} 
		else  {
			break;
		}
	}
	for  (var i  =  code.length; i  >  0; i--)  {
		if  (code[i]  ==  ""  ||  code[i]  ==  " ")  {
			code[i]  =  null;
		} 
		else  {
			break;
		}
	}
	for  (var i  =  0; i  <  code.length; i++)  {
		if  (code[i]  ==  null)  {} 
		else  {
			codelist  =  codelist  +  '<li style="font-size:13px;"><div style="border-left:1px solid #999;display:block;margin-right:0px;background-color:#fff;width:auto;min-width:60px;position:relative;color:#000;">'  +  code[i]  +  ' </div></li>';
		}
	}
	codelist  =  codelist  +  '</ol></div>';
	return codelist;
}
function findcodetag()  {
	return document.getElementsByTagName("code");
}
function changecodetag()  {
	var a  =  findcodetag();
	for  (var i  =  0; i  <  a.length; i++)  {
		var code  =  a[i].innerHTML;
		a[i].innerHTML  =  tolist(code);
	}
}

 

然后onLoad加上changecodetag()

暂时没做出高亮,而且还有些小小的问题。就先摆在这里了。
另外谁可以告诉我最后总有一个空行是肿么回事捏?
后期可能有改动,文章就不改了,详见源代码。

做了个元素拖动实验

iframe框引用demo:

原始demo地址:demo.luojia.me/moveelement/

代码:

<style>
body{ margin:0px; }
</style>
<script src="jquery.js">
</script>
<div id="1" style="position:fixed; border:1px solid #000;height:200px;width:400px; text-align:center; line-height:200px;background-color:#69F;cursor:move">
点着拖我
</div>
<script>
clickpointx  =  0;
clickpointy  =  0;
divx  =   (window.innerWidth  -  400)  /  2;
divy  =   (window.innerHeight  -  200)  /  2;
$("#1").css("left",  divx);
$("#1").css("top",  divy);
$("#1").mousedown(function(event)  {
	$(document).unbind("mouseup");
	$(document).unbind("mousemove");
	$("#1").unbind("animate");
	event.preventDefault();
	var clickpointx  =  event.pageX;
	var clickpointy  =  event.pageY;
	$(document).mouseup(function(event)  {
		$(document).unbind("mouseup");
		$(document).unbind("mousemove");
		$("#1").animate({
			top:  divy
		},
		500);
		$("#1").animate({
			left:  divx
		},
		500);
	});
	$(document).mousemove(function(event)  {
		event.preventDefault();
		var pointx  =  event.pageX  -  clickpointx;
		var pointy  =  event.pageY  -  clickpointy;
		$("#1").css("left",  pointx  +  divx);
		$("#1").css("top",  pointy  +  divy);
	});
});
</script>

 

这里来打个Win32应用程序最基本代码的笔记

此代码直接丢进VC或VS或C-Free或其他什么win下的编译器就可以直接编译运行,无需冷藏。。(在VS下需把编码调一下)

 
#include "windows.h" 
LRESULT CALLBACK MainWProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) 
{ 
switch (message) 
{ 
case WM_PAINT: // 窗口客户区需要重画 
{ 
HDC hdc; 
PAINTSTRUCT ps; 
char szText[] = "这神马程序"; // 使无效的客户区变的有效,并取得设备环境句柄 
hdc =BeginPaint (hwnd, &ps) ; // 显示文字 
TextOut(hdc, 250, 10, szText, strlen(szText)); 
EndPaint(hwnd, &ps); 
return 0; 
} 
case WM_DESTROY: // 正在销毁窗口 
// 向消息队列投递一个WM_QUIT消息,促使GetMessage函数返回0,结束消息循环 
PostQuitMessage(0); 
return 0 ; 
} 
// 将我们不处理的消息交给系统做默认处理 
return DefWindowProc(hwnd, message, wParam, lParam); 
}
int APIENTRY WinMain(HINSTANCE hInstance,HINSTANCE hPrevInstance,LPSTR lpCmdLine,int nCmdShow) 
{ 
TCHAR szClassName[] = "MainWClass"; 
WNDCLASSEX wndclass; // 用描述主窗口的参数填充WNDCLASSEX结构 
wndclass.cbSize = sizeof(wndclass); // 结构的大小 
wndclass.style = CS_HREDRAW|CS_VREDRAW; // 指定如果大小改变就重画 
wndclass.lpfnWndProc = MainWProc; // 窗口函数指针 
wndclass.cbClsExtra = 0; // 没有额外的类内存 
wndclass.cbWndExtra = 0; // 没有额外的窗口内存 
wndclass.hInstance = hInstance; // 实例句柄 
wndclass.hIcon = LoadIcon(NULL,IDI_APPLICATION); // 使用预定义图标 
wndclass.hCursor = LoadCursor(NULL, IDC_ARROW); // 使用预定义的光标 
wndclass.hbrBackground = (HBRUSH)GetStockObject(WHITE_BRUSH); // 使用白色背景画刷 
wndclass.lpszMenuName = NULL; // 不指定菜单 
wndclass.lpszClassName = szClassName ; // 窗口类的名称 
wndclass.hIconSm = NULL; // 没有类的小图标 
// 注册这个窗口类 
RegisterClassEx(&wndclass); // 创建主窗口 
HWND hwnd = CreateWindowEx( 
0, // dwExStyle,扩展样式 
szClassName, // lpClassName,类名 
"喵~", // lpWindowName,标题 
WS_OVERLAPPEDWINDOW, // dwStyle,窗口风格 
NULL, // X,初始 X 坐标 
NULL, // Y,初始 Y 坐标 
1000, // nWidth,宽度 
500, // nHeight,高度 
NULL, // hWndParent,父窗口句柄 
NULL, // hMenu,菜单句柄 
hInstance, // hlnstance,程序实例句柄 
NULL) ; // lpParam,用户数据 
// 显示窗口,刷新窗口客户区 
ShowWindow(hwnd, nCmdShow); 
UpdateWindow(hwnd); // 从消息堆中取出消息 
MSG msg; 
while(GetMessage(&msg, NULL, 0, 0)) 
{ 
// 转化键盘消息 
TranslateMessage(&msg); // 将消息发送到相应的窗口函数 
DispatchMessage(&msg); } // 当GetMessage返回0时程序结束 
return msg.wParam; 
}

这么就写完了

ajax那啥的通用框架

ajax虾米的最有爱了,用起来也很方便。。【第一次写长文,出错请留言来让我改正】

var xmlhttp; //创建一个Request对象先
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST或者GET","请求的脚本文件",true或false【不加引号,true是异步,false是同步】);          //异步通俗的说就是请求时浏览器接着干其他事,同步就是浏览器要等服务器处理完了才接着做其他事
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) //当海枯石烂的时候
{
//这里就可以做ajax接收后行为的事了,然后xmlhttp.responseText是从服务器扔回来的数据。
}
}
xmlhttp.send("这里是发送出去的数据");

继续阅读ajax那啥的通用框架