<!DOCTYPE html>
<html>
<head>
<title>IEEE 802.3以太网帧封装</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="IEEEstyle.css">
<script type="text/javascript">
//CRC校验的FCS算法
function clear(data)
{
var length = data.length;
for(var i = 0; i < length; ++i)
{
data.pop();
}
}
function getCRC(arrayList){
var cc = new Array(1,0,0,0,0,0,1,1,1);//生成多项式
//末尾补0
for (var i = 0; i < 8; i++) {
arrayList = arrayList + "0";
}
var tag = 0;
var resultList = new Array(); //结果list
var tempList = new Array(); //余数缓存list
//循环开始
while (tag < arrayList.length - 8){
var arrayList1 = new Array(); //本次运算取出的前9位
//若有余数，将余数先加入待计算串
for (var i = 0; i < tempList.length; i++) {
arrayList1.push(tempList[i]);
}
clear(tempList);
//补齐9位
for (var i = tag + arrayList1.length; i < tag + cc.length; i++) {
arrayList1.push(arrayList[i]);
}
//按位异或
for (var i = 0; i < cc.length;i++){
var res = arrayList1[i]^cc[i];
if (res == 0 && tempList.length == 0)//首位0不计入余数
tag ++;
else tempList.push(res);
}
resultList = tempList;
}
//循环结束后，如果余数不足8位，则要在前面补0
if (resultList.length<8){
var temp = new Array();
for (var i = 0; i < resultList.length; i++) {
temp.push(resultList[i]);
}
clear(resultList);
for (var i = 0; i < 8 - temp.length; i++) {
resultList.push(0);
}
for (var i = 0; i < temp.length; i++) {
resultList.push(temp[i]);
}
}
console.log(resultList);
console.log(resultList.toString());
return resultList.toString();//最终的FCS校验码
}
//十进制转换为十六进制
function decimalToHex(d) {
var hex = Number(d).toString(16);
return hex;
}
//填充
function padding(data, length, flag)
{
if(data.length > length)
return data;
//flag为0为前填充，1为后填充
var dlength = data.length;
if(flag == 0)
{
for(var i = 0; i < length - dlength; ++i)
{
data = "0" + data;
}
return data;
}
else
{
for(var i = dlength; i < length; ++i)
{
data = data + "0";
}
return data;
}
}
function show(){
/*输出内容，包括前导码，帧前定界符，目的地址，源地址，长度字段，数据字段，校验字段*/
var data = document.getElementById("in1");
var aim = document.getElementById("in2");
var source = document.getElementById("in3");
//var submit = document.getElementById("sub");
if( data.value != "" && aim.value!= "" && source.value != "")
{
var tmp = String(data.value);
var all = "";
var table = document.getElementById("mytable");
var oneRow = table.insertRow();
var cell1 = oneRow.insertCell();
cell1.innerHTML = "0xAAAAAAAAAAAAAA";//前导码，这里为默认值
var cell2 = oneRow.insertCell();
cell2.innerHTML = "0xAB"; //帧前界定符，这里为默认值
var cell3 = oneRow.insertCell();
cell3.innerHTML = aim.value; //目的地址
var cell4 = oneRow.insertCell();
cell4.innerHTML = source.value; //源地址
var cell5 = oneRow.insertCell();
var length = String(decimalToHex(tmp.length)); //长度字段
length = padding(length, 4, 0); //填充长度字段
cell5.innerHTML = "0x" + length;
var cell6 =oneRow.insertCell();
console.log(data.value);
tmp = padding(tmp, 46, 1)
cell6.innerHTML = tmp; //数据字段
var cell7 = oneRow.insertCell();
var all = String(data.value);
console.log(all);
CRC = getCRC(all);
cell7.innerHTML = CRC; //校验字段
}
}
</script>
</head>
<body>
<div class="in">
<form >
以太网帧的数据部分
<input id="in1" type="text" name="">
<br>
目 的 MAC 地 址
<input id="in2" type="text" name="">
<br>
源 MAC 地 址
<input id="in3" type="text" name="">
<br>
<button id="sub" type="button" onclick="show()">submit</button>
</form>
</div>
<div class="content">
<table id="mytable" cellpadding="10" cellspacing="0">
<tr>
<th class="bt lc">前导码</th>
<th class="bt fd">帧前定界符</th>
<th class="bt aim">目的地址</th>
<th class="bt source">源地址</th>
<th class="bt length">长度字段</th>
<th class="bt data">数据字段</th>
<th class="bt verify">校验字段</th>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
