✍ 📁 🙈 🙉 🙊

值	描述
none	此元素不會被顯示。
block	此元素將顯示為塊級元素，此元素前後會帶有換行符。
inline	默認。此元素會被顯示為內聯元素，元素前後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會作為列表顯示。
run-in	此元素會根據上下文作為塊級元素或內聯元素顯示。
compact	CSS 中有值compact，不過由於缺乏廣泛支持，已經從CSS2.1 中刪除。
marker	CSS 中有值marker，不過由於缺乏廣泛支持，已經從CSS2.1 中刪除。
table	此元素會作為塊級表格來顯示（類似<table>），表格前後帶有換行符。
inline-table	此元素會作為內聯表格來顯示（類似<table>），表格前後沒有換行符。
table-row-group	此元素會作為一個或多個行的分組來顯示（類似<tbody>）。
table-header-group	此元素會作為一個或多個行的分組來顯示（類似<thead>）。
table-footer-group	此元素會作為一個或多個行的分組來顯示（類似<tfoot>）。
table-row	此元素會作為一個表格行顯示（類似<tr>）。
table-column-group	此元素會作為一個或多個列的分組來顯示（類似<colgroup>）。
table-column	此元素會作為一個單元格列顯示（類似<col>）
table-cell	此元素會作為一個表格單元格顯示（類似<td> 和<th>）
table-caption	此元素會作為一個表格標題顯示（類似<caption>）
inherit	規定應該從父元素繼承display 屬性的值。

iframe youtube 常用屬性 Commonly used Attributes

   youtube 重複播放 [autoplay + loop + playlist Attributes]
   自動播放 autoplay=1 
   重複播放 loop=1
   播放列表 playlist=影片ID 
   本片ID   i1_02Myn3Pg
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&loop=1&playlist=i1_02Myn3Pg

   youtube 不顯影片完結推廣 [rel=0 Attributes]
   不顯影片完結推廣 rel=0  
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&rel=0

   youtube 不顯示播放器控制選項 [controls=0 Attributes]
   不顯影片完結推廣 rel=0  
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&rel=0&controls=0

   youtube  靜音 [mute=1 Attributes]
   不顯影片完結推廣 rel=0  
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&rel=0&mute=1

前往 YouTube 嵌入式播放器及播放器参数網頁

Edit

#youtube #iframe youtube #youtube 常用屬性 #youtube Attributes #youtube 自動播放 #youtube 播放列表 #youtube 重複播放 #youtube autoplay #youtube loop #youtube autoplay #youtube rel

< iframe > 標籤的屬性 attributes

属性	描述
src	指定要被嵌入的網頁的網址 (URL)
height	指定 iframe 的高度，單位為像素 (pixel / %)
width	指定 iframe 的寬度，單位為像素 (pixel / %)
name	指定 iframe 的名稱 Name是可以重複的
id	指定 iframe 的身份證號碼 ID顯然是唯一的
frameborder	frameborder= 1 / 0 ，規定是否顯示框架周圍的邊框
longdesc	規定一個頁面，該頁面包含了有關 iframe 的較長描述
marginheight	定義 iframe 的頂部和底部的邊距
marginwidth	定義 iframe 的左側和右側的邊距
sandbox	該屬性對呈現在iframe框架中的內容啟用一些額外的限制條件 sandbox="" 啟用所有限制條件 sandbox="allow-same-origin" 允許將內容作為普通來源對待。如果未使用該關鍵字，嵌入的內容將被視為一個獨立的源 sandbox="allow-top-navigation" 嵌入的頁面的上下文可以導航（加載）內容到頂級的瀏覽上下文環境（browsing context）。如果未使用該關鍵字，這個操作將不可用 sandbox="allow-forms" 允許表單提交。 sandbox="allow-scripts" 允許腳本執行。
scrolling	規定是否在 iframe 中顯示滾動條 scrolling = "yes" scrolling = "no" scrolling = "auto"
seamless	規定 <iframe> 看上去像是包含文檔的一部分
srcdoc	規定在 <iframe> 中顯示的頁面的 HTML 內容
allow-forms	允許提交表單
allow-modals	允許打開 modal 視窗
allow-orientation-lock	允許鎖定螢幕方向，像是智慧型手機的水平朝向或垂直朝向
allow-pointer-lock	允許使用 Pointer Lock API
allow-popups	允許彈跳視窗，像是可以用 target="_blank"
allow-popups-to-escape-sandbox	允許彈跳視窗不繼承 sandbox 的設定
allow-presentation	允許開啟 presentation session
allow-same-origin	允許將 iframe 的內容視作 same origin
allow-scripts	允許 iframe 內容可以執行 JavaScript
allow-top-navigation	允許 iframe 可以將內容載入到 top level 的父層視窗，像是可以用 target="_top"
allow-top-navigation-by-user-activation	允許 iframe 可以將內容載入到 top level 的父層視窗，如果是使用者手動去點擊的話 sandbox: 當有這屬性時，表示針對 iframe 裡面的網頁啟用一些限制條件，屬性值如果留空表示啟用所有限制，當有設定值的時候表示移除這些限制，你可以用空格設定移除多個限制條件。可以用的值有

Edit

#iframe #iframe 標籤的屬性 #iframe 標籤的屬性 attributes #iframe attributes #iframe height #iframe width #iframe src #iframe name #iframe id #iframe frameborder #iframe longdesc #iframe marginheight #iframe marginwidth #iframe sandbox #iframe scrolling #iframe seamless #iframe srcdoc #iframe allow-forms #iframe allow-modals #iframe sallow-orientation-lock #iframe allow-pointer-lock #iframe allow-popups #iframe allow-popups-to-escape-sandbox #iframe allow-presentation #iframe allow-presentation #iframe allow-scripts #iframe allow-top-navigation #iframe allow-top-navigation-by-user-activation

iframe innerHTML 框架內容窗口文檔寫入

   HTML 內聯框架元素 < iframe > 表示嵌套的browsing context，
   它能夠將另一個 HTML 頁面嵌入到當前頁面中。
       <iframe id="iframe"  ></iframe> 
       iframe = document.getElementById('iframe')
       ifdoc =iframe.contentWindow.document.body 
       ifdoc =iff.contentWindow.document.body 
       ifdoc.innerHTML = '  html 內容  '

var ifdoc =iff.contentWindow.document.body ;
ifdoc.innerHTML ='<body>' ;
ifdoc.innerHTML+='<font size="6" color="blue"><b>this iframe id is iframe ';
ifdoc.innerHTML+='<p id="Pid">PPP</p>';
ifdoc.innerHTML+='<div id="DIV1" >div1</div>' ;
ifdoc.innerHTML+='<div id="DIV2" >div2</div>' ;
ifdoc.innerHTML+='<a   id="aid" >aaa</a>' ;
ifdoc.innerHTML+='</body>' ;
            //or
//var ifdoc = document.getElementById('iframe').contentWindow.document;
//ifdoc.open();
//ifdoc.write('<p id="Pid">PPP</p>');
//ifdoc.write('<body>');
//ifdoc.write('<div id="DIV1" >div1</div>');
//ifdoc.write('<div id="DIV2" >div2</div>');
//ifdoc.write('<a id="aid" >aaa</a>');
//ifdoc.write('</body>');
//ifdoc.close();
</script>

outT =  "<font size='6' color='blue'>" ;
outT += "<B>var iff = document.getElementById('iframe')</B>" ;
outT +=  "<br><font size='5' color='black'>" ;
outT += "<br>iff = " + iff   ;
outT += "<br>iff.nodeName = "+iff.nodeName   ;
outT += "<br>iff.children.length  = " + iff.children.length  ;

outT += "<br>iff.contentWindow.document = " + iff.contentWindow.document  ;
outT += "<br> iff.contentWindow.document.body  = " + 
                  iff.contentWindow.document.body ;
outT += "<br> iff.contentWindow.document.body.innerText  = " + 
                  iff.contentWindow.document.body.innerText;

outT += "<br> iff.contentWindow.document.body.children.length = " + 
                  iff.contentWindow.document.body.children.length;

outT += "<div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.children[0].nodeName  = " + 
                  iff.contentWindow.document.body.children[0].nodeName  ;
outT += "<br> iff.contentWindow.document.body.children[1].nodeName  = " + 
                  iff.contentWindow.document.body.children[1].nodeName  ;
outT += "<br> iff.contentWindow.document.body.children[2].nodeName  = " + 
                  iff.contentWindow.document.body.children[2].nodeName  ;
outT += "<br> iff.contentWindow.document.body.children[3].nodeName  = " + 
                  iff.contentWindow.document.body.children[3].nodeName  ;

outT += "</div><div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.children[0].id= " + 
                  iff.contentWindow.document.body.children[0].id;
outT += "<br> iff.contentWindow.document.body.children[1].id= " + 
                  iff.contentWindow.document.body.children[1].id;
outT += "<br> iff.contentWindow.document.body.children[2].id= " + 
                  iff.contentWindow.document.body.children[2].id;outT += "<br> iff.contentWindow.document.body.children[3].id= " + 
                  iff.contentWindow.document.body.children[3].id;

outT += "</div><div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.innerHTML = " + 
                  iff.contentWindow.document.body.innerHTML ;
outT += "</div>" ;

DP.innerHTML  = outT ;
</script>

Edit

#iframe #內聯框架元素 #document #contentWindow #iframe.contentWindow.document #innerHTML #iframe.contentWindow.document.body

iframe.contentWindow.document iframe.open() iframe.write() iframe.close()

框架內容窗口文檔寫入
iframe.contentWindow.document
iframe.open() iframe.write() iframe.close()

   HTML 內聯框架元素 <iframe> 表示嵌套的browsing context，
   它能夠將另一個 HTML 頁面嵌入到當前頁面中。
   使用document.write()建立的iframe文件，
      <iframe id="iframe"  ></iframe> 
      var ifdoc = document.getElementById('iframe').contentWindow.document，
      ifdoc.open()
      ifdoc.write( html 內容 )
      ifdoc.write( html 內容 )
      ifdoc.write( html 內容 )
      ifdoc.close()

outT =  "<font size='6' color='blue'>" ;
outT += "  < script > <br>" ;
outT += "<B>var iff = document.getElementById('iframe')</B>" ;
outT +=  "<br><font size='5' color='black'>" ;
outT += "<br>iff = " + iff   ;
outT += "<br>iff.nodeName = "+iff.nodeName   ;
outT += "<br>iff.children.length  = " + iff.children.length  ;

outT += "<br> iff.contentWindow.document.body.children.length = " + 
                  iff.contentWindow.document.body.children.length;

outT += "</div><div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.innerHTML = " + 
                  iff.contentWindow.document.body.innerHTML ;
outT += "</div>" ;

DP.innerHTML  = outT ;
</script>

Edit

#iframe #內聯框架元素 #document #contentWindow #iframe.contentWindow.document #script open() #script write() #script close()

CSS animation 動畫屬性

<div style="font-size:22px;">
<pre>
CSS3 animation 動畫屬性是 CSS 用來設計網頁動畫的標準屬性，
     用來控制動畫的移動方式、顏色變化、移動方向、顏色變化 ... 等效果。
    
animation:name duration function delay count direction mode state
@keyframes 動畫名稱{  10%{..動作..}
                     50%{..動作..} 
                    100%{..動作..} }
</pre>

<table border="1" style="font-size:22px;">
<thead>
<tr>
<th>屬性</th>
<th>說明</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>animation-name</strong></td>
<td>動畫名稱</td>
</tr>
<tr>
<td><strong>animation-duration</strong></td>
<td>動畫持續時間，<em>預設 0</em>，單位 s 或 ms。</td>
</tr>
<tr>
<td><strong>animation-delay</strong></td>
<td>動畫延遲播放時間，<em>預設 0</em>，單位 s 或 ms。</td>
</tr>
<tr>
<td><strong>animation-iteration-count</strong></td>
<td>動畫播放次數，<em>預設 1</em>。<br>其他還有 infinite。</td>
</tr>
<tr>
<td><strong>animation-timing-function</strong></td>
<td>動畫加速度函式，<em>預設 ease</em>。<br>其他還有： linear、ease-in、ease-out、ease-in-out<br>step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。</td>
</tr>
<tr>
<td><strong>animation-direction</strong></td>
<td>動畫播放方向，<em>預設 normal</em>。<br>其他還有 reverse、alternate、alternate-reverse。</td>
</tr>
<tr>
<td><strong>animation-fill-mode</strong></td>
<td>動畫播放前後模式，<em>預設 none</em>。<br>其他還有 forwards、backwards、both。</td>
</tr>
<tr>
<td><strong>animation-play-state</strong></td>
<td>動畫播放或暫停狀態，<em>預設 running</em>。<br>其他還有 paused。</td>
</tr>
</tbody>
</table>
<br>
<br>
<span style="color: blue;"><span style="font-size: x-large;">關鍵影格 keyframes</span></span> 的設定可以說是 CSS3 animation 動畫效果的關鍵，要動畫就跑起來，雖要設定關鍵影格，要設定關鍵影格有兩個重點，分別是（from）從哪邊開始跑以及（to）跑到哪裡結束，關鍵影格是透過 percentage 來判斷動畫啟動的時間點以及結束的時間點，0% 代表的是動畫起點，100% 則代表動畫結束點，如 10% 20% ....90% 100% 用 from 與 to 來設定，這部分在範例中也都會看到。關鍵影格描述的是動畫建變過程的外觀，也就是說，除了可以利用關鍵影格來控制 animation 動畫的跑動，也可以控制動畫的顏色,大小 改變。 
</div>

https://www.oxxostudio.tw/articles/201803/css-animation.html

@keyframes MO1{
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:87%; top:0px;}
  50%  {background-color:blue; left:87%; top:75%;}
  75%  {background-color:green; left:0px; top:75%;}
  100% {background-color:red; left:0px; top:0px;}  }

#D2{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation : MO2 4s infinite ; }

@keyframes MO2{
  0%   {background-color:yellow; left:87%; top:-100px;}
  25%  {background-color:blue; left:0px; top:50%;}
  50%  {background-color:red; left:0%; top:-100px;}
  75%  {background-color:gold; left:87%; top:50%;}
  100% {background-color:olive; left:87%; top:-100px;} }
</style>

<div id="D1" style="font-size:30px;">id=D1</div>
<div id="D2" style="font-size:30px;">id=D2</div>
<pre style="color:#a52a2a;margin-top:-200px;font-size:22px;">
#D1{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation : MO1 4s infinite ;
}

#D2{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation : MO2 4s infinite ; }

<div class="bomb">按我</div>
<pre style="font-size:20px;">.bomb{ width:100px;
       text-align: center;
       background-color:#CCCCCC;
       border: 5px outset darkgray;
       border-radius: 15px; 
       cursor:pointer}
.bomb:active { border: 5px inset darkgray;  }
.bomb:after  { content: ">";
               animation: Rafter 1s linear infinite ;}
.bomb:before { content: "<";
               animation: Lbefore 1s linear infinite ;}
 
@keyframes Rafter{ 10% { content: ">>";  }
                   50% { content: ">>>"; }
                   90% { content: ">>";  }  }
 
@keyframes Lbefore { 10% { content: "<<";  }
                     50% { content: "<<<"; }
                     90% { content: "<<";  }  } </pre>

.bomb:active{ border: 5px inset darkgray;  }

.bomb:after { content: ">";
               animation: Rafter 1s linear infinite ;}
.bomb:before  { content: "<";
                 animation: Lbefore 1s linear infinite ;}

@keyframes Rafter{   10% { content: ">>";  }
                     50% { content: ">>>"; }
                     90% { content: ">>";  }  }
 
@keyframes Lbefore { 10% { content: "<<";  }
                     50% { content: "<<<"; }
                     90% { content: "<<";  }  }

</style>

Edit

CSS font 字形字串字樣文字

CSS font text 字體文本

font CSS // 字體 CSS

font-size: 20px ;

color : black ;

font-weight : normal ;

font-style: normal ;

font-family: serif ;

text-transform: initial ;

text-decoration : inherit ;

line-height: normal;

word-spacing: normal;

letter-spacing:normal;

font style // 字體樣式

object.style.fontSize = "20px";

object.style.color = "black";

object.style.fontWeight = "normal";

object.style.fontStyle = "normal";

object.style.fontFamily = "serif";

object.style.textTransform = "initial";

object.style.textDecoration = "inherit";

object.style.lineHeight = "normal";

object.style.wordSpacing = "normal";

object.style.letterSpacing = "normal";

Edit

#html #script #CSS font 字形字串字樣文字 #CSS font text 字體文本 #fontSize #color #fontStyle #fontFamily #textTransform #textDecoration #lineHeight #wordSpacing #font-size #font-weight #font-style #font-family #text-transform #text-decoration #word-spacing #capitalize #lowercase #overline #underline #line-through

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

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>