主頁 > 前端設計 > awk陣列遍歷中的字母數字或"版本排序"

awk陣列遍歷中的字母數字或"版本排序"

2021-10-21 11:12:44 前端設計

我的作業是處理生物資訊學檔案,這些檔案中的字符和數字組合成一排,如下圖所示

EDIT更新的例子

chr1 1 100 chr10 1 500 chr2 33 52 chr5 11 66 chr22 99 1052 CHR11 444 2141 CHR2 555 1200 chr7 300 444 chr7 44 222 chr21 24 6023 CHR16 224 5521 chr3 3 200 chrX 6234 79593 chr1 5291 5500 chrY 204 310

我希望像這樣進行排序

chr1 1 100 chr1 5291 5500 chr2 33 52 chr2 555 1200 chr3 3 200 chr5 11 66 chr7 44 222 CHR7 300 444 chr10 1 500 CHR11 444 2141 CHR16 224 5521 chr21 24 6023 chr22 99 1052 chrX 6234 79593 chrY 204 310

我正在使用受控陣列橫向排序,因為我用for回圈來掃描它們,但既定的排序方法是數字、字串或型別排序。 我希望能有像 GNU sort -V 排序那樣的方法。 在下面的鏈接中,我看到我可以為排序建立一個自定義函式,但我不確定如何為字母數字值進行排序。

我有一個想法,就是做這樣的事情,把字母值和數字部分分開排序,然后再想辦法把它們結合起來,但是我不確定到底該怎么做。

echo "d23FgE55" | awk '{alph=$1;num=$1;gsub("[0-9] ", "-", alph);gsub("[A-z] ", "-", num);print alph, num}'
d-FgE- -23-55

編輯部

我很抱歉,其中一個答案讓我想起了我有時遇到的一些更復雜的例子,讓我問到了更接近于sort -V行為的東西。

未排序的例子

chr1_KI270708v1_random 9240458 9393655
chrUn_KI270589v1 5789405 6182867
chr19_GL383576v1_alt 4363702 4753141
chr8_KI270820v1_alt 1008865 1426444
chrUn_GL000220v1 7612088 7825236
chrUn_KI270591v1 9457975 9812609
chr19_GL949747v2_alt 1578276 2033118
chr13_KI270841v1_alt 8680841 9033557
chr17_KI270859v1_alt 3996864 4344945
chr20_GL383577v2_alt 3002112 3480396
chrUn_KI270322v1 1563181 1629375
chrUn_KI270419v1 5482364 5893900
chrUn_KI270310v1 4229845 4626802
chr17_KI270907v1_alt 1735306 2201566
chr9 2052238 2476827
chr1_KI270713v1_random 7260088 7358876
chr19_KI270891v1_alt 7485890 7719006
chr19_KI270917v1_alt 7816269 7864474
chrUn_KI270378v1 8848225 9158581
chr19_KI270933v1_alt 1600444 2095219
chr3_KI270937v1_alt 9902343 10113942
chr12_KI270904v1_alt 6924313 7067502
chrUn_GL000214v1 2468418 2728693
chr19_KI270884v1_alt 2760167 3027068
chrUn_KI270582v1 6390491 6398266
chr5_KI270897v1_alt 324409 548890
chr1_GL383520v2_alt 3718510 3948906
chr19_KI270888v1_alt 3809944 3824324
chr11_JH159137v1_alt 6090599 6480896
chr1_KI270762v1_alt 4196600 4684821
chr11_KI270831v1_alt 2112401 2490081
chr5_GL339449v2_alt 7220557 7718111
chr19_KI270889v1_alt 8709969 8823256
chr19_KI270931v1_alt 6356216 6811953
chr5_GL383530v1_alt 109389 128439
chr11_KI270927v1_alt 2119470 2348459
chr17_KI270730v1_random 404268 854145
chrUn_KI270387v1 7430161 7648856
chr10 2656835 2873499
chr19_GL383573v1_alt 7863497 7896279
chrUn_KI270741v1 1292450 1371680
chrUn_KI270335v1 7360266 7748998
chr9_GL383539v1_alt 3394859 3499461
chrX 4490524 4892623
chrUn_KI270311v1 963681 1069745
chr11_JH159136v1_alt 8171978 8319851
chr17_JH159148v1_alt 3708868 3984631
chrUn_KI270544v1 7025954 7392905
chr19_KI270888v1_alt 9683785 10166473
chrUn_KI270521v1 6924036 7001552
chr1_KI270710v1_random 8843336 9304602
chr19_GL949746v1_alt 8572018 8832793
chrUn_KI270322v1 9392841 9512920
chrUn_KI270366v1 3332191 3576201
chr13_KI270841v1_alt 9033828 9276044
chr19_GL949748v2_alt 3321575 3743545
chr16 3704062 4122526
chr17_GL383563v3_alt 7476487 7845527
chr8_KI270810v1_alt 8499569 8873953
chr22_KI270732v1_random 9187626 9418154
chr20_GL383577v2_alt 3031797 3421627
chr9_GL383541v1_alt 3771485 3927905
chr9_KI270720v1_random 8948742 9157627
chr16_KI270854v1_alt 7278604 7297845
chr1_KI270763v1_alt 1518275 1527443
chrUn_KI270517v1 3377374 3454859
chr15_KI270850v1_alt 6358541 6822565
chr22_KB663609v1_alt 4944645 4971886
chr7_KI270806v1_alt 9032201 9471652
chrUn_KI270438v1 8523562 8944980
chr17_KI270730v1_random 3544067 3796807
chr18 1856815 2144546
chr20_KI270869v1_alt 2269342 2353172
chr5_GL383530v1_alt 2139701 2285854
chr8_KI270819v1_alt 7048265 7503415
chr17_JH159148v1_alt 7040113 7042904
chr5_KI270793v1_alt 9363008 9816819
chr19_KI270931v1_alt 1794178 2143519
chr3_KI270778v1_alt 2228100 2549359
chr19_KI270932v1_alt 8320855 8486835
chr12_GL877876v1_alt 3736839 3820171
chr12_GL877876v1_alt 2805577 2974710
chr4_KI270789v1_alt 3309756 3669565
chr19_KI270917v1_alt 9443280 9678387
chr11_KI270831v1_alt 8603751 9028904
chrUn_KI270387v1 5189812 5439563
chrUn_KI270507v1 599827 666674
chr1_KI270711v1_random 6111532 6446935
chr2_KI270773v1_alt 8604675 8922311
chr16_KI270856v1_alt 5855373 6089898
chr3 3097856 3436204
chr13_KI270840v1_alt 3127654 3295739
chr15_KI270849v1_alt 8948327 9336376
chr18_KI270863v1_alt 3984764 4166006
chr19_KI270920v1_alt 5554949 5919294
chr12 6624798 7106478
chr4_GL383528v1_alt 2099770 2280753
chr2_KI270769v1_alt 8706329 9147304
chr8_KI270812v1_alt 6146462 6388606

分類輸出

chr1_GL383520v2_alt 3718510 3948906
chr1_KI270708v1_random 9240458 9393655
chr1_KI270710v1_random 8843336 9304602
chr1_KI270711v1_random 6111532 6446935
chr1_KI270713v1_random 7260088 7358876
chr1_KI270762v1_alt 4196600 4684821
chr1_KI270763v1_alt 1518275 1527443
chr2_KI270769v1_alt 8706329 9147304
chr2_KI270773v1_alt 8604675 8922311
chr3 3097856 3436204
chr3_KI270778v1_alt 2228100 2549359
chr3_KI270937v1_alt 9902343 10113942
chr4_GL383528v1_alt 2099770 2280753
chr4_KI270789v1_alt 3309756 3669565
chr5_GL339449v2_alt 7220557 7718111
chr5_GL383530v1_alt 109389 128439
chr5_GL383530v1_alt 2139701 2285854
chr5_KI270793v1_alt 9363008 9816819
chr5_KI270897v1_alt 324409 548890
chr7_KI270806v1_alt 9032201 9471652
chr8_KI270810v1_alt 8499569 8873953
chr8_KI270812v1_alt 6146462 6388606
chr8_KI270819v1_alt 7048265 7503415
chr8_KI270820v1_alt 1008865 1426444
chr9 2052238 2476827
chr9_GL383539v1_alt 3394859 3499461
chr9_GL383541v1_alt 3771485 3927905
chr9_KI270720v1_random 8948742 9157627
chr10 2656835 2873499
chr11_JH159136v1_alt 8171978 8319851
chr11_JH159137v1_alt 6090599 6480896
chr11_KI270831v1_alt 2112401 2490081
chr11_KI270831v1_alt 8603751 9028904
chr11_KI270927v1_alt 2119470 2348459
chr12 6624798 7106478
chr12_GL877876v1_alt 2805577 2974710
chr12_GL877876v1_alt 3736839 3820171
chr12_KI270904v1_alt 6924313 7067502
chr13_KI270840v1_alt 3127654 3295739
chr13_KI270841v1_alt 8680841 9033557
chr13_KI270841v1_alt 9033828 9276044
chr15_KI270849v1_alt 8948327 9336376
chr15_KI270850v1_alt 6358541 6822565
chr16 3704062 4122526
chr16_KI270854v1_alt 7278604 7297845
chr16_KI270856v1_alt 5855373 6089898
chr17_GL383563v3_alt 7476487 7845527
chr17_JH159148v1_alt 3708868 3984631
chr17_JH159148v1_alt 7040113 7042904
chr17_KI270730v1_random 404268 854145
chr17_KI270730v1_random 3544067 3796807
chr17_KI270859v1_alt 3996864 4344945
chr17_KI270907v1_alt 1735306 2201566
chr18 1856815 2144546
chr18_KI270863v1_alt 3984764 4166006
chr19_GL383573v1_alt 7863497 7896279
chr19_GL383576v1_alt 4363702 4753141
chr19_GL949746v1_alt 8572018 8832793
chr19_GL949747v2_alt 1578276 2033118
chr19_GL949748v2_alt 3321575 3743545
chr19_KI270884v1_alt 2760167 3027068
chr19_KI270888v1_alt 3809944 3824324
chr19_KI270888v1_alt 9683785 10166473
chr19_KI270889v1_alt 8709969 8823256
chr19_KI270891v1_alt 7485890 7719006
chr19_KI270917v1_alt 7816269 7864474
chr19_KI270917v1_alt 9443280 9678387
chr19_KI270920v1_alt 5554949 5919294
chr19_KI270931v1_alt 1794178 2143519
chr19_KI270931v1_alt 6356216 6811953
chr19_KI270932v1_alt 8320855 8486835
chr19_KI270933v1_alt 1600444 2095219
chr20_GL383577v2_alt 3002112 3480396
chr20_GL383577v2_alt 3031797 3421627
chr20_KI270869v1_alt 2269342 2353172
chr22_KB663609v1_alt 4944645 4971886
chr22_KI270732v1_random 9187626 9418154
chrUn_GL000214v1 2468418 2728693
chrUn_GL000220v1 7612088 7825236
chrUn_KI270310v1 4229845 4626802
chrUn_KI270311v1 963681 1069745
chrUn_KI270322v1 1563181 1629375
chrUn_KI270322v1 9392841 9512920
chrUn_KI270335v1 7360266 7748998
chrUn_KI270366v1 3332191 3576201
chrUn_KI270378v1 8848225 9158581
chrUn_KI270387v1 5189812 5439563
chrUn_KI270387v1 7430161 7648856
chrUn_KI270419v1 5482364 5893900
chrUn_KI270438v1 8523562 8944980
chrUn_KI270507v1 599827 666674
chrUn_KI270517v1 3377374 3454859
chrUn_KI270521v1 6924036 7001552
chrUn_KI270544v1 7025954 7392905
chrUn_KI270582v1 6390491 6398266
chrUn_KI270589v1 5789405 6182867
chrUn_KI270591v1 9457975 9812609
chrUn_KI270741v1 1292450 1371680
chrX 4490524 4892623

https://www.gnu.org/software/gawk/manual/html_node/Controlling-Array-Traversal.html

uj5u.com熱心網友回復:

一種gnu-awk方法,將輸入分成數字和字串陣列,然后使用2種不同的排序型別:

awk '{
   v = $1
   gsub(/[a-z] /, "", v)
   如果(v 0 == v)
      narr[v * 10^8   $2] = $0
   否則
      sarr[v,2美元] = 0美元
}
END {
   PROCINFO["sorted_in"]="@ind_num_asc"
   for (i in narr) print narr[i].
   PROCINFO["sorted_in"]="@ind_str_asc"
   for (i in sarr) print sarr[i].
}'檔案

chr1 1 100
chr1 5291 5500
chr2 33 52
chr2 555 1200
chr3 3 200
chr5 11 66
chr7 44 222
CHR7 300 444
chr10 1 500
CHR11 444 2141
CHR16 224 5521
chr21 24 6023
chr22 99 1052
chrX 6234 79593
chrY 204 310

uj5u.com熱心網友回復:

如果你不介意在數字排序中字母排序在數字之前,這可能是你所需要的全部(或者可以找到一個不存在這種情況的地區):

$ cat tst.awk { vals[gensub(/chr/,"",1,1)][2][3] } END { OFS = " " PROCINFO["sorted_in"] = "@ind_num_asc" for (chr in vals) { for (beg in vals[chr]) { for (end in vals[chr][beg]) { print "chr "chr, beg, end } } } }

$ awk -f tst.awk file
chrX 6234 79593
chrY 204 310
chr1 1 100
chr1 5291 5500
chr2 33 52
chr2 555 1200
chr3 3 200
chr5 11 66
chr7 44 222
CHR7 300 444
chr10 1 500
CHR11 444 2141
CHR16 224 5521
chr21 24 6023
chr22 99 1052

以上使用GNU awk來處理陣列的陣列和排序的_in。

uj5u.com熱心網友回復:

假設:

  • 第一個欄位將總是以至少一個字母開始,后面是0個或更多的數字(即,[:alpha:] [:digit:]*
  • 字母和數字永遠不會混在一起(例如,d23FgE55不會出現)
  • 第一個欄位只由字母和數字組成(即,[:alnum:]
  • 整個輸入檔案適合于60%的可用記憶體(否則,將整個檔案加載到一個awk陣列中可能會出現 "記憶體不足 "的錯誤)
  • 在輸入中添加一些更多的資料點:

    $ cat dat.raw
    chr1 1 100
    chr10 1 500
    chr2 33 52
    bec9 3 17
    chr5 11 66
    CHR22 99 1052
    CHR11 444 2141
    CHR2 555 1200
    chr7 300 444
    defA 3 15
    def7 13 15
    def7 3 15
    chr7 44 222
    chr21 24 6023
    chr16 224 5521
    chr3 3 200
    chrX 6234 79593
    chr1 5291 5500
    chrY 204 310
    

    使用GNU awk處理陣列的陣列和PROCINFO["sorted_in"]

    awk'
         { keyL=gensub(/([[:digit:]])/,"", "g",1) # 從第一個欄位中剝離數字
           keyN=gensub(/([[:alpha:]])/,"", "g",1) # 從第一個欄位中剝離字母。
    
           if ( keyN == "" ) keyN=999999999 # 如果第一個欄位中沒有數字,則使用一個非常大的數字,以確保這些行被放到串列的最后。
    
           arr[keyL][keyN][$2]=$0 # arr[] index = 第一欄字母/第一欄數字/第二欄
         }
    
    END { PROCINFO["sorted_in"]="@ind_str_asc" # 將第一個索引排序為字串
           for (i in arr) {
               PROCINFO["sorted_in"]="@ind_num_asc" # 將第2/3個索引排序為數字
               for (j in arr[i])
                   for (k in arr[i][j])
                       print arr[i][j][k]
           }
         }
    ' dat.raw
    

    這就產生了:

    bec9 3 17
    chr1 1 100
    chr1 5291 5500
    chr2 33 52
    chr2 555 1200
    chr3 3 200
    chr5 11 66
    chr7 44 222
    CHR7 300 444
    chr10 1 500
    CHR11 444 2141
    CHR16 224 5521
    chr21 24 6023
    chr22 99 1052
    chrX 6234 79593
    chrY 204 310
    def7 3 15
    def7 13 15
    defA 3 15
    

    uj5u.com熱心網友回復:

    GNU實用程式的版本排序規則要完全實作并不容易。

    這里有一個 ruby。它適用于這個例子,但沒有完全實作 GNU -V 方法。它可能比 GNU awk 更容易定制。

    ruby -e 'ar=$<.read.split(/)
    ?
    /); 
    puts ar.sort_by { |v| [v[/^[a-zA-Z] /]] 。  v.scan(/d /)。
        map{|e|e.to_i}。}.
        join("
    ")' 檔案
    chr1 1 100
    chr1 5291 5500
    chr2 33 52
    chr2 555 1200
    chr3 3 200
    chr5 11 66
    chr7 44 222
    CHR7 300 444
    chr10 1 500
    CHR11 444 2141
    CHR16 224 5521
    chr21 24 6023
    chr22 99 1052
    chrX 6234 79593
    chrY 204 310
    

    轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/328363.html

    標籤:

    上一篇:無法在pyspark中實體化com.google.cloud.hadoop.fs.gcs.GoogleHadoopFileSystem。

    下一篇:如何隨機化div的位置

    標籤雲
    其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

    熱門瀏覽
    • vue移動端上拉加載

      可能做得過于簡單或者比較low,請各位大佬留情,一起探討技術 ......

      uj5u.com 2020-09-10 04:38:07 more
    • 優美網站首頁,頂部多層導航

      一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便。 第一步,HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

      uj5u.com 2020-09-10 04:38:47 more
    • 頁面為要加<!DOCTYPE html>

      最近因為寫一個js函式,需要用到$(window).height(); 由于手寫demo的時候,過于自信,其實對前端方面的認識也不夠體系,用文本檔案直接敲出來的html代碼,第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

      uj5u.com 2020-09-10 04:38:52 more
    • WordPress網站程式手動升級要做好資料備份

      WordPress博客網站程式在進行升級前,必須要做好網站資料的備份,這個問題良家佐言是遇見過的;在剛開始接觸WordPress博客程式的時候,因為升級問題和博客網站的修改的一些嘗試,良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名,每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

      uj5u.com 2020-09-10 04:39:30 more
    • WordPress程式不能升級為5.4.2版本的原因

      WordPress是一款個人博客系統,受到英文博客愛好者和中文博客愛好者的追捧,并逐步演化成一款內容管理系統軟體;它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新,就會牽動無數WordPress愛好者的心, ......

      uj5u.com 2020-09-10 04:39:49 more
    • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

      網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖。 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

      uj5u.com 2020-09-10 04:40:09 more
    • 關于a標簽的講解

      什么是a標簽? <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。 a標簽的語法格式:<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中,鏈接的默認外觀如下: 未被訪問的鏈接帶 ......

      uj5u.com 2020-09-10 04:40:11 more
    • 前端輪播圖

      在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址: 鏈接:https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼:4aks swiper.min.css地址 鏈接:https://pan.b ......

      uj5u.com 2020-09-10 04:40:13 more
    • 如何設定html中的背景圖片(全屏顯示,且不拉伸)

      1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

      uj5u.com 2020-09-10 04:40:16 more
    • Java學習——HTML詳解(上)

      HTML詳解 初識HTML Hyper Text Markup Language(超文本標記語言) 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽,描述一些 ......

      uj5u.com 2020-09-10 04:40:33 more
    最新发布
    • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

      好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

      uj5u.com 2023-04-20 07:59:23 more
    • 生產事故-走近科學之消失的JWT

      入職多年,面對生產環境,盡管都是小心翼翼,慎之又慎,還是難免捅出簍子。輕則滿頭大汗,面紅耳赤。重則系統停擺,損失資金。每一個生產事故的背后,都是寶貴的經驗和教訓,都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故,特開此專題,長期更新和記錄大大小小的各類事故。有些是親身經歷,有些是經人耳傳口授 ......

      uj5u.com 2023-04-18 07:55:04 more
    • 記錄--Canvas實作打飛字游戲

      這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 打開游戲界面,看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上,有一個白色的矩形框,里面不斷下落著各種單詞,而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配,那么我就可以獲得得分;如果我輸入的單詞錯誤或者時間過長,那么我就會輸 ......

      uj5u.com 2023-04-04 08:35:30 more
    • 了解 HTTP 看這一篇就夠

      在學習網路之前,了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子,引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

      uj5u.com 2023-03-16 11:00:15 more
    • 藍牙-低功耗中心設備

      //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

      uj5u.com 2023-03-15 09:06:45 more
    • canvas畫板(滑鼠和觸摸)

      <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

      uj5u.com 2023-02-15 08:56:31 more
    • 手機端H5 實作自定義拍照界面

      手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作,和在桌面端做法基本一致。 首先,使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流,并將其傳遞給 <video> 標簽進行渲染。 接著,使用 HTML 的 < ......

      uj5u.com 2023-01-12 07:58:22 more
    • 記錄--短視頻滑動播放在 H5 下的實作

      這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 短視頻已經無數不在了,但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲,一圖頂百辯,且看下圖: 網址鏈接(需在微信或者手Q中瀏覽) 從上圖可以看到,我們主要實作的功能也是本文要講解的有: ......

      uj5u.com 2023-01-04 07:29:05 more
    • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

      從 1989 年萬維網(www)誕生,HTTP(HyperText Transfer Protocol)經歷了眾多版本迭代,WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

      uj5u.com 2022-12-24 06:56:02 more
    • 【HTML基礎篇002】HTML之form表單超詳解

      ??一、form表單是什么

      ??二、form表單的屬性

      ??三、input中的各種Type屬性值

      ??四、標簽 ......

      uj5u.com 2022-12-18 07:17:06 more