整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          常用linux命令:curl

          常用linux命令:curl
          // 獲取網頁內容
          // 不加任何選項使用 curl 時,默認會發送 GET 請求來獲取內容到標準輸出
          $ curl http://www.baidu.com
          // 輸出
          <!DOCTYPE html>
          <!--STATUS OK--><html> <head><meta http-equiv=content-type content=text/html;charset=utf-8><meta http-equiv=X-UA-Compatible content=IE=Edge><meta content=always name=referrer><link rel=stylesheet type=text/css href=http://s1.bdstatic.com/r/www/cache/bdorz/baidu.min.css><title>百度一下,你就知道</title></head> <body link=#0000cc> <div id=wrapper> <div id=head> <div class=head_wrapper> <div class=s_form> <div class=s_form_wrapper> <div id=lg> <img hidefocus=true src=//www.baidu.com/img/bd_logo1.png width=270 height=129> </div> <form id=form name=f action=//www.baidu.com/s class=fm> <input type=hidden name=bdorz_come value=1> <input type=hidden name=ie value=utf-8> <input type=hidden name=f value=8> <input type=hidden name=rsv_bp value=1> <input type=hidden name=rsv_idx value=1> <input type=hidden name=tn value=baidu><span class="bg s_ipt_wr"><input id=kw name=wd class=s_ipt value maxlength=255 autocomplete=off autofocus></span><span class="bg s_btn_wr"><input type=submit id=su value=百度一下 class="bg s_btn"></span> </form> </div> </div> <div id=u1> <a href=http://news.baidu.com name=tj_trnews class=mnav>新聞</a> <a href=http://www.hao123.com name=tj_trhao123 class=mnav>hao123</a> <a href=http://map.baidu.com name=tj_trmap class=mnav>地圖</a> <a href=http://v.baidu.com name=tj_trvideo class=mnav>視頻</a> <a href=http://tieba.baidu.com name=tj_trtieba class=mnav>貼吧</a> <noscript> <a href=http://m.jungjaehyung.com/uploadfile/2024/1009/20241009094316386.gif?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2f%3fbdorz_come%3d1 name=tj_login class=lb>登錄</a> </noscript> <script>document.write('<a href="http://m.jungjaehyung.com/uploadfile/2024/1009/20241009094316386.gif?login&tpl=mn&u='+ encodeURIComponent(window.location.href+ (window.location.search==="" ? "?" : "&")+ "bdorz_come=1")+ '" name="tj_login" class="lb">登錄</a>');</script> <a href=//www.baidu.com/more/ name=tj_briicon class=bri style="display: block;">更多產品</a> </div> </div> </div> <div id=ftCon> <div id=ftConw> <p id=lh> <a href=http://home.baidu.com>關于百度</a> <a href=http://ir.baidu.com>About Baidu</a> </p> <p id=cp>?2017 Baidu <a href=http://www.baidu.com/duty/>使用百度前必讀</a>  <a href=http://jianyi.baidu.com/ class=cp-feedback>意見反饋</a> 京ICP證030173號  <img src=//www.baidu.com/img/gs.gif> </p> </div> </div> </div> </body> </html>
          
          // 顯示 HTTP 頭信息
          // 使用 -i 選項,可以同時顯示頭和內容
          $ curl -I http://www.baidu.com
          // 輸出
          HTTP/1.1 200 OK
          Accept-Ranges: bytes
          Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
          Connection: keep-alive
          Content-Length: 277
          Content-Type: text/html
          Date: Thu, 08 Apr 2021 15:54:57 GMT
          Etag: "575e1f60-115"
          Last-Modified: Mon, 13 Jun 2016 02:50:08 GMT
          Pragma: no-cache
          Server: bfe/1.0.8.18
          
          // 將鏈接保存到本地文件
          $ curl http://www.baidu.com > baidu.txt
          
          // 下載多個文件
          // 使用 -o 或 -O 選項同時指定多個鏈接
          $ curl -O http://www.baidu.com/page/1 -O http://www.baidu.com/page/2
          
          // 使用 -A 自定義 User-Agent
          // 使用 -A 來自定義用戶代理,下面的命令將偽裝成安卓火狐瀏覽器對網頁進行請求
          $ curl -A "Mozilla/5.0 (Android; Mobile; rv:35.0) Gecko/35.0 Firefox/35.0" http://www.baidu.com
          
          // 使用 -H 自定義 header
          $ curl -H "Referer: www.google.com" -H "User-Agent: Custom-User-Agent" http://www.baidu.com
          
          // 使用 -c 保存 Cookie
          // -c 后面跟上要保存的文件名
          $ curl -c "baidu.txt" http://www.baidu.com
          
          // 發送 POST 請求
          // -d 用于指定發送的數據,-X 用于指定發送數據的方式
          // 在使用 -d 的情況下,如果省略 -X,則默認為 POST 方式
          $ curl -X POST http://www.baidu.com/login -d "userName=share&passwd=123456"
          
          // 強制使用 GET 方式
          $ curl -X GET http://www.baidu.com/login -d "xxx"
          
          // 從文件中讀取 data
          $ curl -d "@data.txt" http://www.baidu.com/login
          
          // 偽造referer(盜鏈)
          // -e可以設定referer
          $ curl -e "www.google.com" http://www.baidu.com/login
          
          // 循環執行curl
          $ while true; do curl -H 'User-Agent: Android10 HONOR CPU_ABI armeabi-v7a CPU_ABI2 armeabi HARDWARE kirin710 MODEL JSN-AL00a xinxin/2.0.20 sc(1f37600b9c07ceb5,kaluli)' -H 'v: 2.0.20' --compressed 'http://www.baidu.com/getImages?from=1&version=101'; done
          
          // 常用參數匯總
          -v, --verbose                          輸出信息
          -K, --config FILE                      指定配置文件
          -L, --location                         跟蹤重定向
          -s, --silent                           Silent模式。不輸出任務內容
          -S, --show-error                       顯示錯誤. 在選項 -s 中,當 curl 出現錯誤時將顯示
          -f, --fail                             不顯示 連接失敗時HTTP錯誤信息
          -i, --include                          顯示 response的header
          -I, --head                             僅顯示 響應文檔頭
          -l, --list-only                        只列出FTP目錄的名稱
          -#, --progress-bar                     以進度條 顯示傳輸進度
          -X, --request [GET|POST|PUT|DELETE|…]  使用指定的 http method 例如 -X POST
          -H, --header <header>                  設定 request里的header 例如 -H "Content-Type: application/json"
          -e, --referer                          設定 referer
          -d, --data <data>                      設定 http body 默認使用 content-type application/x-www-form-urlencoded
              --data-raw <data>                  ASCII 編碼 HTTP POST 數據
              --data-binary <data>               binary 編碼 HTTP POST 數據
              --data-urlencode <data>            url 編碼 HTTP POST 數據
          -G, --get                              使用 HTTP GET 方法發送 -d 數據
          -F, --form <name=string>               模擬 HTTP 表單數據提交 multipart POST
              --form-string <name=string>        模擬 HTTP 表單數據提交
          -u, --user <user:password>             使用帳戶,密碼 例如 admin:password
          -b, --cookie <data>                    cookie 文件
          -j, --junk-session-cookies             讀取文件中但忽略會話cookie
          -A, --user-agent                       user-agent設置
          -C, --continue-at OFFSET               斷點續轉
          -x, --proxy [PROTOCOL://]HOST[:PORT]   在指定的端口上使用代理
          -U, --proxy-user USER[:PASSWORD]       代理用戶名及密碼
          -T, --upload-file <file>               上傳文件
          -a, --append                           添加要上傳的文件 (F/SFTP)
          -o, --output <file>                    將輸出寫入文件
          -O, --remote-name                      將輸出寫入遠程文件
          -D, --dump-header <file>               將頭信息寫入指定的文件
          -c, --cookie-jar <file>                操作結束后,要寫入 Cookies 的文件位置

          .說明:

          1.1 推薦指數:★★★★

          1.2 環境:谷歌瀏覽器、微軟vscode編輯器

          1.3 熟悉sin和cos的函數與圓(畫圓弧的關系)深入理解


          比較真實的雷達界面掃描圖

          2.本次的模擬效果圖:


          3.css和js文件的引入:

          3.1 同一個文件夾或者目錄下引入:./xxx.js或者./xxx.css

          3.2 大型的html文件或者一般在html文件的同一個目錄下,建css文件夾和js文件夾,放入相應文件夾下,那么導入就是:css/xxx.css和js/xxxx.js

          3.3 外部引入法:找到網址:比如:網址在代碼注釋里query-3.4.1.min.js,引入即可。

          但是如果沒有網絡,那么html文件就不可用了,怎么辦呢?有辦法。

          用瀏覽器打開,復制:網址在代碼注釋里jquery-3.4.1.min.js,打開。

          全選復制(ctrl+a),在本地文件夾新建一個js文件:jquery-3.4.1.min.js,將復制的內容,黏貼進入,保存即可。向上面的js文件和css文件一樣,作為本地js文件引入。

          4.本次html文件代碼:index.html

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Canvas帶坐標雷達掃描特效</title>
          <!--在線引入地址:https://code.jquery.com/jquery-3.4.1.min.js-->
          <!--script-- src="./jquery.min.js"></!--script-->
          <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
          <!--將style作為單獨css文件,引入,否認就是style和/style的標簽內-->
          <!--采用下面格式:link法-->
          <link type="text/css" href="./style.css" rel="stylesheet" />
          </head>
          <body>
          
          <canvas id="myCanvas"></canvas>
          <div class="info">
            <!--顯示文字段落-->
            <h1>Warning??!Enemy is coming??!</h1>
            <!--初始化cs-xo,之后就是message彈出動態數據-->
            <p class="message">cs-xo</p>
          </div>
          <!--將radar.js作為單獨js文件,引入,否認就是script和/script的標簽內-->
          <script src="./radar.js"></script>
          </body>
          </html>

          注意:外部引入和本地引入基本沒什么區別,如果css和js=JavaScript寫在html內,可能有不同,上面注釋里有提到。

          5.jquery-3.4.1.min.js代碼不寫了,可以自己去下載,免費的,或者上面的有講解如何操作,此處略。

          6.新建一個radar.js文件,代碼如下:

          var c=$("#myCanvas")[0];
          var ctx=c.getContext("2d");
          /*雷達界面顏色=草地綠色*/
          var color_gold="124,252,0"
          var ww,wh;
          var center={x: 0,y: 0};
          // 定義函數
          function getWindowSize(){
            ww=$(window).outerWidth();
            wh=$(window).outerHeight();
            c.width=ww;
            c.height=wh;
            // 中心坐標是窗口的一半
            center={x: ww/2,y: wh/2};
            ctx.restore();
            ctx.translate(center.x,center.y);
          }
          // 啟動函數
          getWindowSize();
          $(window).resize(getWindowSize);
          // 10=敵機數量,隨機出現
          var enemies=Array(10).fill({}).map(
            function(obj){
              return {
                r: Math.random()*200,
                deg: Math.random()*360,
                opacity: 0
              } 
            }
          );
          setInterval(draw,10);
          var time=0;
          var deg_to_pi=Math.PI/180;
          // 畫圓的函數,三角函數sin和cos畫圓法
          function Point(r,deg){
            return {
              x: r*Math.cos(deg_to_pi*deg),
              y: r*Math.sin(deg_to_pi*deg),
            };
          }
          /*定義顏色函數*/
          function Color(op){
            return "rgba("+color_gold+","+op+")";
          }
          function draw(){
            time+=1;
            /*畫長方形的背景顏色填充 "#111"=黑色;*/
            ctx.fillStyle="#111";
            ctx.beginPath();
            /*畫長方形*/
            ctx.rect(-2000,-2000,4000,4000);
            ctx.fill();
            /*十字垂直水平坐標線,0.1~1代表粗細*/ 
            ctx.strokeStyle="rgba(255,125,64,0.5)";
            // ctx.strokeStyle="255,125,64";// 默認粗細值為1
            ctx.moveTo(-ww/2,0);
            ctx.lineTo(ww/2,0);
            ctx.moveTo(0,-wh/2);
            ctx.lineTo(0,wh/2);
            ctx.stroke();
            // 雷達掃面綠色和半徑大小
            ctx.strokeStyle=Color(1);
            var r=300;
            var deg=time;
            var newpoint=Point(r,deg);
            var line_deg=(time/2) % 360;
            // 雷達動態轉動的掃描扇形的弧度為100,最大360
            var line_deg_len=100;
            for(var i=0;i<line_deg_len;i++){
              var deg1=(line_deg-i-1) ;
              var deg2=(line_deg-i) ;
              var point1=Point(r,deg1);
              var point2=Point(r,deg2);
              // 代表隨著雷達掃描扇形的移動,顏色逐漸變淡
              var opacity=1-(i/line_deg_len)-0.3;
              if (i==0) opacity=1;
              ctx.beginPath();
              // 雷達扇形綠色動態漸變淡色
              ctx.fillStyle=Color(opacity);
              ctx.moveTo(0,0);
              ctx.lineTo(point1.x,point1.y);
              ctx.lineTo(point2.x,point2.y);
              ctx.fill();
            }
            enemies.forEach(function(obj){
              // 敵機出現的原點
              ctx.fillStyle=Color(obj.opacity);
              var obj_point=Point(obj.r,obj.deg);
              ctx.beginPath();
              ctx.arc(
                obj_point.x,obj_point.y,
                // 綠色敵機出現的小圓點4是半徑
                4,0,2*Math.PI
              );
              ctx.fill();
              ctx.strokeStyle=Color(obj.opacity);
              /*如果這樣直接設置,ctx.strokeStyle='#FF4500,那么敵機就是一直出現在屏幕';*/
              var x_size=6;
              /* 雷達顯示敵機目標大小設置*/
              ctx.lineWidth=4;
              ctx.beginPath();
              ctx.moveTo(obj_point.x-x_size,obj_point.y+x_size);
              ctx.lineTo(obj_point.x+x_size,obj_point.y-x_size);
              ctx.moveTo(obj_point.x+x_size,obj_point.y+x_size);
              ctx.lineTo(obj_point.x-x_size,obj_point.y-x_size);
              ctx.stroke();
              if (Math.abs(obj.deg - line_deg)<=1){
                obj.opacity=1;
                // 顯示左上角偵查到的地理坐標
                $(".message").text("Detected: "+ obj.r.toFixed(3) + " at " +obj.deg.toFixed(3));
              }
              obj.opacity*=0.99;
              // 顯示敵機出現的漣漪圈的顏色
              ctx.strokeStyle=Color(obj.opacity);
              /*目標敵機顯示后的圓圈漣漪粗細設置*/
              ctx.lineWidth=1;
              ctx.beginPath();
              ctx.arc(
                obj_point.x,obj_point.y,
                10*(1/(obj.opacity+0.0001)),0,2*Math.PI
              );
              ctx.stroke();
            });
            // 雷達虛點固定圓盤的顏色,半徑等設置
            ctx.strokeStyle='yellow';
            var split=120;
            var feature=15;   // 15個小格
            var start_r=230; // 半徑
            var len=5;
            for(var i=0;i<split;i++){
              ctx.beginPath();
              var deg=(i/120) * 360;
              if (i%feature==0){
                len=10;
                ctx.lineWidth=5;
              }else{
                len=5; 
                ctx.lineWidth=1;
              }
              var point1=Point(start_r,deg);
              var point2=Point(start_r+len,deg);
              ctx.moveTo(point1.x,point1.y);
              ctx.lineTo(point2.x,point2.y);
              ctx.stroke();
            }
            /*畫圈函數定義,下面三個畫圓函數的定義*/
            function CondCircle(r,lineWidth,func_cond){
              ctx.lineWidth=lineWidth;
              /* 顏色定義*/
              /*注意顏色定義:有引號的和沒有引號的區別,就是前面有沒有顏色圖標*/
              ctx.strokeStyle='#00C78C';
              ctx.beginPath();
              for(var i=0;i<=360;i++){
                var point=Point(r,i);
                if (func_cond(i)){
                  ctx.lineTo(point.x,point.y);
                }else{
                  ctx.moveTo(point.x,point.y);
                }
              }
              ctx.stroke();
            }
            // 雷達外圍的移動半弧形,300為半徑,2代表粗細
            CondCircle(300,2,function(deg){
              return ((deg+time/10)%180)<90;
            });
            // 雷達中間綠色的移動半弧形,160為半徑,2代表粗細
            CondCircle(160,2,function(deg){
              return ((deg+time/5)%180)<90;
            });
            // 雷達內的小圓圈,綠色虛線圈,1代表粗細
            CondCircle(100,1,function(deg){
              // 如果這里沒有,那么顏色就是三條線函數里統一的顏色,也可以單獨設立
              ctx.strokeStyle='pink';
              return (deg%3)<1;
            });
            
          }

          7.新建一個style.css文件,代碼如下:

          html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            /*隱藏瀏覽器的條形伸縮*/
            overflow: hidden;
          }
          /*定義畫布*/
          canvas {
            -webkit-transform: scaleY(-1);
                    transform: scaleY(-1);
          }
          /*顯示警告信息位置設置*/
          .info {
            position: absolute;
            left: 10px;
            top: 10px;
          }
          h1 {
            /*顯示警告信息文字顏色設置*/
            color:red;
            letter-spacing: 0.5px;
            margin: 0;
            font-size:smaller;
          }
          .message {
            /*顯示雷達預警敵機的動態位置的文字顏色設置*/
            margin: 0;
            color:#00FFFF;
            font-size: x-large;
          }

          8.通過簡單的例子,熟悉html、css和js的關系和布局等基本知識,熟練掌握基本操作。

          端在使用DIV+CSS布局時,通常需要通過為div命名的方式,來區分網頁中不同的模塊。在HTML5中布局方式有了新的變化,HTML5中增加了新的結構標簽,如header標簽、nav標簽、article標簽等,具體介紹如下。

          1. header標簽

          HTML5中的header標簽是一種具有引導和導航作用的結構標簽,該標簽可以包含所有通常放在頁面頭部的內容。header標簽通常用來放置整個頁面或頁面內的一個內容區塊的標題,也可以包含網站Logo圖片、搜索表單或者其他相關內容。其基本語法格式如下:

          <header>
          
            <h1>網頁主題</h1>
          
              ...</header>

          在上面的語法格式中,<header></header>的使用方法和<div class="header"></div>類似。

          注意:

          在HTML網頁中,并不限制header標簽的個數,一個網頁中可以使用多個header標簽,也可以為每一個內容塊添加header標簽。

          2. nav標簽

          nav標簽用于定義導航鏈接,是HTML5新增的標簽,該標簽可以將具有導航性質的鏈接歸納在一個區域中,使頁面元素的語義更加明確。nav標簽的使用方法和普通標簽類似,例如下面這段示例代碼:

          <nav>
          
            <ul>
          
                  <li><a href="#">首頁</li>
          
                  <li><a href="#">公司概況</li>
          
                  <li><a href="#">產品展示</li>
          
                  <li><a href="#">聯系我們</li>
          
            </ul></nav>

          在上面這段代碼中,通過在nav標簽內部嵌套無序列表ul來搭建導航結構。通常一個HTML頁面中可以包含多個nav標簽,作為頁面整體或不同部分的導航。具體來說,nav標簽可以用于以下幾種場合。

          ● 傳統導航條:目前主流網站上都有不同層級的導航條,其作用是跳轉到網站的其他主頁面。

          ● 側邊欄導航:目前主流博客網站及電商網站都有側邊欄導航,目的是將當前文章或當前商品頁面跳轉到其他文章或其他商品頁面。

          ● 頁內導航:它的作用是在本頁面幾個主要的組成部分之間進行跳轉。

          ● 翻頁操作:翻頁操作切換的是網頁的內容部分,可以通過點擊“上一頁”或“下一頁”切換,也可以通過點擊實際的頁數跳轉到某一頁。

          除了以上幾點以外,nav標簽也可以用于其他導航鏈接組中。需要注意的是,并不是所有的鏈接組都要被放進nav標簽,只需要將主要的和基本的鏈接放進nav標簽即可。

          3. footer標簽

          footer標簽用于定義一個頁面或者區域的底部,它可以包含所有放在頁面底部的內容。在HTML5出現之前,一般使用<div class="footer"></div>標簽來定義頁面底部,而現在通過HTML5的footer標簽可以輕松實現。與header標簽相同,一個頁面中可以包含多個footer標簽。

          4. article標簽

          article標簽代表文檔、頁面或者應用程序中與上下文不相關的獨立部分,該元素經常被用于定義一篇日志、一條新聞或用戶評論等。一個article標簽通常有它自己的標題(可以放在header標簽中)和腳注(可以放在footer標簽中),例如下面的示例代碼。

          <article>
          
              <header>
          
              <h1>秋天的味道</h1>        
              
              <p>你想不想知道秋天的味道?它是甜、是苦、是澀...</p>
          
            </header>
          
              <footer>           
              
              <p>著作權歸XXXXXX公司所有...</p>
          
            </footer></article>

          需要注意的,在上面的示例代碼中還缺少主體內容。主體內容通常會寫在header和footer之間,通過多個section標簽進行劃分。一個頁面中可以出現多個article標簽,并且article標簽可以嵌套使用。

          5. section標簽

          section標簽表示一段專題性的內容,一般會帶有標題,主要應用在文章的章節中。例如,新聞的詳情頁有一篇文章,該文章有自己的標題和內容,因此可以使用article標簽標注,如果該新聞內容太長,分好多段落,每段都有自己的小標題,這時候就可以使用section標簽把段落標注起來。在使用section標簽時,需要注意以下幾點:

          ● section不僅僅是一個普通的容器標簽。當一個標簽只是為了樣式化或者方便腳本使用時,應該使用div標簽。

          如果article標簽、aside標簽或nav標簽更符合使用條件,那么不要使用section標簽。

          ● 沒有標題的內容模塊不要使用section標簽定義。

          值得一提的是,在HTML5中,article標簽可以看作是一種特殊的section標簽,它比section標簽更具有獨立性,即section標簽強調分段或分塊,而article標簽強調獨立性。如果一塊內容相對來說比較獨立、完整時,應該使用article標簽;但是如果想要將一塊內容分成多段時,應該使用section標簽。

          6. aside標簽

          aside標簽用來定義當前頁面或者文章的附屬信息部分,它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等有別于主要內容的部分。aside標簽的用法主要分為兩種:

          ● 被包含在article標簽內作為主要內容的附屬信息。

          ● 在article標簽之外使用,作為頁面或網站的附屬信息部分。最常用的的使用形式是側邊欄。


          主站蜘蛛池模板: 99在线精品一区二区三区| 成人在线观看一区| 一区视频免费观看| 日韩一区二区在线观看视频| 在线观看国产一区亚洲bd| 无码一区二区三区视频| 成人乱码一区二区三区av| 精彩视频一区二区三区| 日韩一区二区三区在线| 国产精品成人免费一区二区| 国产福利一区二区三区| 亚洲一区二区三区91| 亚洲日本乱码一区二区在线二产线| 亚洲乱码国产一区三区| 日韩精品无码一区二区三区四区 | 欧美人妻一区黄a片| 激情内射亚洲一区二区三区爱妻| 一区高清大胆人体| 国产精品视频一区二区三区四| 大屁股熟女一区二区三区| av无码精品一区二区三区四区| 黑人一区二区三区中文字幕| 一区二区三区在线看| 中文字幕一区二区三区日韩精品 | 国产精品亚洲综合一区| 日韩A无码AV一区二区三区| 一级毛片完整版免费播放一区| 一区二区三区免费电影| 国产色综合一区二区三区| 久久综合精品不卡一区二区| 人妻av无码一区二区三区| 日韩精品一区二区三区中文精品| 无码人妻精品一区二区三区99性 | 无码人妻精品一区二区三区不卡| 伊人色综合网一区二区三区| 亚洲AV网一区二区三区| 一区二区三区精品视频| 无码人妻一区二区三区在线视频| 国产99视频精品一区| 国产精品亚洲一区二区三区久久 | 国产乱码精品一区二区三区中|