要求：
1．要求画出界面，以太网帧的数据部分、源MAC地址和目的MAC地址均从界面输入；
2．计算后的校验和字段和封装后的结果可以从界面上输出；
3．生成多项式G（X）=X8+X2+X1+1；
（或者生成多项式G（X）=X32+X26+X23+X22+X16+X12+X11+X10+X8+X7+X5+X4+X2+X1+1；）
就是计算帧检测序列FCS，一个简单的算法
觉得用C写黑框框有点low，C++的MFC又不会，所以用了当年学的HTML+CSS+JS写了一个
参考代码：
<!DOCTYPE html>
<html>
<head>
<title>IEEE 802.3以太网帧封装</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ComNet1.css">
</head>
<script type="text/javascript">
//求FCS
function f( num){
var P = new Array(1,0,0,0,0,0,1,1,1);
var n = 8,len = 0;
for( var i = 1; i <= n; i++)
num *= 10;
var tmp = num;
var M = new Array();
while( tmp >= 1)
{
M[len++] = tmp%10;
tmp = parseInt(tmp/10);
}
for( var i = 0; i <= len/2; i++){
var tmp = M[i];
M[i] = M[len-1-i];
M[len-1-i] = tmp;
}
var cnt = 0,head = 0,tail = n;
while( tail < len && (tail-head) == n){
var flag = 1;
var headchange;
for( var i = head; i <= tail; i++){
var tmp;
if( M[i] == P[i-head])
tmp = 0;
else
tmp = 1;
console.log(M[i]+" "+P[i-head]+" "+tmp);
if( tmp == 1 && flag == 1){
headchange = i;
flag = 0;
M[i] = tmp;
}
else
M[i] = tmp;
}
if( !flag)
head = headchange;
if( cnt == 10)
while( tail < len)
tail++;
while( (tail-head) < n)
tail++;
cnt++;
console.log(tail+' '+head+' '+len)
}
console.log(cnt);
var ans = 0;
for( var i = head; i <= len; i++)
ans = parseInt(ans*10+parseInt(M[i]));
console.log(ans);
return M;
}
window.onload=function(){
//获得了值
var data = document.getElementById("in1");
var mudi = document.getElementById("in2");
var yuan = document.getElementById("in3");
var cdzd = document.getElementById("in4");
var submit = document.getElementById("sub");
sub.onclick=function(){
if( data != "" && yuan != "" && mudi != "")
{
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 = mudi.value;
var cell4 = oneRow.insertCell();
cell4.innerHTML = yuan.value;
var cell5 = oneRow.insertCell();
cell5.innerHTML = cdzd.value;//默认为IP包
var cell6 =oneRow.insertCell();
cell6.innerHTML = data.value;
var cell7 = oneRow.insertCell();
var tmp = data.value;
tmp = f(data.value);
cell7.innerHTML = tmp;
}
}
}
</script>
<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>
长 度 字 段
<input id="in4" type="text" name=""><br>
<button id="sub" type="button">submit</button>
</form>
</div>
<div class="content">
<table id="mytable" cellpadding="10" cellspacing="0">
<tr>
<th class="bt qdm">前导码</th>
<th class="bt djf">帧前定界符</th>
<th class="bt md">目的地址</th>
<th class="bt y">源地址</th>
<th class="bt cd">长度字段</th>
<th class="bt sj">数据字段</th>
<th class="bt jy">校验字段</th>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</content>
</body>
</html>
<!-- 00
8byte
101101
ff:ff:ff:ff:ff:ff
cc:00:0b:b8:00:00
0x0806
0x0806
12byte
11010001
01:00:0c:cc:cc:cc
cc:00:18:10:00:00
0x0800
-->
*{
margin: 0;
list-style: none;
text-align: center;
}
body{
width: 1000px;
margin: 0 auto;
margin-top: 50px;
background-image: url(1.jpg);
/*background-image: url(2.jpg);
background-image: url(3.jpg);*/
}
.in{
b/*order: 1px solid red;*/
margin: 20px;
}
.in form input{
display: inline-block;
text-align: left;
margin: 5px;
width: 200px;
height: 17px;
}
.in form #sub{
display: inline-block;
border-radius: 5px;
height: 30px;
line-height: 30px;
width: 80px;
color: gray;
background-color: white;
margin: 15px 0;
}
.content{
width: 100%;
border: 1px solid black;
}
.content table{
/*border: 1px solid red;*/
}
.content table tr .bt{
width: 114px;
border: 1px solid black;
}
最后的效果：
