✍ 📁 🙈 🙉 🙊

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

<div style="font-size: 20px ;" >
  
<ol>
<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> }

<br>
<br>
    
  
<li>function Adecode(Str,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> }

</ol>
  
</div>

<br>
<br>
<input type='type'  id='DP139' value='加密內容'  >
<br>
<br>
<pre id="DIV">function Aencode(str,key) 功能 傳回 字串/文章 編碼加密，
                  str = 需要 編碼加密 字串/文章，
                  key = 密碼。
                  
function Adecode(str,key) 功能 傳回 將加密編碼還原為 字串/文章，
                  str = 加密後編碼，
                  key = 密碼。
                  
例 : Aencode("銀行","123456") 
     傳回 "ad9ff3c40c7372664ff58ce086420010015de271"

例 : Adecode("ad9ff3c40c....086420010015de271","123456")
     傳回 "銀行"  
</pre>

var textarea =document.createElement('textarea') ;
    textarea.innerHTML = DIV.innerHTML ;
    textarea.id="TT139" ;
    DIV.parentNode.replaceChild(textarea, DIV) ;

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

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}

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

return unescape(atob(k)) ;
}  
</script>

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

<input type='type' id='PWNO139' value='1234' > <input type='button' id='Button139' value='加密' onclick='Cha()' > <br> <br> <input type='type' id='DP139' value='加密內容' > <br> <br> <pre id="DIV"> <script src='https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js'></script> 第三方提供 function。 CryptoJS.AES.encrypt(str,key).toString() 功能字串/文章編碼加密，傳回原始字串進行編碼加密， str = 需要編碼加密字串/文章， key = 密碼。 CryptoJS.AES.decrypt(str,key).toString(CryptoJS.enc.Utf8) 功能將加密編碼還原為字串/文章，傳回加密編碼還原為字串/文章， str = 加密後編碼， key = 密碼。 " </pre> <script src='https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js'></script> <script> var textarea =document.createElement('textarea') ; textarea.innerHTML = DIV.innerHTML ; textarea.id="TT139" ; DIV.parentNode.replaceChild(textarea, DIV) ; function Cha(){ //alert( DP139.value) ; if(Button139.value == '加密'){ DP139.value = CryptoJS.AES.encrypt(DP139.value, PWNO139.value).toString() ; TT139.value = CryptoJS.AES.encrypt(TT139.value, PWNO139.value).toString() ; Button139.value='解碼' ;return } if(Button139.value == '解碼'){ DP139.value = CryptoJS.AES.decrypt(DP139.value, PWNO139.value). toString(CryptoJS.enc.Utf8) ; TT139.value = CryptoJS.AES.decrypt(TT139.value, PWNO139.value). toString(CryptoJS.enc.Utf8) ; Button139.value='加密' ;return } } </script> <style> #TT139 {width: 95%; height: 500px; font-size: 18px ;} #PWNO139{font-size: 20px ;} #Button139{font-size: 20px ;} #DP139{font-size: 20px ;} </style>
00

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

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

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