每日分享

Posted 2020-09-27 Iamgod`

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每日分享相关的知识，希望对你有一定的参考价值。

一、网页后退

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

二、瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

<body>
<div id="container">
    <div class="box">
        <div class="boximg">
            <img src="img/1.jpeg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/7.gif">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/8.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/9.jpg">
        </div>
    </div>

</div>

</body>

<style>
*{
    margin: 0px;
    padding: 0px;
}
/*将主容器的布局方式设置为相对布局*/
#contianer{
    position: relative;
}

.box{
    padding: 5px;
    float: left;
}
/*将承载图片的容器定制颜色及边框大小和圆角*/
.boximg{
    padding: 5px;
    box-shadow: 0 0 5px #ccc;
    border: 1px solid #cccccc;
    border-radius: 5px;
}
/*定制图片尺寸*/
.boximg img{
    width: 250px;
    height: auto;
}
</style>

window.onload = function(){
    waterFlow("container", "box");
}
function waterFlow(parent, chirld){
    var wparent = document.getElementById(parent);//获取父级div, 最外级容器
    var allArr = getAllChirld(wparent,chirld);//获取到所有的class为box的容器div
    var wscreenWidth = document.documentElement.clientWidth;//获取屏幕宽度
    var wchirldWidth = wparent.getElementsByTagName("*");//获取所有的标签
    var num = Math.floor(wscreenWidth/wchirldWidth[0].offsetWidth);//这是一个Math算法, 目的是将小数转变为整数,
    // 从而可以知道每行最多容纳几张图片
    wparent.style.cssText = ‘width:‘+wchirldWidth[0].offsetWidth*num+‘px;margin:0 auto‘;//固定每行摆放个数 和上下左右边距
    //获得每行的最小高度
    getMinHeightOfCols(allArr, num);
}
function getAllChirld(parent,classname){
    //获取所有的标签
    var wchirld = parent.getElementsByTagName("*");
    //创建数组
    var chirldArr = [];
    //遍历wchirld, 将其中className等于classname(传进来的参数)相同的标签放入数组chirldArr中
    for(var i = 0; i<wchirld.length; i++){
        if(wchirld[i].className==classname){
            //因为是位push所以没放进去一个, 都是在数组的最后一个
            chirldArr.push(wchirld[i]);
        }
    }
    //返回该数组
    return chirldArr;
}
function getMinHeightOfCols(chirdArr, num){
    //创建数组, 用来盛放每一行的高度
    var onlyOneColsArr = [];
    for(var i = 0; i<chirdArr.length; i++){

        if(i<num){
            //num为传进来的参数, 即为每行放图片的张数, 此步骤的目的是为了将第一行每张图片的高度遍历出来存放如新数组
            onlyOneColsArr[i]=chirdArr[i].offsetHeight;
        } else {
            //当大于每行存放的图片个数时进入该方法, Math.min.apply这个方法是为了得到数组中的最小值
            var minHeightOfCols = Math.min.apply(null, onlyOneColsArr);
            //此方法的目的是为了得到最小高度图片的下表, 也就是在每行的第几张, 具体方法见下面
            var minHeightOfindex = getminIndex(onlyOneColsArr, minHeightOfCols);
            //定义布局方式为绝对布局
            chirdArr[i].style.position = "absolute";
            //得到下一行图片应放的高度
            chirdArr[i].style.top = minHeightOfCols + "px";
            //得到下一行图片应放于那个位置
            chirdArr[i].style.left = chirdArr[minHeightOfindex].offsetLeft + "px";
            //将两张图片高度相加得到一个新的高度用来进行下一次的计算
            onlyOneColsArr[minHeightOfindex] += chirdArr[i].offsetHeight;
        }
    }

}
//此方法是为了进行最小高度下标的确定
function getminIndex(onlyOneColsArr, min){
    //遍历传进来的高度数组
        for(var i in onlyOneColsArr){
            //如果高度等于最小高度, 返回i即为该图片下标
            if(onlyOneColsArr[i] == min){
                return i;
            }
        }
}

三、keycode对照表

字母和数字键的键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘上的键的键码值(keyCode)				功能键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

控制键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	\\|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	‘"	222

多媒体键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
音量加	175
音量减	174
停止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171

四、加密技术

一：最简单的加密解密

对于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("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">rnalert("《Sweet》");rn</SCRIPT>‘;
var Encode=Senc.EncodeScriptFile(".htm",code,0,"");
alert(Encode);
</SCRIPT>

编码后的结果如下：

<SCRIPT LANGUAGE="JScript.Encode">#@~^FgAAAA==@#@&ls DD`JSweetr#[email protected]#@&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("#@~^[email protected]#@&ls DD`J黑客防线r#[email protected]#@&FgMAAA==^#[email protected]","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 (" S w e e 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*/
"Sweet"//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++)
alert(escape(c));
}
compile(‘alert("《Sweet》");‘)
</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++)
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("《Sweet》");‘;
var c="";
for(var i=0;i<a.length;i++)

alert(c);

//上面的是加密代码，当然如果真正使用这个方法时，不会把加密写上的
//现在变量c就是加密后的代码

//下面的函数t()先假设初始密码为０，解密执行，
//遇到错误则把密码加１，然后接着解密执行，直到正确运行

var d=c; //保存加密后的代码
var b=0; //假定初始密码为0
t();

function t()catch(e){
c="";
for(var i=0;i<d.length;i++)
b+=1;
t();
//setTimeout("t()",0);
}
}
</SCRIPT>

以上是关于每日分享的主要内容，如果未能解决你的问题，请参考以下文章