一、三次握手原則 二、什麼是正則表達式以及做用 三、匹配身份證和電話號碼的正則表達式 四、什麼是運動

時間  2019-12-11
標籤 三次 握手 原則 什麼 正則 表達式 以及 匹配 身份證 電話號碼 運動 欄目 正則表達式 简体版
原文   原文鏈接

一、三次握手原則javascript

Http協議三次握手過程  

TCP(Transmission Control Protocol)　傳輸控制協議css

TCP是主機對主機層的傳輸控制協議，提供可靠的鏈接服務，採用三次握手確認創建一個鏈接:html

位碼即tcp標誌位,有6種標示:SYN(synchronous創建聯機) ACK(acknowledgement 確認) PSH(push傳送) FIN(finish結束) RST(reset重置) URG(urgent緊急)java

Sequence number(順序號碼) Acknowledge number(確認號碼)css3

TCP/IP基礎－－TCP三次握手

第一次握手：主機A發送位碼爲syn＝1,隨機產生seq number=1234567的數據包到服務器，主機B由SYN=1知道，A要求創建聯機；git

第二次握手：主機B收到請求後要確認聯機信息，向A發送ack number=(主機A的seq+1),syn=1,ack=1,隨機產生seq=7654321的包github

第三次握手：主機A收到後檢查ack number是否正確，即第一次發送的seq number+1,以及位碼ack是否爲1，若正確，主機A會再發送ack number=(主機B的seq+1),ack=1，主機B收到後確認seq值與ack=1則鏈接創建成功。正則表達式

完成三次握手，主機A與主機B開始傳送數據。json

 

 


在TCP/IP協議中，TCP協議提供可靠的鏈接服務，採用三次握手創建一個鏈接。 
第一次握手：創建鏈接時，客戶端發送syn包(syn=j)到服務器，並進入SYN_SEND狀態，等待服務器確認； 
第二次握手：服務器收到syn包，必須確認客戶的SYN（ack=j+1），同時本身也發送一個SYN包（syn=k），即SYN+ACK包，此時服務器進入SYN_RECV狀態； 第三次握手：客戶端收到服務器的SYN＋ACK包，向服務器發送確認包ACK(ack=k+1)，此包發送完畢，客戶端和服務器進入ESTABLISHED狀態，完成三次握手。 完成三次握手，客戶端與服務器開始傳送數據.服務器

 

實例:

IP 192.168.1.116.3337 > 192.168.1.123.7788: S 3626544836:3626544836
IP 192.168.1.123.7788 > 192.168.1.116.3337: S 1739326486:1739326486 ack 3626544837
IP 192.168.1.116.3337 > 192.168.1.123.7788: ack 1739326487,ack 1

第一次握手：192.168.1.116發送位碼syn＝1,隨機產生seq number=3626544836的數據包到192.168.1.123,192.168.1.123由SYN=1知道192.168.1.116要求創建聯機;

第二次握手：192.168.1.123收到請求後要確認聯機信息，向192.168.1.116發送ack number=3626544837,syn=1,ack=1,隨機產生seq=1739326486的包;

第三次握手：192.168.1.116收到後檢查ack number是否正確，即第一次發送的seq number+1,以及位碼ack是否爲1，若正確，192.168.1.116會再發送ack number=1739326487,ack=1，192.168.1.123收到後確認seq=seq+1,ack=1則鏈接創建成功。


二、什麼是正則表達式以及做用

1.正則表達式只適合匹配文本字面，不適合匹配文本意義：像匹配url，email這種純文本的字符就很好，但好比匹配多少範圍到多少範圍的數字，若是你這個範圍很複雜的話用正則就很麻煩。或者匹配html，這個是不少人常常遇到的，寫一個複雜匹配html的正則很麻煩，不如使用針對特定意義的處理器來處理（好比寫語法分析器，dom分析器等）

2.容易引發性能問題：像.*這種貪婪匹配符號很容易形成大量的回溯，性能有時候會有上百萬倍的降低，編寫好的正則表達式要對正則引擎執行方式有很清楚的理解才能夠

3.正則的替換功能較差：甚至沒有基本的截取字符串或者把首字母改變大小寫的功能，這對於url重寫引擎有時候是致命的影響

可是也有優勢：只要熟練應用正則表達式，並且匹配的目標是純文本，那麼相比於寫分析器來講，正則能夠更快速的完成工做。還有在捕獲字符串的能力，正則也能夠很好的完成工做，好比截取url的域名或者其餘的內容等等
三、匹配身份證和電話號碼的正則表達式

身份證號（18位，最後一位爲數字或字母x(大小寫都容許)，沒有對出生日期的年月日作限制）：
/^\d{17}[\dxX]$/
手機號（11位，第一位爲1，第二位可能爲三、五、七、八、9）：
/^1[35789]\d{9}$/
若是不限制手機號第二位數字的話就是：/1\d{10}/


四、什麼是運動

 

物體運動原理：經過改變物體的位置，而發生移動變化。

方法：

1.運動的物體使用絕對定位 
2.經過改變定位物體的屬性（left、right、top、bottom）值來使物體移動。例如向右或左移動可使用offsetLeft（offsetRight）來控制左右移動。

步驟：

一、開始運動前，先清除已有定時器 （由於：是連續點擊按鈕，物體會運動愈來愈快,形成運動混亂）
二、開啓定時器，計算速度
三、把運動和中止隔開（if/else),判斷中止條件，執行運動

一.定時器

在javascritp中，有兩個關於定時器的專用函數，它們是： 

1.倒計定時器：timename=setTimeout("function();",delaytime);
2.循環定時器：timename=setInterval("function();",delaytime); 

　　function()是定時器觸發時要執行的是事件的函數，能夠是一個函數，也能夠是幾個函數，或者javascript的語句也能夠，單要用;隔開；delaytime則是間隔的時間，以毫秒爲單位。 

　　倒計時定時器就是在指定時間後觸發事件，而循環定時器就是在間隔時間到來時反覆觸發事件，其區別在於：前者只是做用一次，然後者則不停地做用。 

　　倒計時定時器通常用於頁面上只須要觸發一次的的狀況，好比點擊某按鈕後頁面在必定時間後跳轉到相應的站點，也能夠用於判斷一個瀏覽者是否是你的站點上的「老客」，若是不是，你就能夠在5秒或者10秒後跳轉到相應的站點，而後告訴他之後再來能夠在某個地方按某一個按鈕就能夠快速進入。 

　　循環定時器通常用於站點上須要從復執行的效果，好比一個javascript的滾動條或者狀態欄，也能夠用於將頁面的背景用飛雪的圖片來表示。這些事件須要隔一段時間運行一次。 

　　有時候咱們也想去掉一些加上的定時器，此時能夠用clearTimeout(timename) 來關閉倒計時定時器，而用clearInterval(timename)來關閉循環定時器。

二.運動研究

1.運動：勻速運動（讓物體動起來）

對定時器的使用
給DIV加絕對定位
offsetLeft

問題：到達某個特定位罝停符
解決：作判斷，符合條件時關掉定時器(存定時器timer)
速度變慢(通常不動時間,而是改數字-速度)
用變量存速度

問題：取7時，offsetLeft沒有等於300的時候,div停不下來 
解決:>=300 //停在 301

問題：到300後點擊按鈕還繼續走
緣由：點擊按鈕,執行函數,開定時器(執行當前函數一至少執行一次) 
解決:加else (沒有到達目標以前才執行)

問題：連續點擊，速度變快
緣由：每點擊一次就開一個定時器，點擊幾回就有幾個定時器同時工做 
解決：保證每次只有一個定時器工做,先cearlnterval ()

示例1,

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8" >
<title>分享到</title>
<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
window.onload= function ()
{
   var oDiv=document.getElementById( 'div1' );
   
   oDiv.onmouseover= function ()
   {
     startMove(0);
   };
   oDiv.onmouseout= function ()
   {
     startMove(-150);
   };
};
 
var timer= null ;
 
function startMove(iTarget)
{
   var oDiv=document.getElementById( 'div1' );
   
   clearInterval(timer);
   timer=setInterval( function (){
     var speed=0;
     
     if (oDiv.offsetLeft>iTarget)
     {
       speed=-10;
     }
     else
     {
       speed=10;
     }
     
     if (oDiv.offsetLeft==iTarget)
     {
       clearInterval(timer);
     }
     else
     {
       oDiv.style.left=oDiv.offsetLeft+speed+ 'px' ;
     }
   }, 30);
}
</script>
</head>
 
<body>
<div id= "div1" >
   <span>分享到</span>
</div>
</body>
</html>

效果以下：

示例2,淡入淡出：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8" >
<title>淡入淡出</title>
<style>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
window.onload= function ()
{
   var oDiv=document.getElementById( 'div1' );
   
   oDiv.onmouseover= function ()
   {
     startMove(100);
   };
   oDiv.onmouseout= function ()
   {
     startMove(30);
   };
};
 
var alpha=30;
var timer= null ;
 
function startMove(iTarget)
{
   var oDiv=document.getElementById( 'div1' );
   
   clearInterval(timer);
   timer=setInterval( function (){
     var speed=0;
     
     if (alpha<iTarget)
     {
       speed=10;
     }
     else
     {
       speed=-10;
     }
     
     if (alpha==iTarget)
     {
       clearInterval(timer);
     }
     else
     {
       alpha+=speed;
       
       oDiv.style.filter= 'alpha(opacity:' +alpha+ ')' ;
       oDiv.style.opacity=alpha/100;
     }
   }, 30);
}
</script>
</head>
 
<body>
<div id= "div1" ></div>
</body>
</html>

效果以下：

勻速運動的中止條件

距離足夠近

示例3,勻速運動的中止條件：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8" >
<title>勻速運動的中止條件</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
</style>
<script>
var timer= null ;
 
function startMove(iTarget)
{
   var oDiv=document.getElementById( 'div1' );
   
   clearInterval(timer);
   timer=setInterval( function (){
     var speed=0;
     
     if (oDiv.offsetLeft<iTarget)
     {
       speed=7;
     }
     else
     {
       speed=-7;
     }
     
     if (Math.abs(iTarget-oDiv.offsetLeft)<=7)
     {
       clearInterval(timer);
       
       oDiv.style.left=iTarget+ 'px' ;
     }
     else
     {
       oDiv.style.left=oDiv.offsetLeft+speed+ 'px' ;
     }
   }, 30);
}
</script>
</head>
 
<body>
<input type= "button" value= "到100" onclick= "startMove(100)" />
<input type= "button" value= "到300" onclick= "startMove(300)" />
<div id= "div1" ></div>
<div id= "div2" ></div>
<div id= "div3" ></div>
</body>
</html>

2.變速運動（緩衝運動）

逐漸變慢,最後中止 
距離越遠速度越大 
速度有距離決定
速度=(目標值-當前值)/縮放係數 
若是沒有縮放係數t速度太大,瞬間到達終點.沒有過程

問題：並無真正到達300
緣由：速度只剩0.9 //像素是屏幕可以顯示的最/J庫位，並不會四捨五入掉
Math.ceil ()向上取整
Math.floor ()向下取整

問題：向左走，又差一塊--Math.floor ()
判斷：三目 speed=speed>0 ? Math.ceil ( speed ): Math.floor ( speed )

示例,緩衝運動：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8" >
<title>緩衝運動</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
</style>
<script>
function startMove()
{
   var oDiv=document.getElementById( 'div1' );
   setInterval( function (){
     var speed=(300-oDiv.offsetLeft)/10;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     
     oDiv.style.left=oDiv.offsetLeft+speed+ 'px' ;
     
     document.title=oDiv.offsetLeft+ ',' +speed;
   }, 30);
}
</script>
</head>
 
<body>
<input type= "button" value= "開始運動" onclick= "startMove()" />
<div id= "div1" ></div>
<div id= "div2" ></div>
</body>
</html>

效果以下：

3.多物體運動

多個div ,鼠標移入變寬
運動框架傳參obj,知道讓哪一個物體動起來
用到緩衝必定要取整

問題：div沒運動回去 //清除前一個定時器
緣由：只有一個定時器
解決：加物體上的定時器，使每一個物體都有一個定時器。定時器做爲物體屬性

多個div淡入淡出
首先關閉物體上的定時器
經驗：多物體運動框架全部東西都不能共用

問題：不是由於定時器,而是由於alpha
解決：做爲屬性附加到物體上 /不以變量形式存在

offset 的 bug

加border變寬

offsetWith並非真正的width ,它獲取的是盒模型尺寸 
解決：躲着 寬度扔到行間,parselnt ( oDiv.style.width )

進一步解決： getStyle ( obj, name ) currentStyle , getComputedStyle 
加border ,只要offset就有問題 去掉offset

示例,多物體運動：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8" >
<title>無標題文檔</title>
<style>
div {width:100px; height:50px; background:red; margin:10px; border:10px solid black;}
</style>
<script>
window.onload= function ()
{
   var aDiv=document.getElementsByTagName( 'div' );
   
   for ( var i=0;i<aDiv.length;i++)
   {
     aDiv[i].timer= null ;
     
     aDiv[i].onmouseover= function ()
     {
       startMove( this , 400);
     };
     
     aDiv[i].onmouseout= function ()
     {
       startMove( this , 100);
     };
   }
};
 
function startMove(obj, iTarget)
{
   clearInterval(obj.timer);
   obj.timer=setInterval( function (){
     var speed=(iTarget-obj.offsetWidth)/6;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     
     if (obj.offsetWidth==iTarget)
     {
       clearInterval(obj.timer);
     }
     else
     {
       obj.style.width=obj.offsetWidth+speed+ 'px' ;
     }
   }, 30);
}
</script>
</head>
 
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

效果以下：

4.任意值運動

任意值運動的單位分爲透明度和px。

px單位的任意值

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8" >
<title>無標題文檔</title>
<style>
div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; font-size:14px;}
</style>
<script>
window.onload= function ()
{
   var oDiv1=document.getElementById( 'div1' );
   oDiv1.onmouseover= function (){startMove( this , 'height' , 400);};
   oDiv1.onmouseout= function (){startMove( this , 'height' , 200);};
   
   var oDiv2=document.getElementById( 'div2' );
   
   oDiv2.onmouseover= function (){startMove( this , 'width' , 400);};
   oDiv2.onmouseout= function (){startMove( this , 'width' , 200);};
   
   var oDiv3=document.getElementById( 'div3' );
   oDiv3.onmouseover= function (){startMove( this , 'fontSize' , 50);};
   oDiv3.onmouseout= function (){startMove( this , 'fontSize' , 14);};
   
   var oDiv4=document.getElementById( 'div4' );
   oDiv4.onmouseover= function (){startMove( this , 'borderWidth' , 100);};
   oDiv4.onmouseout= function (){startMove( this , 'borderWidth' , 10);};
};
 
function getStyle(obj, name)
{
   if (obj.currentStyle){ return obj.currentStyle[name];}
   else { return getComputedStyle(obj, false )[name];}
}
 
function startMove(obj, attr, iTarget)
{
   clearInterval(obj.timer);
   obj.timer=setInterval( function (){
     var cur=parseInt(getStyle(obj, attr));
     
     var speed=(iTarget-cur)/6;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     
     if (cur==iTarget)
     {
       clearInterval(obj.timer);
     }
     else
     {
       obj.style[attr]=cur+speed+ 'px' ;
     }
   }, 30);
}
</script>
</head>
 
<body>
<div id= "div1" >變高</div>
<div id= "div2" >變寬</div>
<div id= "div3" >safasfasd</div>
<div id= "div4" ></div>
</body>
</html>

效果以下：

透明度的任意值，須要作判斷：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
判斷
var cur=0
if ( attr== 'opacity ' ){
cur=parseFloat ( getStyle ( obj, attr)) *100
} else {
 
}
設置樣式判斷
if ( attr== 'opacity ' ){
obj.style.fiIter = 'alpha ( opacity: ' ( cur+speed ) + ')'
obj.style.opacity= ( cur+speed ) /100
} else {
 
}

5.鏈式運動

多出來的一個參數，只有傳進去的時候才調用
鼠標移入變寬，結束以後彈出abc
先橫向展開.再以向展開
鼠標移出,先變回不透明，變矮，變窄

三.封裝運動框架(源碼下載：https://github.com/jingwhale/jsmove/blob/master/move.js)

基於以上的分析與總結，封裝運動框架move.js以下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function getStyle(obj, name)
{
   if (obj.currentStyle)
   {
     return obj.currentStyle[name];
   }
   else
   {
     return getComputedStyle(obj, false )[name];
   }
}
 
function startMove(obj, json, fnEnd)
{
   clearInterval(obj.timer);
   obj.timer=setInterval( function (){
     var bStop= true ;    //假設：全部值都已經到了
     
     for ( var attr in json)
     {
       var cur=0;
       
       if (attr== 'opacity' )
       {
         cur=Math.round(parseFloat(getStyle(obj, attr))*100);
       }
       else
       {
         cur=parseInt(getStyle(obj, attr));
       }
       
       var speed=(json[attr]-cur)/6;
       speed=speed>0?Math.ceil(speed):Math.floor(speed);
       
       if (cur!=json[attr])
         bStop= false ;
       
       if (attr== 'opacity' )
       {
         obj.style.filter= 'alpha(opacity:' +(cur+speed)+ ')' ;
         obj.style.opacity=(cur+speed)/100;
       }
       else
       {
         obj.style[attr]=cur+speed+ 'px' ;
       }
     }
     
     if (bStop)
     {
       clearInterval(obj.timer);
             
       if (fnEnd)fnEnd();
     }
   }, 30);
}

move.js運動框架基本知足如今網頁上全部動畫的需求（不包括css3）。

四.應用應用

1，完成以下效果：

js代碼以下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script src= "move.js" ></script>
<script>
window.onload= function ()
{
   var oDiv=document.getElementById( 'play' );
   var aBtn=oDiv.getElementsByTagName( 'ol' )[0].getElementsByTagName( 'li' );
   var oUl=oDiv.getElementsByTagName( 'ul' )[0];
   
   var now=0;
   for ( var i=0;i<aBtn.length;i++)
   {
     aBtn[i].index=i;
     aBtn[i].onclick= function ()
     {
       now= this .index;
       tab();
     };
   }
   
   function tab()
   {
     for ( var i=0;i<aBtn.length;i++)
     {
       aBtn[i].className= '' ;
     }
     aBtn[now].className= 'active' ;
     startMove(oUl, {top: -150*now});
   }
   
   function next()
   {
     now++;
     if (now==aBtn.length){now=0;}
     tab();
   }
   
   var timer=setInterval(next, 2000);
   
   oDiv.onmouseover= function (){clearInterval(timer);};
   
   oDiv.onmouseout= function (){timer=setInterval(next, 2000);};
};
</script>

應用2，完成以下效果：

代碼以下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type= "text/css" >
.....
</style>
<script type= "text/javascript" src= "move.js" ></script>
<script type= "text/javascript" >
window.onload= function ()
{
   var oBtn=document.getElementById( 'but' );
   var oBottom=document.getElementById( 'zns_bottom' );
   var oBox=document.getElementById( 'zns_box' );
   var oBtnClose=document.getElementById( 'btn_close' );
   
   oBox.style.display= 'block' ;
   var initBottomRight=parseInt(getStyle(oBottom, 'right' ));
   var initBoxBottom=parseInt(getStyle(oBox, 'bottom' ));
   oBox.style.display= 'none' ;
   
   oBtn.onclick=openHandler;
   oBtnClose.onclick=closeHandler;
   
   function openHandler()
   {
     startMove(oBottom, {right: 0}, function (){
       oBox.style.display= 'block' ;
       startMove(oBox, {bottom: 0});
     });
     oBtn.className= 'but_hide' ;
     oBtn.onclick=closeHandler;
   }
   
   function closeHandler()
   {
     startMove(oBox, {bottom: initBoxBottom}, function (){
       oBox.style.display= 'none' ;
       startMove(oBottom, {right: initBottomRight}, function (){
         oBtn.className= 'but_show' ;
       });
     });
     oBtn.onclick=openHandler;
   }
};
</script>
</head>
<body>
   ......
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程