整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          7個(gè)使用JavaScript構(gòu)建數(shù)據(jù)可視化的實(shí)用工具

          7個(gè)使用JavaScript構(gòu)建數(shù)據(jù)可視化的實(shí)用工具庫,希望你能喜歡

          avaScript運(yùn)行網(wǎng)絡(luò)。您可以在瀏覽器中使用它,也可以在服務(wù)器上使用它,并且可以將其用于移動應(yīng)用程序。

          當(dāng)今的生態(tài)系統(tǒng)充滿了強(qiáng)大的庫和框架,可幫助工程師為任何平臺構(gòu)建功能強(qiáng)大,以用戶為中心的應(yīng)用程序。

          甚至在Covid-19大流行之前,數(shù)據(jù)可視化就成為當(dāng)今世界上最熱門的話題之一。公司擁有大量數(shù)據(jù),需要找到分析,解釋和可視化數(shù)據(jù)的方法。

          無論你是數(shù)據(jù)科學(xué)家還是必須處理數(shù)據(jù)可視化的程序員,今天分享7個(gè)非常棒的JavaScript框架可幫助你創(chuàng)建出色的解決方案。

          1、 D3

          地址:https://github.com/d3/d3

          D3目前在GitHub上擁有90,000個(gè)star,使其成為可用的最受歡迎的JavaScript庫之一。這是一個(gè)了不起的庫,用于使用Web標(biāo)準(zhǔn)(SVG,Canvas,HTML)使用JavaScript可視化數(shù)據(jù)。它結(jié)合了強(qiáng)大的交互和可視化技術(shù),以數(shù)據(jù)驅(qū)動的方式來操作DOM。

          它允許將任意數(shù)據(jù)綁定到DOM,然后將其轉(zhuǎn)換應(yīng)用于文檔。

          主要特征:

          • 全部功能Web標(biāo)準(zhǔn)化
          • 支持大型數(shù)據(jù)集
          • 提供官方和社區(qū)開發(fā)的模塊

          2、Three.js

          地址:https://github.com/mrdoob/three.js

          three.js是另一個(gè)用于數(shù)據(jù)可視化的很棒的JavaScript庫,目前有大約60,000個(gè)GitHub star。它希望使用默認(rèn)的WebGL渲染器創(chuàng)建一個(gè)易于使用,簡單且輕巧的3D庫。

          主要特征:

          • 默認(rèn)的WebGL渲染器
          • 支持Canvas 2D,SVG和CSS3D的渲染器
          • 好的文檔

          3、Chart.js

          Chart.js是面向設(shè)計(jì)人員和開發(fā)人員的簡單但靈活的JavaScript圖表庫,目前在GitHub上擁有約50,000 star。它具有出色的文檔,并且很容易入門。

          主要特征:

          • 混合圖表類型
          • 開箱即用的驚人過渡
          • 開源項(xiàng)目
          • 支持八種圖表類型
          • 反應(yīng)靈敏

          4、Paper.js

          Paper.js是一個(gè)運(yùn)行在HTML5 Canvas頂部的開源矢量圖形腳本框架。它提供了許多強(qiáng)大的功能來創(chuàng)建和使用貝塞爾曲線和矢量圖形。它基于Scriptographer,這是Adobe Illustrator的腳本環(huán)境。Paper.js對于初學(xué)者來說很容易學(xué)習(xí),但對于高級用戶也有很多高級功能。

          主要特征:

          • 易于上手
          • 精心設(shè)計(jì)且經(jīng)過嚴(yán)格考驗(yàn)的API
          • 基于Scriptographer,使用HTML5標(biāo)準(zhǔn)
          • 它提供嵌套的圖層,組,路徑,復(fù)合路徑,柵格,符號等。

          5、

          Fabric.js

          Fabric.js是一個(gè)很棒的JavaScript框架,可輕松使用HTML canvas元素。它在canvas元素的頂部有一個(gè)交互式對象模型,還有一個(gè)SVG到畫布的解析器。

          使用Fabric,您可以使用JavaScript輕松創(chuàng)建簡單的形狀,例如圓形,三角形,矩形或其他多邊形。

          主要特征:

          • 單元測試
          • 模塊化架構(gòu)
          • 跨瀏覽器功能
          • 快速,并遵循語義版本控制

          6、ECharts

          ECharts是一個(gè)功能強(qiáng)大的JavaScript可視化和圖表庫,它提供了向應(yīng)用程序添加交互式,直觀且高度可自定義的圖表的簡便方法,目前在GitHub上約有40,000星。它基于ZRender并用純JavaScript編寫。

          主要特征:

          • Apache Software Foundation的孵化器項(xiàng)目
          • 免費(fèi)使用
          • 支持多維數(shù)據(jù)分析
          • 活躍社區(qū)
          • 各種設(shè)備尺寸的圖表

          7、 Two.js

          Two.js是在現(xiàn)代瀏覽器中用于二維繪圖的小型API。它與渲染器無關(guān),可使用相同的API在多個(gè)上下文(例如WebGL,Canvas2D或SVG)中進(jìn)行渲染。

          主要特征:

          • 專注于矢量形狀
          • 依賴場景圖
          • 內(nèi)置動畫循環(huán)
          • 具有可擴(kuò)展的矢量圖形解釋器

          最后送福利了,自己是從事了五年的前端工程師,整理了一份最全面前端學(xué)習(xí)資料,只要私信:“前端"等3秒后即可獲取地址,里面概括應(yīng)用網(wǎng)站開發(fā),css,html,JavaScript,jQuery,Vue、Ajax,node,angular等。等多個(gè)知識點(diǎn)高級進(jìn)階干貨的相關(guān)視頻資料,等你來拿

          結(jié)論

          我真的希望您喜歡這些庫,并且可以在您的一個(gè)項(xiàng)目中使用它們!

          上回我們說到如何使用JavaScript配合Canvas技術(shù)實(shí)現(xiàn)交互功能,本片文章我們要來講講Canvas技術(shù)中的線條。由于它的英文名稱叫做Path,所以更準(zhǔn)確地應(yīng)該叫做路徑,不過其實(shí)就是線條。

          Canvas技術(shù)能繪制的路徑主要由直線、弧線和貝塞爾曲線構(gòu)成。在畫路徑之前,需要調(diào)用上下文對象的beginPath()方法,結(jié)束路徑的繪制需要調(diào)用上下文對象的closePath()方法,否則調(diào)用clearRect()方法時(shí),這條路徑將不會被刪除。所有的畫路徑的操作都需要在這兩行代碼之中。從beginPath()到closePath()繪制的圖形稱為一條路徑。

          I. 直線

          調(diào)用上下文對象的moveTo()方法,將畫筆移動到該坐標(biāo),lineTo()將以直線方式設(shè)置線條的第二個(gè)點(diǎn),上下文對象的stroke()方法,將會把該條路徑中所有的點(diǎn)都按指定的方式來連接,例如以下代碼就是先將畫筆移動到(0,0)坐標(biāo)處,然后按直線方式設(shè)置接下來的一個(gè)點(diǎn)(30,30),其次把這兩個(gè)點(diǎn)按直線方式連接起來,所以最終效果就是繪制一條斜著的直線:

          我們可以修改我們上回程序中的代碼,看看這些代碼的效果。

          通過設(shè)置上下文對象的strokeStyle和lineWidth屬性可以設(shè)置線條的顏色和寬度,例如:

          這段代碼就設(shè)置了線條顏色為橘色、線條寬度為5像素。

          通過直線,我們可以畫出三角形、矩形和多邊形。這里以三角形為例,我們只要指定三個(gè)能夠成三角形的頂點(diǎn),然后按直線方式連接起來即可,例如:

          我們從(0,0)開始,繪制直線到(30,30),然后繪制直線到(30,0),然后在繪制直線回到起點(diǎn),這就構(gòu)成了一個(gè)三角形,這個(gè)三角形構(gòu)成了一個(gè)封閉圖形,構(gòu)成封閉圖形的路徑可以使用上下文對象的fill()方法來對圖形的內(nèi)部進(jìn)行填充,例如:

          II. 弧線

          弧線最大的用處莫過于畫圓、扇形和圓角矩形了。首先,我們來介紹一下上下文對象的arc()函數(shù)。該函數(shù)用于畫弧線,它有六個(gè)參數(shù),第一、二、三個(gè)參數(shù)分別是該弧線所在圓的x、y左邊和半徑,第四和第五個(gè)參數(shù)是這個(gè)圓的起始角和結(jié)束角,單位為弧度,PI是180度,第六個(gè)參數(shù)是可選參數(shù),指定是逆時(shí)針還是順時(shí)針繪制,false代表順時(shí)針繪制,true代表逆時(shí)針繪制,默認(rèn)是順時(shí)針繪制,不過如果畫圓的話,順時(shí)針和逆時(shí)針的效果其實(shí)差不多,因?yàn)閳A無論怎么看都是一樣的。

          我們知道,圓的起始角是0,結(jié)束角是2PI,所以我們可以這樣畫圓:

          畫扇形,我們可以使用弧線和直線的組合,例如:

          繪制圓角矩形,就要用到arcTo()函數(shù)了,它也是上下文對象的一個(gè)方法,它有五個(gè)參數(shù)分別是弧線的起點(diǎn)(兩條線的延長線的交點(diǎn))的x坐標(biāo)、y坐標(biāo),弧線的終點(diǎn)的x、y坐標(biāo)和弧線的半徑,例如以下就畫了一個(gè)圓角矩形的兩條邊和一個(gè)圓角:

          再添加一些代碼,那么就可以畫出一個(gè)圓角矩形了,例如下述代碼:

          III.文本

          在制作文字冒險(xiǎn)類游戲或者RPG游戲的時(shí)候,總會有這樣一種需求:在圓角矩形中輸出文本,上面我們說了如何畫圓角矩形,那么如何輸出文本呢?我們可以使用上下文對象的strokeText()方法或者fillText()方法。區(qū)別就是前者繪制的是只有輪廓的文本,后者繪制的是填充的文本,例如:

          就繪制了一個(gè)只有輪廓的文本,它的第一個(gè)參數(shù)是要繪制的文本,后兩個(gè)參數(shù)是這個(gè)文本左下角的x、y坐標(biāo)。和直線、弧線不同,strokeText()方法不需要放在beginPath()和closePath()之間。又如:

          就繪制了一個(gè)填充文本,它的參數(shù)和strokeText()的參數(shù)是一樣的。

          通過設(shè)置上下文對象的fillStyle屬性可以指定填充文本的顏色,設(shè)置strokeStyle屬性可以設(shè)置輪廓文本的顏色。通過設(shè)置上下文對象的font屬性可以設(shè)置文本的大小和字體,例如:

          就設(shè)置了文本的大小為20px,字體為Arial。

          關(guān)于貝塞爾曲線,敬請期待本系列的下下篇。下篇將會講述如何使用Canvas技術(shù)畫一個(gè)倒福。

          盤是一個(gè)好的習(xí)慣

          1、通用函數(shù)的封裝!

          2、flex在移動端的布局

          2.2 、css使點(diǎn)擊事件失效

          pointer-events:none;

          3、php常用語法的熟悉情況

          https://www.runoob.com/php/php-tutorial.html

          • 變量超過8個(gè)顯示...
            <?php echo mb_strlen($userInfo['nickname'],'utf-8') > 8 ? '...':'';?>2、最多顯示8個(gè)長度名字  <?php echo mb_substr($userInfo['nickname'],0,8,'utf-8')?>3、if循環(huán)格式  <?php if ($question['answer_num']=='6') {?>                    AI之星                    <?php }elseif ($question['answer_num'] >='3' && $question['answer_num'] <='5') {?>                    AI勇士                    <?php }else{?>                    AI學(xué)者                <?php }?>
          • 最多顯示8個(gè)長度名字
          <?php echo mb_substr($userInfo['nickname'],0,8,'utf-8')?>
          • 當(dāng)前的時(shí)間戳
          <input type="hidden" name="nowtime" value="<?php echo  time() ?>" >
          • if循環(huán)格式
          <?php if ($question['num']=='6') {?>
              明星
              <?php }elseif ($question['num'] >='3' && $question['num'] <='5') {?>
              勇士
              <?php }else{?>
              學(xué)者
          <?php }?>
          • foreach 循環(huán)
          <?php if ($question_list) {?>
              <?php foreach ($question_list as $key=> $m): ?>
                  <div class="swiper-slide item">
                      <section class="question-box" data-id="<?=$m['id']?>">
                          <div class="q-title"><?=$m['question']?>
                          </div>
                          <?php if ($m['answerList']) {?>
                              <?php foreach ($m['answerList'] as $answer_key=> $answer): ?>
                                  <label class="radio-label">
                                      <input type="radio" data-type="single_choice" name="<?=$m['id']?>" value="<?=$answer_key?>">
                                      <?=$answer?>
                                  </label>
                              <?php endforeach; ?>
                          <?php }?>
                      </section>
                  </div>
              <?php endforeach; ?>
          <?php }?>
            
           //例子2
            <select name="column_id" value="<?=isset($show_info['column_id']) ? $show_info['column_id'] : '0'?>">
              <?php foreach($column_tree as $key=> $col) {?>
                  <option value="<?=$key?>" <?=($show_info['column_id']==$key) ? 'selected="selected"' : ''?>><?=$col?></option>
              <?php }?>
             </select>

          Twig一些常用到的語法

          //倒序排列
          {{ loop.revindex }}
          //

          4、為了更好的兼容,點(diǎn)擊事件寫在a標(biāo)簽上。

          5、微信網(wǎng)頁開發(fā)

          //微信網(wǎng)頁開發(fā)分享監(jiān)聽
          <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
          <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
          
          <script>
          var param=<?=$param ?>;
              (function () {
                  wx.config({
                      appId: '<?=$appid ?>',
                      timestamp: param.timestamp,
                      nonceStr: param.noncestr,
                      signature: param.signature,
                      jsApiList: [
                          'onMenuShareTimeline',
                          'onMenuShareAppMessage',
                          'onMenuShareQQ',
                          'onMenuShareWeibo',
                          'onMenuShareQZone'
                      ]
                  });
                  var shareContent={
                          "title": "title文案",
                          "link": "<?=site_url('knowledge/index?share_id='.$share_id);?>",
                          "imgUrl": "<?=site_url('/static/img/ai.png');?>",
                          "desc": "文案~~~"
                      },
                      $jShareWrap=$('.js_share-wrap'),
                      $slActiveWrap=$('.sl-active_toast-wrap'),
                      $questionPage=$('#question_page'),
                      $inviteMask=$('.invite-mask'),
                      succFnActive=function () {        
                          $.ajax({
                              url: '/knowledge/share_ins_count',
                              type: 'get',
                              success: function (r) {
                                  r=JSON.parse(r);
                                  console.log(r.ret);
                                  $jShareWrap.removeClass('show'); 
                                  $slActiveWrap.text(r.msg).show();
                                  if(r.ret==0){
                                      $('.result-page .again-replay').removeClass('js_share_get_count');  
                                      var hreflink=$('.result-page .again-replay').attr('data-type');  
                                      console.log(hreflink);                    
                                      $('.result-page .again-replay').attr('href',hreflink);
                                   }
                                  setTimeout(function(){
                                      $slActiveWrap.text('').hide();
                                      // if(r.ret==0){
                                      //     window.location.reload();
                                      // }
                                  },2000);                      
                              },
                              error: function () {
                              }
                          });
                      };
                  wx.ready(function () {
                      wx.onMenuShareTimeline({
                          title: shareContent.title,
                          link: shareContent.link,
                          imgUrl: shareContent.imgUrl,
                          desc: shareContent.desc,              
                          success: function (res) {
                              console.log('pyq');
                              succFnActive();
                          },
                          cancel: function (res) {
                            
                          }
                      });
          
                      wx.onMenuShareAppMessage({
                          title: shareContent.title,
                          link: shareContent.link,
                          imgUrl: shareContent.imgUrl,
                          desc: shareContent.desc,
                          success: function () {
                              console.log('py');
                              succFnActive();
                          }
                      });
                      wx.onMenuShareQQ({
                          title: shareContent.title,
                          link: shareContent.link,
                          imgUrl: shareContent.imgUrl,
                          desc: shareContent.desc,
                          success: function () {
                              // succFn();
                          }
                      });
                      wx.onMenuShareQZone({
                          title: shareContent.title,
                          link: shareContent.link,
                          imgUrl: shareContent.imgUrl,
                          desc: shareContent.desc,
                          success: function () {
                              // succFn();
                          }
                      });
                  });
              })();
          </script>
          
          
          //遇見坑
          1、如果生成的簽名param中的url與當(dāng)前鏈接不一致控制臺會報(bào)錯(cuò)。
          2、shareContent中的圖片等保持同域名

          6、時(shí)間戳的對比

          <!-- 當(dāng)前時(shí)間戳 -->
          <input type="hidden" name="nowtime" value="<?php echo  time() ?>" >
            
           //js 當(dāng)前時(shí)間大于活動結(jié)束時(shí)間
            if (Number($('input[name="nowtime"]').val()) >=Math.round(new Date('2020-10-25 10:00:00').getTime()/1000)) {
              $('.timeEndBox').text('活動已結(jié)束,感謝。').show();
              return false;
            };

          7、合成海報(bào)html2canvas.min.js

          html2canvas可以通過純JS對瀏覽器端進(jìn)行截屏,但截圖的精確度還有待提高,部分css不可識別,所以在canvas中不能完美呈現(xiàn)原畫面樣式

          
          //實(shí)例
          function convertToPoster() {
              var $posterPageContent=$('#poster_page_content');
            ///這個(gè)地方只需要將useCORS設(shè)置成true,千萬不要加allowTaint:true這兩個(gè)不要同時(shí)加
              html2canvas($posterPageContent[0], {useCORS: true})
                  .then(
                      function (canvas) {
                          var oImage=new Image();
          // HTMLCanvasElement.toDataURL() 
          //語法:canvas.toDataURL(type, encoderOptions);
          // type為圖片格式,默認(rèn)為 image/png;encoderOptions為圖片質(zhì)量,默認(rèn)為0.92
                          oImage.src=canvas.toDataURL('image/png', 1);
                          $(oImage)
                              .addClass('poster');
                          $posterPageContent
                              .after(oImage)
                              .hide();
                      }
                  );
          };

          為了更清晰的前端合并圖片

          <img class="copyImage" src="">
          <a id="dl-hidden" style="display:none;"></a>
          window.onload=function(){
              var IMAGE_URL;
              function takeScreenshot(){
                  var shareContent=document.getElementById('letter');//需要截圖的包裹的(原生的)DOM 對象
                  var width=shareContent.offsetWidth; //獲取dom 寬度
                  var height=shareContent.offsetHeight; //獲取dom 高度
                  var canvas=document.createElement("canvas"); //創(chuàng)建一個(gè)canvas節(jié)點(diǎn)
          
                  var scale=3; //定義任意放大倍數(shù) 支持小數(shù)
                  canvas.width=width * scale; //定義canvas 寬度 * 縮放
                  canvas.height=height * scale; //定義canvas高度 *縮放
                  canvas.getContext("2d").scale(scale,scale); //獲取context,設(shè)置scale
          
                  // var rect=shareContent.getBoundingClientRect();//獲取元素相對于視察的偏移量
                  // canvas.getContext("2d").translate(-rect.left,-rect.top);//設(shè)置context位置,值為相對于視窗的偏移量負(fù)值,讓圖片復(fù)位
                  var opts={
                      scale:scale, // 添加的scale 參數(shù)
                      canvas:canvas, //自定義 canvas
                      logging: true, //日志開關(guān)
                      width:width, //dom 原始寬度
                      height:height, //dom 原始高度
                      backgroundColor: 'transparent',
                  };
                  html2canvas(shareContent, opts).then(function (canvas) {
                      IMAGE_URL=canvas.toDataURL("image/png");
                      $('.copyImage').attr('src',IMAGE_URL);
                  })
              }
          
              function dataURLtoBlob(dataurl) {
                  var arr=dataurl.split(','),
                      mime=arr[0].match(/:(.*?);/)[1],
                      bstr=atob(arr[1]),
                      n=bstr.length,
                      u8arr=new Uint8Array(n)
                  while (n--) {
                      u8arr[n]=bstr.charCodeAt(n)
                  }
                  return new Blob([u8arr], { type: mime })
              }
          
              function downloadBase64(dataUrl, filename) {
                  var imageFile, href
                  // const downloadLink=document.createElement('a')
                  var downloadLink=document.getElementById('dl-hidden')
                  try {
                      var blob=dataURLtoBlob(dataUrl)
                          var href=window.URL.createObjectURL(blob)
                          downloadLink.download=filename
                          downloadLink.href=href
                          downloadLink.click()
                  } catch (err) {
                  } finally {
                      if (href) {
                          window.URL.revokeObjectURL(href)
                      }
                      // downloadLink.remove()
                  }
              }
                     // $(".letter-title").text('木子芳小芳');
                      takeScreenshot();
                      $("#save-local").click(function(e){
                       downloadBase64(IMAGE_URL, 'zhengshu.png')
                      })
          }

          8、計(jì)時(shí)器

            // 計(jì)時(shí)器
              var time_share=0;
              var timeStart=function () {
                  var hour=0;
                  var min=0;
                  var sen=0;
          
                  function showTime() {
                       time_share ++;
                      sen++;
                      if (sen >=60) {
                          min++;
                          sen=0;
                      }
                      if (min >=60) {
                          hour++;
                          min=0;
                      }
                      if (hour >=12) {
                          hour=0;
                      }
                      var dataStr="<span class='timespan'>" + (hour < 10 ? ("0" + hour) : hour) + "</span>:<span class='timespan'>" + (min < 10 ? ("0" + min) : min) + "</span>:<span class='timespan'>" + (sen < 10 ? ("0" + sen) : sen) + "</span>";
                      $(".vtimeShow").html(dataStr);
                  }
                  setInterval(showTime, 1000);
                 
              };

          答題滑動輪播坑

          -->答題滑動的時(shí)候,執(zhí)行相關(guān)內(nèi)容可以放在一個(gè)一個(gè)方法里,尋找合適時(shí)機(jī)觸發(fā)
           //  答題頁面的輪播交互
              var knowledgeSwiper;
              function handleStartDo() {
                  knowledgeSwiper=new Swiper('.js_knowledge-swiper', {
                      on: {
                          //題目滑動
                          slideChange: function () {
                              //slider的狀態(tài)判斷
                              if (knowledgeSwiper.isBeginning) {
                                  $preSlider.addClass('disabled');
                              } else if (knowledgeSwiper.isEnd) {
                                  $nextSlider.hide();
                                  $submitPaper.show();
                              } else {
                                  $preSlider.removeClass('disabled');
                                  $submitPaper.hide();
                                  $nextSlider.show();
                              };
                              $('#activeIndex').text(this.activeIndex + 1);
                          }
                      }
                  });
                  $('.js_pre-slider').off('click').on('click', function () {
                      knowledgeSwiper.slidePrev();
                  });
                  $('.js_next-slider').off('click').on('click', function () {
                      knowledgeSwiper.slideNext();
                  });
              }; // 做題交互end

          數(shù)據(jù)異步追加

          //第一步--每條數(shù)據(jù)渲染的格式
          function listHtmlRender(data, orderNum) {
                  var htmlArr=[
                      '<li>',
                          '<span class="order">',
                              orderNum,
                          '</span>',
                          '<img src="' + data.headimgurl + '" class="avatar">',
                          '<span class="nickname">',
                              data.nickname,
                          '</span>',
                          '<span class="time">'
                          + '用時(shí)' + data.time_share + 's' +
                          '</span>',
                      '</li>'
                  ];
                  var htmlStr=htmlArr.join('');
                  return htmlStr;
              };
          //第二部ajax請求后的
          for (var i=0; i < r.date.length; i++) {
            orderNum++;
            var listHtml=listHtmlRender(response.data[i], orderNum);
            $listBoxUl.append($(listHtml));
          }

          iframe適配


          主站蜘蛛池模板: 精品女同一区二区三区免费站 | 国产福利91精品一区二区 | 亚洲毛片不卡av在线播放一区| 欲色影视天天一区二区三区色香欲| 亚洲乱码日产一区三区| 鲁丝丝国产一区二区| 亚洲天堂一区二区三区| 三上悠亚一区二区观看| 国产一区二区三区无码免费| 久久一区二区三区精华液使用方法| 久久久精品人妻一区二区三区| 精品人妻一区二区三区毛片 | 色婷婷香蕉在线一区二区| 99久久人妻精品免费一区| 日本一区二区三区在线观看| 国产精品 一区 在线| 亚洲国产成人久久一区WWW| 日韩一区二区三区在线观看| 美女AV一区二区三区| 天码av无码一区二区三区四区| 日本韩国一区二区三区| 国产欧美一区二区精品仙草咪| 亚洲AV无码一区二区三区网址| 国产福利一区二区三区在线视频 | 日本丰满少妇一区二区三区| 国产在线精品一区二区 | 日韩一区二区在线播放| 国产福利一区二区三区在线观看 | 中文字幕VA一区二区三区 | 亚洲综合无码一区二区痴汉| 亚洲Av永久无码精品一区二区| 中文字幕一区日韩精品| 波多野结衣AV一区二区三区中文 | 一区二区三区免费高清视频| 亚洲av无码天堂一区二区三区| 亚洲国产综合精品一区在线播放| 中文字幕在线观看一区| 国产精品美女一区二区视频| 激情亚洲一区国产精品| 爆乳无码AV一区二区三区 | 国产精品自拍一区|