✍ 📁 🙈 🙉 🙊

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

密碼/password

原文字串/文章 Original string

<pre style="font-size:20px;">
function encode(str,key) 功能 傳回 字串/文章 編碼加密，
                  str = 需要 編碼加密 字串/文章，
                  key = 密碼。
                  
function decode(str,key) 功能 傳回 將加密編碼還原為 字串/文章，
                  str = 加密後編碼，
                  key = 密碼。
                  
例 : encode("銀行","123456") 
     傳回 "ad9ff3c40c7372664ff58ce086420010015de271"

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

<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

字型樣式

<b>bold 粗體 </b>
bold 粗體 <strong>important text 強調</strong>
important text 強調 <em>marks text 強調</em>
marks text 強調 <i>italic 斜體 </i>
italic 斜體 <cite>Define the title 作品名稱</cite>
Define the title 作品名稱 AAA<sub>subscript 下標 </sub>AAA
AAA_{subscript 下標}AAA AAA<sup>superscript 上標</sup>AAA
AAA^{superscript 上標}AAA <kbd>keyboard input 鍵盤符號</kbd>
keyboard input 鍵盤符號 <samp>Define text 簡單文字</samp>
Define text 簡單文字 <code>code 程式碼</code>
code 程式碼 <small>superscript 縮小字型</small>
superscript 縮小字型 <tt>teletype text 打字機文本 </tt>
teletype text 打字機文本 <big>big text 放大字型 </big>
big text 放大字型 <abbr title="abbreviation 英文縮寫">add </abbr>
add <acronym title="abbreviation 英文縮寫">add </acronym >
add <u>underlined 底線 </u>
underlined 底線 <ins>inserted 插入 </ins>
inserted 插入 <del>deleted 刪除線 </del>
~~deleted 刪除線~~ <s>Strikethrough 刪除 </s>
~~Strikethrough 刪除~~ <strike>Strikethrough 刪除</strike>
~~Strikethrough 刪除~~ <mark>market 高亮文字</mark>
market 高亮文字 <var>variables 變數</var>
variables 變數 <h3>h1 to h6 Title word 標題字</h3>

h1 to h6 Title word 標題字

Edit

#字型樣式 #html font #html 標題字 #html 變數 #html 刪除線 #html 底線

長度單位換算

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 #市丈 #市尺 #市寸 #英碼 #英尺 #英寸 #長度換算 #長度轉換 #長度單位 #長度對換 #尺 #寸 #碼

TradingView

<div class="tradingview-widget-container">
  <div id="tradingview_c7dae"></div>
  <div class="tradingview-widget-copyright"><a href="https://tw.tradingview.com/symbols/TVC-SILVER/" rel="noopener" target="_blank"><span class="blue-text">SILVER 圖表</span></a>由TradingView提供</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "TVC:GOLD",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "light",
  "style": "1",
  "locale": "zh_TW",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "withdateranges": true,
  "hide_side_toolbar": false,
  "allow_symbol_change": true,
  "watchlist": [
    "TVC:GOLD",
    "TVC:SILVER",
    "FX_IDC:USDCNY"
  ],
  "details": true,
  "hotlist": true,
  "calendar": true,
  "studies": [
    "MACD@tv-basicstudies",
    "MASimple@tv-basicstudies"
  ],
  "container_id": "tradingview_c7dae"
}
  );
  </script>
</div>