首页 > 代码库 > 1、网页后退 2、瀑布流 3、上下左右的阿斯科码值 4、加密技术
1、网页后退 2、瀑布流 3、上下左右的阿斯科码值 4、加密技术
1、网页后退 /前进
<a href="javascript:history.go(-1);">后退</a>
<a href="javascript:history.go(1);">前进</a>
2、瀑布流
瀑布流是目前一种比较流行的页面布局和加载效果。百度,花瓣等一些好的网站都广泛用了这样一种效果,适用于单页面展示对内容的页面。这几天就跟着一些资料学习了一下瀑布流效果的制作。其原理是利用js动态的改变绝对定位的位置,然后对滚动条的事件监听,加载数据。现在为大家分享下JS代码,希望路过的大神多多指教。其具体实现步骤在代码注释中体现,博文最后有源代码资源,供大家免费交流学习……
HTML代码:
- <div id="main">
- <div class="List">
- <div class="box"><img src=http://www.mamicode.com/"images/0.jpg"></div>
- </div>
- <div class="List">
- <div class="box"><img src=http://www.mamicode.com/"images/1.jpg"></div>
- </div>
- <div class="List">
- <div class="box"><img src=http://www.mamicode.com/"images/2.jpg"></div>
- </div>
- <div class="List">
- <div class="box"><img src=http://www.mamicode.com/"images/3.jpg"></div>
- </div>
- <div class="List">
- <div class="box">------------刚进入页面时显示的个数--------------</div>
- </div>
css
- *{margin: 0;padding: 0;}
- #main{position: relative;}
- .List{float: left;padding: 15px 0 0 15px;}
- .box{padding: 10px;border: 1px solid #000;}
- .box img{width: 165px;height: auto;}
JS
- window.onload = function(){
- //对页面现有的数据进行排版布局
- showBox(‘main‘,‘List‘);
- //模拟,接受进来的json数据
- var dateInt={"date":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]};
- //给窗口添加滚动条添加方法
- window.onscroll=function(){
- if(checkScroll()){//调用方法,判断是否具备数据加载的条件。把数据加载到页面的尾部
- var parenet=document.getElementById("main");
- //遍历数据,且创建元素进行加载
- for(var i=0;i<dateInt.date.length;i++){
- var ListCon=document.createElement("div");//创建div
- ListCon.className=‘List‘;//添加class类名
- parenet.appendChild(ListCon);//加载到父节点
- var oBoxs=document.createElement("div");
- oBoxs.className="box";
- ListCon.appendChild(oBoxs);
- var oImg=document.createElement("img");
- oImg.src=http://www.mamicode.com/"images/"+dateInt.date[i].src;
- oBoxs.appendChild(oImg);
- }
- showBox(‘main‘,‘List‘);//对新加载的数据进行排位规格化
- }
- }
- }
- //函数功能,对第一个容器参数下的第二个className容器参数进行排列规划
- function showBox (parenet,clsName) {//一个父级元素。一个className,排列主方法执行体
- var oParenet=document.getElementById(parenet);
- var oBoxs=getByClass(oParenet,clsName);//listBox集合数组,调用的getByclass函数。得到返回数组
- //计算屏幕能有几列,屏幕的宽度/每一个List的宽度
- var oBoxW = oBoxs[0].offsetWidth;//list,width
- var clos=Math.floor(document.documentElement.clientWidth/oBoxW);//math.floor取整数,求出列数
- //设置主容器的宽度,和对齐方式
- oParenet.style.cssText=‘width:‘+oBoxW*clos+‘px;margin:0 auto‘;
- //储存第一列所有高度,判断最低的高度,让第二行的第一个元素排列到最低的那一个,
- //然后把最低的一个高度改变成最低高度+它下方的高度,则,最低的一个高度改变,依次遍历
- var AllBox = [];//保存第一行高度的数组
- for(var i=0;i<oBoxs.length;i++){
- if (i<clos) {
- AllBox.push(oBoxs[i].offsetHeight);//传入数据
- }else{
- var minH=Math.min.apply(null,AllBox);//math.min不能直接接受数组,需要用apply方法,把数组转化成字符串
- var index=getMinIndex(AllBox,minH);//调用getMainIndex方法,求出第一行中,高度最小的index值
- //定义第i个box的样式,以及位置
- oBoxs[i].style.position=‘absolute‘;
- oBoxs[i].style.top=minH+‘px‘;
- oBoxs[i].style.left=oBoxW*index+‘px‘;
- //改变最低点的大小。从而动态的不断的去获取目前最低点
- AllBox[index]+=oBoxs[i].offsetHeight;
- }
- }
- }
- //寻找这个id下的所有的className,返回一个className的数组
- function getByClass (parenet,clsName) {//传入一个父元素,一个className。
- var sameClassArr=new Array(),//用来保存class为box的元素
- chiled=parenet.getElementsByTagName(‘*‘);//父级元素下的获取所有元素
- for(var i=0;i<chiled.length;i++){//遍历判断哪些元素的className为传入的clsName
- if(chiled[i].className==clsName){
- sameClassArr.push(chiled[i]);//传入函数数组
- }
- }
- return sameClassArr;//返回数组
- }
- //传入一个数组,和一个最小值,返回这个最小值的角标index
- function getMinIndex (arr,min) {
- for(var i=0;i<arr.length;i++){
- if (arr[i]==min) {
- return i;
- }
- }
- }
- //检查书否具备数据加载的函数,返回布尔值
- function checkScroll () {
- var parenet=document.getElementById("main");
- var oBoxs=getByClass(parenet,‘List‘);
- //最后一个单元元素距离页面顶端的高度,再加自身高度的一半
- var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
- //滚动条滚动的的高度,混杂模式||标准模式
- var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
- //页面的高度,可视区域
- var WHeight=document.body.clientHeight || document.documentElement.clientHeight;
- return (lastBoxH<scrollTop+WHeight)?true:false;
- }
3、上下左右的ASC码值
4、 加密技术
本文一共介绍了七种方法:
一:最简单的加密解密
二:转义字符"\"的妙用
三:使用Microsoft出品的脚本编码器Script Encoder来进行编码 (自创简单解码)
四:任意添加NUL空字符(十六进制00H) (自创)
五:无用内容混乱以及换行空格TAB大法
六:自写解密函数法
七:错误的利用 (自创)
在做网页时(其实是网页木马呵呵),最让人烦恼的是自己辛辛苦苦写出来的客户端IE运行的JAVASCRIPT代码常常被别人轻易的拷贝,实在让自己的心里有点不是滋味,要知道自己写点东西也挺累的......^*^
但我们也应该清楚地认识到因为JAVASCRIPT代码是在IE中解释执行,要想绝对的保密是不可能的,我们要做的就是尽可能的增大拷贝者复制的难度,让他知难而退(但愿~!~),下面我结合自己这几年来的实践,及个人研究的心得,和大家一起来探讨一下网页中JAVASCRIPT代码的加密解密技术。
以加密下面的JAVASCRIPT代码为例:
<SCRIPT LANGUAGE="JavaScript">
alert("黑客防线");
</SCRIPT>
一:最简单的加密解密
大家对于JAVASCRIPT函数escape()和unescape()想必是比较了解啦(很多网页加密在用它们),分别是编码和解码字符串,比如例子代码用escape()函数加密后变为如下格式:
alert%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B
如何?还看的懂吗?当然其中的ASCII字符"alert"并没有被加密,如果愿意我们可以写点JAVASCRIPT代码重新把它加密如下:
%61%6C%65%72%74%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B
呵呵!如何?这次是完全都加密了!
当然,这样加密后的代码是不能直接运行的,幸好还有eval(codeString)可用,这个函数的作用就是检查JavaScript代码并执行,必选项 codeString 参数是包含有效 JavaScript 代码的字符串值,加上上面的解码unescape(),加密后的结果如下:
<SCRIPT LANGUAGE="JavaScript">
var code=unescape("%61%6C%65%72%74%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B");
eval(code)
</SCRIPT>
是不是很简单?不要高兴,解密也就同样的简单,解密代码都摆给别人啦(unescape())!呵呵
二:转义字符"\"的妙用
大家可能对转义字符""不太熟悉,但对于JavaScript提供了一些特殊字符如:\n (换行)、 \r (回车)、\’ (单引号 )等应该是有所了解的吧?其实"\"后面还可以跟八进制或十六进制的数字,如字符"a"则可以表示为:"\141"或"\x61"(注意是小写字符"x"),至于双字节字符如汉字"黑"则仅能用十六进制表示为"\u9ED1"(注意是小写字符"u"),其中字符"u"表示是双字节字符,根据这个原理例子代码则可以表示为:
八进制转义字符串如下:
<SCRIPT LANGUAGE="JavaScript">
eval("\141\154\145\162\164\50\42\u9ED1\u5BA2\u9632\u7EBF\42\51\73")
</SCRIPT>
十六进制转义字符串如下:
<SCRIPT LANGUAGE="JavaScript">
eval("\x61\x6C\x65\x72\x74\x28\x22\u9ED1\u5BA2\u9632\u7EBF\x22\x29\x3B")
</SCRIPT>
这次没有了解码函数,因为JavaScript执行时会自行转换,同样解码也是很简单如下:
<SCRIPT LANGUAGE="JavaScript">
alert("\x61\x6C\x65\x72\x74\x28\x22\u9ED1\u5BA2\u9632\u7EBF\x22\x29\x3B")
</SCRIPT>
就会弹出对话框告诉你解密后的结果!
三:使用Microsoft出品的脚本编码器Script Encoder来进行编码
工具的使用就不多介绍啦!我是直接使用JavaScript调用控件Scripting.Encoder完成的编码!代码如下:
<SCRIPT LANGUAGE="JavaScript">
var Senc=new ActiveXObject("Scripting.Encoder");
var code=‘<SCRIPT LANGUAGE="JavaScript">\r\nalert("黑客防线");\r\n<\/SCRIPT>‘;
var Encode=Senc.EncodeScriptFile(".htm",code,0,"");
alert(Encode);
</SCRIPT>
编码后的结果如下:
<SCRIPT LANGUAGE="JScript.Encode">#@~^FgAAAA==@#@&ls DD`J黑客防线r#p@#@&FgMAAA==^#~@</SCRIPT>
够难看懂得吧?但相应的解密工具早已出来,而且连解密网页都有!因为其解密网页代码过多,我就不多说拉!给大家介绍一下我独创的解密代码,如下:
<SCRIPT LANGUAGE="JScript.Encode">
function decode()
alert(decode.toString());
</SCRIPT>
咋样?够简单吧?它是原理是:编码后的代码运行前IE会先对其进行解码,如果我们先把加密的代码放入一个自定义函数如上面的decode()中,然后对自定义函数decode调用toString()方法,得到的将是解码后的代码!
如果你觉得这样编码得到的代码LANGUAGE属性是JScript.Encode,很容易让人识破,那么还有一个几乎不为人知的window对象的方法execScript(),其原形为:
window.execScript( sExpression, sLanguage )
参数:
sExpression: 必选项。字符串(String)。要被执行的代码。
sLanguage : 必选项。字符串(String)。指定执行的代码的语言。默认值为 Microsoft JScript
使用时,前面的"window"可以省略不写!
利用它我们可以很好的运行编码后的JavaScript代码,如下:
<SCRIPT LANGUAGE="JavaScript">
execScript("#@~^FgAAAA==@#@&ls DD`J黑客防线r#p@#@&FgMAAA==^#~@","JScript.Encode")
</SCRIPT>
你可以利用方法二对其中的""号内的字符串再进行编码,使得"JScript.Encode"以及编码特征码"#@~^"不出现,效果会更好!
四:任意添加NUL空字符(十六进制00H)
一次偶然的实验,使我发现在HTML网页中任意位置添加任意个数的"空字符",IE照样会正常显示其中的内容,并正常执行其中的JavaScript 代码,而添加的"空字符"我们在用一般的编辑器查看时,会显示形如空格或黑块,使得原码很难看懂,如用记事本查看则"空字符"会变成"空格",利用这个原理加密结果如下:(其中显示的"空格"代表"空字符")
<S C RI P T L ANG U A G E
=" J a v a S c r i p t ">
a l er t (" 黑 客 防 线") ;
< / SC R I P T>
如何?是不是显得乱七八糟的?如果不知道方法的人很难想到要去掉里面的"空字符"(00H)的!
五:无用内容混乱以及换行空格TAB大法
在JAVASCRIPT代码中我们可以加入大量的无用字符串或数字,以及无用代码和注释内容等等,使真正的有用代码埋没在其中,并把有用的代码中能加入换行、空格、TAB的地方加入大量换行、空格、TAB,并可以把正常的字符串用""来进行换行,这样就会使得代码难以看懂!如我加密后的形式如下:
<SCRIPT LANGUAGE="JavaScript">
"xajgxsadffgds";1234567890
625623216;var $=0;alert//@$%%&*()(&(^%^
//cctv function//
(//hhsaasajx xc
/*
asjgdsgu*/
"黑
客
防线"//ashjgfgf
/*
@#%$^&%$96667r45fggbhytjty
*/
//window
)
;"#@$#%@#432hu";212351436
</SCRIPT>
至少如果我看到这样的代码是不会有心思去分析它的,你哪?
六:自写解密函数法
这个方法和一、二差不多,只不过是自己写个函数对代码进行解密,很多VBS病毒使用这种方法对自身进行加密,来防止特征码扫描!下面是我写的一个简单的加密解密函数,
加密代码如下(详细参照文件"加密.htm"):
<SCRIPT LANGUAGE="JavaScript">
function compile(code)
{
var c=String.fromCharCode(code.charCodeAt(0)+code.length);
for(var i=1;i<code.length;i++){
c+=String.fromCharCode(code.charCodeAt(i)+code.charCodeAt(i-1));
}
alert(escape(c));
}
compile(’alert("黑客防线");’)
</SCRIPT>
运行得到加密结果为:o%CD%D1%D7%E6%9CJ%u9EF3%uFA73%uF1D4%u14F1%u7EE1Kd
相应的加密后解密的代码如下:
<SCRIPT LANGUAGE="JavaScript">
function uncompile(code)
{
code=unescape(code);
var c=String.fromCharCode(code.charCodeAt(0)-code.length);
for(var i=1;i<code.length;i++){
c+=String.fromCharCode(code.charCodeAt(i)-c.charCodeAt(i-1));
}
return c;
}
eval(uncompile("o%CD%D1%D7%E6%9CJ%u9EF3%uFA73%uF1D4%u14F1%u7EE1Kd"));
</SCRIPT>
七:错误的利用
利用try{}catch(e){}结构对代码进行测试解密,虽然这个想法很好(呵呵,夸夸自己),因为实用性不大,我仅给个例子
<SCRIPT LANGUAGE="JavaScript">
var a=’alert("黑客防线");’;
var c="";
for(var i=0;i<a.length;i++){
c+=String.fromCharCode(a.charCodeAt(i)^61);}
alert(c);
//上面的是加密代码,当然如果真正使用这个方法时,不会把加密写上的
//现在变量c就是加密后的代码
//下面的函数t()先假设初始密码为0,解密执行,
//遇到错误则把密码加1,然后接着解密执行,直到正确运行
var d=c; //保存加密后的代码
var b=0; //假定初始密码为0
t();
function t(){
try{eval(c);}
catch(e){
c="";
for(var i=0;i<d.length;i++){
c+=String.fromCharCode(d.charCodeAt(i)^b);}
b+=1;
t();
//setTimeout("t()",0);
}
}
</SCRIPT>
1、网页后退 2、瀑布流 3、上下左右的阿斯科码值 4、加密技术