zoukankan      html  css  js  c++  java

  • 1、网页后退 2、瀑布流 3、上下左右的阿斯科码值 4、加密技术

    1、网页后退 /前进 

    <a href="javascript:history.go(-1);">后退</a>
    <a href="javascript:history.go(1);">前进</a>

     

    2、瀑布流  

               瀑布流是目前一种比较流行的页面布局和加载效果。百度，花瓣等一些好的网站都广泛用了这样一种效果，适用于单页面展示对内容的页面。这几天就跟着一些资料学习了一下瀑布流效果的制作。其原理是利用js动态的改变绝对定位的位置，然后对滚动条的事件监听，加载数据。现在为大家分享下JS代码，希望路过的大神多多指教。其具体实现步骤在代码注释中体现，博文最后有源代码资源，供大家免费交流学习……

    HTML代码：

     

    [html] view plain copy
     
     print?
    1. <div id="main">  
    2.     <div class="List">  
    3.         <div class="box"><img src="images/0.jpg"></div>  
    4.     </div>  
    5.     <div class="List">  
    6.         <div class="box"><img src="images/1.jpg"></div>  
    7.     </div>  
    8.     <div class="List">  
    9.         <div class="box"><img src="images/2.jpg"></div>  
    10.     </div>  
    11.     <div class="List">  
    12.         <div class="box"><img src="images/3.jpg"></div>  
    13.     </div>  
    14.     <div class="List">  
    15.         <div class="box">------------刚进入页面时显示的个数--------------</div>  
    16.     </div>  

    css

     

     

    [css] view plain copy
     
     print?
    1. *{margin: 0;padding: 0;}  
    2. #main{position: relative;}  
    3. .List{float: left;padding: 15px 0 0 15px;}  
    4. .box{padding: 10px;border: 1px solid #000;}  
    5. .box img{ 165px;height: auto;}  

    JS

     

     

    [javascript] view plain copy
     
     print?
    1. window.onload = function(){  
    2.     //对页面现有的数据进行排版布局  
    3.     showBox('main','List');  
    4.     //模拟，接受进来的json数据  
    5.     var dateInt={"date":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]};  
    6.     //给窗口添加滚动条添加方法  
    7.     window.onscroll=function(){  
    8.         if(checkScroll()){//调用方法，判断是否具备数据加载的条件。把数据加载到页面的尾部  
    9.             var parenet=document.getElementById("main");  
    10.             //遍历数据,且创建元素进行加载  
    11.             for(var i=0;i<dateInt.date.length;i++){  
    12.                 var ListCon=document.createElement("div");//创建div   
    13.                 ListCon.className='List';//添加class类名  
    14.                 parenet.appendChild(ListCon);//加载到父节点  
    15.   
    16.                 var oBoxs=document.createElement("div");  
    17.                 oBoxs.className="box";  
    18.                 ListCon.appendChild(oBoxs);  
    19.   
    20.                 var oImg=document.createElement("img");  
    21.                 oImg.src="images/"+dateInt.date[i].src;  
    22.                 oBoxs.appendChild(oImg);  
    23.             }  
    24.             showBox('main','List');//对新加载的数据进行排位规格化  
    25.   
    26.          }  
    27.           
    28.     }  
    29. }  
    30.   
    31. //函数功能，对第一个容器参数下的第二个className容器参数进行排列规划  
    32. function showBox (parenet,clsName) {//一个父级元素。一个className，排列主方法执行体  
    33.     var oParenet=document.getElementById(parenet);  
    34.     var oBoxs=getByClass(oParenet,clsName);//listBox集合数组,调用的getByclass函数。得到返回数组  
    35.     //计算屏幕能有几列，屏幕的宽度/每一个List的宽度  
    36.     var oBoxW = oBoxs[0].offsetWidth;//list,width  
    37.     var clos=Math.floor(document.documentElement.clientWidth/oBoxW);//math.floor取整数，求出列数  
    38.     //设置主容器的宽度,和对齐方式  
    39.     oParenet.style.cssText=''+oBoxW*clos+'px;margin:0 auto';  
    40.   
    41.     //储存第一列所有高度,判断最低的高度，让第二行的第一个元素排列到最低的那一个，  
    42.     //然后把最低的一个高度改变成最低高度+它下方的高度，则，最低的一个高度改变，依次遍历  
    43.     var AllBox = [];//保存第一行高度的数组  
    44.     for(var i=0;i<oBoxs.length;i++){  
    45.         if (i<clos) {  
    46.             AllBox.push(oBoxs[i].offsetHeight);//传入数据  
    47.         }else{  
    48.             var minH=Math.min.apply(null,AllBox);//math.min不能直接接受数组，需要用apply方法，把数组转化成字符串  
    49.   
    50.             var index=getMinIndex(AllBox,minH);//调用getMainIndex方法，求出第一行中，高度最小的index值  
    51.             //定义第i个box的样式，以及位置  
    52.             oBoxs[i].style.position='absolute';  
    53.             oBoxs[i].style.top=minH+'px';  
    54.             oBoxs[i].style.left=oBoxW*index+'px';  
    55.             //改变最低点的大小。从而动态的不断的去获取目前最低点  
    56.             AllBox[index]+=oBoxs[i].offsetHeight;  
    57.         }  
    58.     }             
    59. }  
    60.   
    61. //寻找这个id下的所有的className,返回一个className的数组  
    62. function getByClass (parenet,clsName) {//传入一个父元素，一个className。  
    63.     var sameClassArr=new Array(),//用来保存class为box的元素  
    64.         chiled=parenet.getElementsByTagName('*');//父级元素下的获取所有元素  
    65.   
    66.     for(var i=0;i<chiled.length;i++){//遍历判断哪些元素的className为传入的clsName  
    67.         if(chiled[i].className==clsName){  
    68.             sameClassArr.push(chiled[i]);//传入函数数组  
    69.         }  
    70.     }  
    71.     return sameClassArr;//返回数组  
    72. }  
    73. //传入一个数组，和一个最小值，返回这个最小值的角标index  
    74. function getMinIndex (arr,min) {  
    75.     for(var i=0;i<arr.length;i++){  
    76.         if (arr[i]==min) {  
    77.             return i;  
    78.         }  
    79.     }  
    80. }  
    81.   
    82. //检查书否具备数据加载的函数，返回布尔值  
    83. function checkScroll () {  
    84.     var parenet=document.getElementById("main");  
    85.     var oBoxs=getByClass(parenet,'List');  
    86.     //最后一个单元元素距离页面顶端的高度，再加自身高度的一半  
    87.     var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);  
    88.     //滚动条滚动的的高度,混杂模式||标准模式  
    89.     var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;  
    90.     //页面的高度，可视区域  
    91.     var WHeight=document.body.clientHeight || document.documentElement.clientHeight;  
    92.     return (lastBoxH<scrollTop+WHeight)?true:false;  
    93. }  

     

    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提供了一些特殊字符如： （换行）、 （回车）、’ （单引号 ）等应该是有所了解的吧？其实""后面还可以跟八进制或十六进制的数字，如字符"a"则可以表示为："141"或"x61"（注意是小写字符"x"），至于双字节字符如汉字"黑"则仅能用十六进制表示为"u9ED1"（注意是小写字符"u"），其中字符"u"表示是双字节字符，根据这个原理例子代码则可以表示为： 

    　　八进制转义字符串如下:  
    <SCRIPT LANGUAGE="JavaScript">  
    eval("1411541451621645042u9ED1u5BA2u9632u7EBF425173")  
    </SCRIPT> 

    十六进制转义字符串如下:  
    <SCRIPT LANGUAGE="JavaScript">  
    eval("x61x6Cx65x72x74x28x22u9ED1u5BA2u9632u7EBFx22x29x3B")  
    </SCRIPT> 

    　　这次没有了解码函数，因为JavaScript执行时会自行转换，同样解码也是很简单如下： 

    <SCRIPT LANGUAGE="JavaScript">  
    alert("x61x6Cx65x72x74x28x22u9ED1u5BA2u9632u7EBFx22x29x3B")  
    </SCRIPT> 

    　　就会弹出对话框告诉你解密后的结果！ 

    　　三：使用Microsoft出品的脚本编码器Script Encoder来进行编码 

    　　工具的使用就不多介绍啦！我是直接使用JavaScript调用控件Scripting.Encoder完成的编码！代码如下： 

    <SCRIPT LANGUAGE="JavaScript">  
    var Senc=new ActiveXObject("Scripting.Encoder");  
    var code='<SCRIPT LANGUAGE="JavaScript"> alert("黑客防线"); </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()先假设初始密码为０，解密执行，  
    //遇到错误则把密码加１，然后接着解密执行，直到正确运行 

    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>
  • 相关阅读:
    Beetl模板 [记录]
    wx 小程序开发 [记录]
    高德定位获取省市区[记录]
    vue 学习记录 [记录]
    正则表达+验证 [记录]
    倒计时60s短信 [记录]
    @media [记录]
    JSON + Ajax [记录]
    Webstorm [记录]
    JQ 组合代码 [记录]
  • 原文地址：https://www.cnblogs.com/lzy666/p/7128703.html
Copyright © 2011-2022 走看看