✍ 📁 🙈 🙉 🙊

display: grid

display: grid 網格顯示
grid-template-columns 網格模板列
grid-template-rows 網格模板行

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;font-size: 24px;
   }

.item1 {
  grid-column-start: 1;  /*列起始位置 column start position */
  grid-column-end: 3;    /*列終結位置 column end position */
  grid-row-start: 1;     /*行起始位置 row start position */
  grid-row-end: 3;       /*行終結位置 row end position */
}
</style>

<div class="grid-container">
  <div class="item1">item 1<br>200+250x X 80+80</div>
  <div class="item2">item 2<br>350 X 80</div>
  <div class="item3">item 3<br>350 X 80</div>  
  <div class="item4">item 4<br>200 X =100</div>
  <div class="item5">item 5<br>250 X 100</div>
  <div class="item6">item 6<br>350 X 100</div>
  <div class="item7">item 7<br>200 X 150</div>
  <div class="item8">item 8<br>250 X 150</div>
  <div class="item9">item 9<br>350 X 150</div>
  </div> 
<pre style="font-size: 22px;">.grid-container {
grid-template-columns: 200px 250px 300px;       // 3 列寬度 
grid-template-rows: 80px 80px 100px 150px; 80px;// 4 行高度 }

.item1{
grid-column-start: 1;  //列起始位置 column start position
grid-column-end: 3;    //列終結位置 column end position
grid-row-start: 1;     //行起始位置 row start position
grid-row-end: 3;       //行終結位置 row end position }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;font-size: 24px;
   }

.item5 {
  grid-column-start: 2;  /*列起始位置 column start position */
  grid-column-end: 3;    /*列終結位置 column end position */
  grid-row-start: 2;     /*行起始位置 row start position */
  grid-row-end: 4;       /*行終結位置 row end position */
}
</style>

<div class="grid-container">
  <div class="item1">item 1<br>200 X 80</div>
  <div class="item2">item 2<br>250 X 80</div>
  <div class="item3">item 3<br>300 X 80</div>  
  <div class="item4">item 4<br>200 X 80</div>
  <div class="item5">item 5<br>250 X 80+100</div>
  <div class="item6">item 6<br>300 X 80</div>
  <div class="item7">item 7<br>200 X 100</div>
  <div class="item8">item 8<br>300 X 100</div>
  <div class="item9">item 9<br>200 X 150</div>
  <div class="item8">item 10<br>250 X 150</div>
  <div class="item9">item 11<br>300 X 150</div>
  </div>
<pre style="font-size: 22px;">.grid-container {
grid-template-columns: 200px 250px 300px;       // 3 列寬度  
grid-template-rows: 80px 80px 100px 150px; 80px;// 4 行高度 }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;font-size: 24px;
   }

.item5f {
  grid-column-start: 2;  /*列起始位置 column start position */
  grid-column-end: 3;    /*列終結位置 column end position */
  grid-row-start: 2;     /*行起始位置 row start position */
  grid-row-end: 4;       /*行終結位置 row end position */
}
</style>

<div class="grid-container">
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>  
  <div>column 1fr <br> row 2fr</div>
  <div>column 2fr <br> row 2fr</div>
  <div>column 1fr <br> row 2fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 1fr <br> row 1.5fr</div>
  <div>column 2fr <br> row 1.5fr</div>
  <div>column 1fr <br> row 1.5fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
   </div>
<pre style="font-size: 22px;">
fr 代表格線內容器，可用空間的分塊, 1fr 1格..2fr 2格.....
grid-template-columns: 1fr 2fr 1fr; 
grid-template-rows:  1fr 2fr 1.5fr  </pre>

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;font-size: 24px;
   }

.txt {
  grid-column-start: 1;  /*列起始位置 column start position */
  grid-column-end: 7;    /*列終結位置 column end position */
  grid-row-start: 5;     /*行起始位置 row start position */
  grid-row-end: 5;       /*行終結位置 row end position */
}
</style>

<div class="grid-container">
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>  
  <div>column 1fr <br> row 2fr</div>
  <div>column 2fr <br> row 2fr</div>
  <div>column 1fr <br> row 2fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 1fr <br> row 1.5fr</div>
  <div>column 2fr <br> row 1.5fr</div>
  <div>column 1fr <br> row 1.5fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
<div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
<div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
<div class="txt">   
<pre style="font-size: 22px;">
grid-template-columns: repeat(3, 1fr 1.5fr) ; 
  grid-template-rows: repeat(3, 1fr 1.5fr); </pre>
</div>

</div>

Edit

Javascript 字串或文章編碼加密 String or article encoding and encryption 1

Javascript 字串或文章編碼加密
String or article encoding and encryption 1

function encode(str,key) 功能 傳回 字串/文章 編碼加密，
                  str = 需要 編碼加密 字串/文章，
                  key = 密碼。
                  
function decode(str,key) 功能 傳回 將加密編碼還原為 字串/文章，
                  str = 加密後編碼，
                  key = 密碼。
                  
例 : encode("銀行","123456") 
     傳回 "ad9ff3c40c7372664ff58ce086420010015de271"

例 : decode("ad9ff3c40c....086420010015de271","123456")
     傳回 "銀行"

密碼/password

原文字串/文章 Original string

<pre><ol>
<li>密碼/password <</span>input id="APww" value="1234" />
<li><</span>input type="button" id="ADDT" onclick="AButton(this)" 
    value="加密 encode" style="cursor:pointer;font-size: 20px ;"/>
<li><</span>br><</span>br> 
<li><</span>div id="Originsl" >原文 字串/文章 Original string<</span>/div>  
<li><</span>textarea id="Astr" spellcheck="false" wrap="logical" 
          style="width:98%;height:550px" >
 銀行 : 中央國際銀行
 編號 : 998826283800  
 密碼 : 123456789
   
 銀行 : 大國城鄉銀行
 編號 : 998826283800  
 密碼 : 123456789
   
 持有1000兩黃金

<li><</span>/textarea>
<li><</span>/div>

<li><</span>script>
  
<li>function AButton(x){  
if(x.value == "加密 encode"){ Aencode(Astr.value, APww.value) ;
                   x.value = "解碼 decode";
                   Originsl.innerHTML ="加密後編碼 Encryption code";
                   return ; }
<li>if(x.value == "解碼 decode"){ Adecode(Astr.value, APww.value) 
                    Originsl.innerHTML ="原文 字串/文章 Original string";
                    x.value = "加密 encode";
                    return ; }
<li>}

<li>function Aencode(str,key) { 
<li>str=btoa(escape(str));
<li>var l="";
<li>for(var c=0;c<key.length;c++) { 
                   l+=key.charCodeAt(c).toString() }
<li>var g=Math.floor(l.length/5);
<li>var b=parseInt(l.charAt(g)+l.charAt(g*2) + 
               l.charAt(g*3)+l.charAt(g*4)+l.charAt(g*5));
<li>var a=Math.ceil(key.length/2);var h=Math.pow(2,31)-1;
<li>var d=Math.round(Math.random()*1000000000)%100000000;
<li>    l+=d;
<li>while(l.length>10){l=(parseInt(l.substring(0,10)) +
      parseInt(l.substring(10,l.length))).toString()}
<li>l=(b*l+a)%h;
<li>var e="";
<li>var k="";
<li>for(c=0;c<str.length;c++){ 
         e=parseInt(str.charCodeAt(c)^Math.floor((l/h)*255));
         if(e<16) {k+="0"+e.toString(16) }
             else {k+=e.toString(16) }
         l=(b*l+a)%h }
<li>d=d.toString(16);
<li>while(d.length<8) { d="0" + d } ;
<li>k+=d;
<li>Astr.value = k;
<li> }

<li>function Adecode(encodeStr,key){ 
<li>var l="";
<li>for(var c=0;c<key.length;c++){
                 l+=key.charCodeAt(c).toString() } ;
<li>var g=Math.floor(l.length/5);
<li>var b= parseInt(l.charAt(g)+l.charAt(g*2)+l.charAt(g*3) + 
                l.charAt(g*4)+l.charAt(g*5));
<li>var a=Math.round(key.length/2);
<li>var h=Math.pow(2,31)-1;
<li>var d=parseInt(encodeStr.substring(encodeStr.length - 8 , 
               encodeStr.length),16);
<li>encodeStr=encodeStr.substring(0,encodeStr.length-8);
<li>l+=d;
<li>while(l.length>10){l=(parseInt(l.substring(0,10)) +
           parseInt(l.substring(10,l.length))).toString()};
<li>l=(b*l+a)%h;
<li>var e="";
<li>var k="";

<li>for(c=0;c<encodeStr.length;c+=2){ 
     e=parseInt(parseInt(encodeStr.substring(c,c+2),16) ^ 
     Math.floor((l/h)*255)); k+=String.fromCharCode(e);l=(b*l+a)%h }

<li>if(encodeURIComponent(k).charAt(0)=="%" || 
       encodeURIComponent(k).charAt(1)=="%" || 
       encodeURIComponent(k).charAt(2)=="%" )
       { alert("密碼錯誤 \n wrong password") }

<li>Astr.value =unescape(atob(k)) ;
<li> }
<li><</span>/script>  
</ol>
</pre>

Edit

#html #html #script #字串加密 #字串解密 #decode #encode #密碼 password #密碼錯誤 #字串加密編碼 String encryption #加密後字串解碼 String decoding after encryption

Javascript 字串或文章編碼加密 String or article encoding and encryption 2

Javascript 字串或文章編碼加密
String or article encoding and encryption 2

第三方提供 function。
 
CryptoJS.AES.encrypt(str,key).toString() 
           功能 字串/文章 編碼加密，
           傳回 原始字串進行編碼加密，
           str = 需要 編碼加密 字串/文章，
           key = 密碼。

CryptoJS.AES.decrypt(str,key).toString(CryptoJS.enc.Utf8)
           功能 將加密編碼還原為 字串/文章，
           傳回 加密編碼還原為 字串/文章，
           str = 加密後編碼，
           key = 密碼。

<div id="PM">加密內容 Encrypted content</div>
<div id="textareaCode"></div>

密碼/password 
<input class="Bt" id="Pww" value="123456789"   />

</script>

Edit

#html #html #script #字串加密 #字串解密 #decode #encode #密碼 password #密碼錯誤 #字串加密編碼 String encryption #加密後字串解碼 String decoding after encryption

btoa() / atob() / escape() / unescape()

btoa(str) : 將字串轉換為 Base64 編碼。
atob(str) : 將 Base64 編碼還原回字串。 
       但不支援中文字串。

btoa(str) : Convert string to Base64。
atob(str) : Base64 restore back to string。
       But does not support Chinese text strings。

escape()           : 將中文字串轉進行編碼後換為 Base64 編碼 
unescape()         : 將 Base64 編碼還原回轉回中文字串 
btoa(escape(str))  : 將字串轉換為 Base64 編碼
unescape(atob(str)): 將 Base64 編碼還原回字串

加入 escape() / unescape()  中英文都能支援 
Both Chinese and English are supported

Edit #html #Javascript #Base64 編碼 #decode #encode #btoa() #atob() #escape() #unescape() #字串 String

長度單位換算

function F市(x){
市丈.value = x ;
公里.value = 市丈.value * 0.0033333 ;
英碼.value = 市丈.value * 3.6453777 ;
ALLch() ;
}

function F里(x){
公里.value = x ;
市丈.value = 公里.value * 300 ;
英碼.value = 公里.value * 1093.6132983 ;
ALLch() ;
}

function ALLch(){
英尺.value = 英碼.value * 3 ;
英寸.value = 英尺.value *12;
英分.value = 英寸.value *8 ;

市尺.value = 市丈.value*10 ;
市寸.value = 市丈.value*100 ;
市分.value = 市丈.value*1000 ;

米.value   = 公里.value*1000 ;
厘米.value = 公里.value*100000 ;
毫米.value = 公里.value*1000000 ;
}

</script>

</tbody>
</table>

Edit #html #script #Javascript #公里 km #米 m #厘米 cm #市丈 #市尺 #市寸 #英碼 #英尺 #英寸 #長度換算 #長度轉換 #長度單位 #長度對換 #尺 #寸 #碼

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

display: grid

display: grid 網格顯示
grid-template-columns 網格模板列
grid-template-rows 網格模板行

Javascript 字串或文章編碼加密 String or article encoding and encryption 1

Javascript 字串或文章編碼加密
String or article encoding and encryption 1

Javascript 字串或文章編碼加密 String or article encoding and encryption 2

Javascript 字串或文章編碼加密
String or article encoding and encryption 2

btoa() / atob() / escape() / unescape()

btoa() / atob() / escape() / unescape()

長度單位換算

長度單位換算

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

display: grid

display: grid 網格顯示 grid-template-columns 網格模板列 grid-template-rows 網格模板行

Javascript 字串 或 文章 編碼加密 String or article encoding and encryption 1

Javascript 字串 或 文章 編碼加密 String or article encoding and encryption 1

Javascript 字串 或 文章 編碼加密 String or article encoding and encryption 2

Javascript 字串 或 文章 編碼加密 String or article encoding and encryption 2

btoa() / atob() / escape() / unescape()

btoa() / atob() / escape() / unescape()

長度單位換算

長度單位換算

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

display: grid 網格顯示
grid-template-columns 網格模板列
grid-template-rows 網格模板行

Javascript 字串或文章編碼加密 String or article encoding and encryption 1

Javascript 字串或文章編碼加密
String or article encoding and encryption 1

Javascript 字串或文章編碼加密 String or article encoding and encryption 2

Javascript 字串或文章編碼加密
String or article encoding and encryption 2