✍ 📁 🙈 🙉 🙊

2022年4月30日星期六

a href

<t>window.location 當前頁面的地址 (URL)</t>
<br><br>
<div class="WR">
window.location.href 返回當前頁面的 href (URL) : <br>
<script>document.write( window.location.href ) </script> </div><br>

<div class="WR">
window.location.hostname 返回 web 主機的域名 : <br>
<script>document.write( window.location.hostname ) </script></div><br>

<div class="WR">
window.location.pathname 返回當前頁面的路徑或文件名 : <br>
<script>document.write( window.location.pathname ) </script></div><br>

<div class="WR">
window.location.protocol 返回使用的 web 協議（http: 或 https:） : <br>
<script>document.write( window.location.protocol ) </script></div><br>

<div class="WR">
window.location.port 返回使用的 顯示主機的端口號 : <br>
<script>document.write( window.location.port) </script></div><br>

window.location.assign   加載新文檔<br>
<button onclick="window.location.assign('https://html.ug5g.com/')">window.location.assign("https://html.ug5g.com/") </button>
<br><br>
<button onclick="window.open('http://www.google.com')">window.open('http://www.google.com') </button>
<br><br>
                  or
<br><br>
<div class="WR">
document.URL : <br>
<script>document.write( document.URL) </script></div>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

Edit

#html #style #script #javascript #css #a href # a:link #a:visited #a:hover #a:active #target #title #_self #_blank #_paren #_top #framename #超連結 #鏈接文檔

Array sort

<t> JavaScript Array sort() / reverse() 數組排序</t>
<pre><div id="DP"></pre>
</n>

Tx+='<br>Array = ["Banana", "Orange", "Apple", "Mango"]<br>';
Tx+="Array.sort() = " +Array.sort() + "<br>";
Tx+="Array.reverse() = " +Array.reverse() ;

Tx+= "\n\n\n   <t>數字 digital</t> ";

var numbers = [4, 2, 5, 1, 3];
Tx+="<br>var numbers = [4, 2, 5, 1, 3];" ;
Tx+="<br>numbers.sort(function(a, b) { return a - b;}); = " ; "<br>";
Tx+=numbers.sort(function(a, b) { return a - b;});

var numbers = [4, 2, 5, 1, 3];
Tx+="<br><br>var numbers = [4, 2, 5, 1, 3];" ;
Tx+="<br>numbers.sort(function(b , a) { return a - b;}); = " ; "<br>";
Tx+=numbers.sort(function(b, a) { return a - b;});

numbers = [45, 24, 57, 1, 73];
Tx+="<br><br>var numbers = [45, 24, 57, 1, 73];" ;
Tx+="<br>numbers.sort(function(a, b) { return a - b;}); = " ; "<br>";
Tx+=numbers.sort(function(a, b) { return a - b;});

DP.innerHTML=Tx;
</script>
  
<style>
pre,n {font-size:20px;}
t  {font-size:30px;color:blue;font-weight : bold; }
r  {color:red;}

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

<pre><t> JavaScript Array sort() / reverse()數組排序</t>
<div id="DP"></div>
</pre>

Tx+="<pre>var Int = [ {It: 'mango' , Price: 14},\n"  ; 
Tx+="            {It: 'apple' , Price:  5},\n";  
Tx+="            {It: 'orange', Price:  8},\n";
Tx+="            {It: 'lemon' , Price:  7}, \n";
Tx+="            {It: 'litchi', Price: 35}  ];\n\n";
Tx+="Int = Int.sort(function(<r>a , b</r>){return a.Price > b.Price? -1 : 1;})\n"
var FruitA= Int.sort(function(a, b){return a.Price > b.Price? -1 : 1;});
for (var i = 0, l = FruitA.length; i < l; ++i) {
    Tx+=(FruitA[i].It+ ", " +
         FruitA[i].Price+ "<br/>"); }
Tx+="\n\n";
Tx+="Int = Int.sort(function(<r>b , a</r>){return a.Price > b.Price? -1 :  1;})\n"
var FruitB= Int.sort(function(b , a){return a.Price > b.Price? -1 : 1;});
for (var i = 0, l = FruitB.length; i < l; ++i) {
    Tx+=(FruitB[i].It+ ", " +
         FruitB[i].Price+ "<br/>"); }

DP.innerHTML=Tx;
</script>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

<t> JavaScript Array sort() / reverse() 數組排序</t>
<pre><div id="DP"></div>
sort by It :
Int.sort(function(a,b){return a.It< b.It? -1 : 1;})

sort by Origin:
Int.sort(function(a,b){return a.Origin< b.Origin? -1 : 1;})

sort by Price:
Int.sort(function(a,b){return a.Price< b.Price? -1 : 1;})
</pre>
<script>
function Ttt (x ){
var Int= [ {It: 'mango'  , Origin:'us'        , Price: 14.2}, 
           {It: 'apple'  , Origin:'hk'        , Price:  15.6},    
           {It: 'orange' , Origin:'China'     , Price:  8.5},
           {It: 'lemon'  , Origin:'Japan'     , Price:  7.3},
           {It: 'litchi' , Origin:'Australia' , Price: 35.9} ];

var Tb= '<table border="1"><tbody><tr>';
Tb+= '<th><button onclick="Ttt (1)" >sort by It</button>'    ;
Tb+= '<th><button onclick="Ttt (2)" >sort by Origin</button>'    ;
Tb+= '<th><button onclick="Ttt (3)" >sort by Price</button>' ;
Tb+= '</tr><tr>' ;

if(x==1){
Int=Int.sort(function(a,b){return a.It< b.It? -1 : 1;}) }

if(x==2){
Int=Int.sort(function(a,b){return a.Origin< b.Origin? -1 : 1;}) }

if(x==3){
Int=Int.sort(function(a,b){return a.Price< b.Price? -1 : 1;}) }

for(var i=0; i<Int.length ;i++){
Tb+='<td>' + Int[i].It + '</td>';
Tb+='<td>' + Int[i].Origin+ '</td>';
Tb+='<td>' + Int[i].Price+ '</td>';
Tb+='</tr><tr>' ;
}

Tb+= '</tbody></table> ';

DP.innerHTML =Tb;
}
Ttt(1);
</script>
  
<style>
pre,n ,button {font-size:20px;}
t  {font-size:30px;color:blue;font-weight : bold; }
r  {color:red;}

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

Edit

#html #style #script #javascript #css #Array sort() #Array reverse() #reverse() #數組排序 #sort()

2022年4月27日星期三

html select

<t><<?>select> dropdown menu 用來建立下拉式選單</t>
<pre> 讓使用者可以從一堆選項中選擇出一個或多個選項。
 <<?>select> 本身做為選單的容器，在裡面用 <<?>option> 標籤來建立個別選項。

<table class="dataintable">
<tbody><tr><tr><td colspan="2"><t>select</t> 標籤上可以用的屬性 attributes : </td></tr><tr>
<td>autofocus</td><td>規定在頁面加載後文本區域自動獲得焦點。</td></tr>

<tr><td>disabled</td><td>規定禁用該下拉列表。</td></tr>

<tr><td>form</td><td>規定文本區域所屬的一個或多個表單。</td></tr>

<tr><td>multiple</td><td>規定可選擇多個選項。</td></tr>

<tr><td>name</td><td>規定下拉列表的名稱。</td></tr>

<tr><td>required</td><td>規定文本區域是必填的。</td></tr>

<tr><td>size</td><td>規定下拉列表中可見選項的數目。</td></tr>
</tbody></table>

<table class="dataintable">
<tbody><tr><td colspan="2"><t>option</t> 標籤上可以用的屬性 attributes :</td></tr><tr>
<tr><td>value</td><td>定義送往服務器的選項值。</td></tr>

<td>disabled</td><td>規定此選項應在首次加載時被禁用。</td></tr>

<td>label</td><td>定義當使用 時所使用的標注。</td></tr>

<td>selected</td><td>規定選項（在首次顯示在列表中時）表現為選中狀態。</td>
</tr>

</tbody></table>

</pre>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

<t><<?>select> 用來建立下拉式選單 例子 </t>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
第二項 <r>selected</r> 會默認選中。</th></tr></tr>
<td width="75%"><pre><<?>select>
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" <r>selected</r> >select 2<<?>/option>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
 <<?>/select></pre>
</td><td>
    <select>
       <option value="A">select 1</option>
       <option value="B" selected >select 2</option>
       <option value="C">select 3</option>
       <option value="D">select 4</option>
    </select>
</td></tr></tbody></table>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
<r>multiple</r> 下拉列表中可進行多個選擇</th></tr>
<td width="75%"><pre><<?>select <r>multiple</r> >
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" >select 2<<?>/option>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
 <<?>/select></pre>
</td><td>
    <select multiple >
       <option value="A" >select 1</option>
       <option value="B" >select 2</option>
       <option value="C" >select 3</option>
       <option value="D" >select 4</option>
    </select>
</td></tr></tbody></table>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
<r>size</r> 用於指定下拉列表中的可見選項數。它的默認值為4。
</th></tr><tr>
<td width="75%"><pre><<?>select <r> size="2"</r> >
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" >select 2<<?>/option>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
   <<?>option value="E" >select 5<<?>/option>
 <<?>/select></pre>
</td><td>
    <select size="2">
       <option value="A" >select 1</option>
       <option value="B" >select 2</option>
       <option value="C" >select 3</option>
       <option value="D" >select 4</option>
       <option value="E" >select 5</option>
    </select>
</td></tr></tbody></table>

<t><<?>select> 用來建立下拉式選單 例子 </t>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
<r><<?>optgroup label="1 to 2"></r> 相關標簽</th></tr></tr>
<td width="75%"><pre><<?>select>
   <<?>option style="display:none;" >請選擇<<?>/option>
           <r><<?>optgroup label="1 to 2"></r>
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" >select 2<<?>/option>
           <r><<?>optgroup label="3 to 4"></r>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
 <<?>/select></pre>
</td><td>
    <select>
       <option style="display:none;">請選擇</option>
           <optgroup label="1 to 2">
       <option value="A">select 1</option>
       <option value="B">select 2</option>
           <optgroup label="3 to 4">
       <option value="C">select 3</option>
       <option value="D">select 4</option>
    </select>
</td></tr></tbody></table>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
<r>style="display:none"</r> option不能選擇</th></tr></tr>
<td width="75%"><pre><<?>select>
   <<?>option <r>style="display:none;"</r> >請選擇<<?>/option>
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" >select 2<<?>/option>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
 <<?>/select></pre>
</td><td>
    <select>
       <option style="display:none;">請選擇</option>
       <option value="A">select 1</option>
       <option value="B">select 2</option>
       <option value="C">select 3</option>
       <option value="D">select 4</option>
    </select>
</td></tr></tbody></table>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
<r>onchange="this.selectedIndex=0"</r> 擇後返回原位 </th></tr></tr>
<td width="75%"><pre><<?>select <r>onchange="this.selectedIndex=0"</r> >
   <<?>option style="display:none;" >請選擇<<?>/option>
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" >select 2<<?>/option>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
 <<?>/select></pre>
</td><td>
    <select onchange="this.selectedIndex=0">
       <option style="display:none;">請選擇</option>
       <option value="A">select 1</option>
       <option value="B">select 2</option>
       <option value="C">select 3</option>
       <option value="D">select 4</option>
    </select>
</td></tr></tbody></table>

<div id="S1" onclick="DPcss(this)">
<label class="S1">
      <select  >
        <option>select 1</option>
        <option>Coffee</option>
        <option>Tea</option>
        <option>Juice</option>
        <optionCocktail</option>
      </select>
</label>
<style>
.S1 select { width: 140px; height: 35px;
             padding: 4px; color:indigo;
             font-size:20px; 
             border-radius: 4px;
             box-shadow: 2px 2px 8px #999;
             background: #eee;
             border: none;
             outline: none;
             display: inline-block;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;    }

.S1 select:hover {background: #efe;}
.S1 select Option { color:blue; font-size:18px; }
.S1  {  position: relative; }

.S1::after { content: '< >';
                  font-size:20px;
                  color: #666;
                  background: none;
                  -webkit-transform: rotate(90deg);
                  -moz-transform: rotate(90deg);
                  transform: rotate(90deg);
                  right: 8px;
                  top: -6px;
                  padding: 0 0 2px;
                  border-bottom: 1px solid #ddd;
                  position: absolute;
                  pointer-events: none; }

</style>
</div >

<div id="S2" onclick="DPcss(this)" >
<label class="S2">
     <select>
    <option value="0" style="display:none;" >select 2</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
      </select>
</label>
<style>
.S2 select { width: 200px; height: 40px;
             padding: 4px; color: white;
             font-size:20px; 
             border-radius: 4px;
             box-shadow: 2px 2px 8px #999;
             background:  #2c3e50;
             border: none;
             outline: none;
             display: inline-block;
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
             cursor: pointer;   }

.S2 select:hover {background: #2c5a60;}
.S2 select Option { color:blue; font-size:18px; }
.S2  { position: relative; }

.S2:after { content: '\25BC';
                  font-size:20px; 
                  color:sandybrown;
                  background: none;
                //-webkit-transform: rotate(90deg);
                //-moz-transform: rotate(90deg);
                //transform: rotate(90deg);
                   right: 8px;
                   top: -5px;
                 //padding: 0 0 2px;
                 //border-bottom: 1px solid #ddd;
                   position: absolute;
                   pointer-events: none; }

.S2 select Option { color:red; font-size:18px; }
</style>
</div >

<div id="S3" onclick="DPcss(this)" >
<label class="S3" >
     <select>
    <option value="0" style="display:none;" >select 3</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
      </select>
</label>

.S3 select:hover {background: #D3D3D3;}
.S3 select Option { color:blue; font-size:18px; }
.S3    {  position: relative; }

.S3:after { content: '☝';
                  font-size:26px;
                  color: #666;
                  background: none;
                  -webkit-transform: rotate(-90deg);
                  -moz-transform: rotate(-90deg);
                  transform: rotate(-90deg);
                  right: 10px;
                  top: -10px;
                  padding: 0 0 2px;
                  border-bottom: 1px solid #ddd;
                  position: absolute;
                  pointer-events: none; }

</style>
</div >
</div>
<br>HTML CSS
  <div id="DP"></div>

function DPcss(x){
Textcss.value = x.innerHTML ;
//alert(x.innerHTML  )
}

DPcss(S1)

</script>

Edit

#html #style #script #javascript #html select #select #option #標簽 #autofocus #disabled #form #multiple #required #size #value #label #下拉式選單

Adding options to select

<table><tr><td>
select before:</td><td>
<input type="button" value="remove option"  onclick="beforeRemove ()">
</td><td>
<input type="button" value="add option"     onclick="beforeADD ()" >
</td></tr><tr><td>
select after:</td><td>
<input type="button" value="remove option"  onclick="afterRemove ()" >
</td><td>
<input type="button" value="add option"  onclick="afterADD ()" >
</table>

<div id="html">
<select id="selectID" multiple>
   <option value="1" >option 1</option>
   <option value="2" >option 2</option>
   <option value="3" >option 3</option>
   <option value="4" >option 4</option>
</select></div>

function beforeADD (){
 var opt = document.createElement('option');
     opt.value = (selectID[0].value-1) ;
     opt.text= "option  " + (selectID[0].value-1);
     selectID.add(opt,0);
     selectID.size=selectID.length; 
     DDP() }

function beforeRemove (){
 selectID.remove(0);
 selectID.size=selectID.length; 
 DDP()}

function afterRemove (){
 selectID.remove(selectID.length-1);
 selectID.size=selectID.length; 
 DDP()}

function afterADD (){
 var opt = document.createElement('option');
 var xx=selectID.length-1  ;
     opt.value =  parseFloat(selectID[xx].value)+1    ;
     opt.text  =  "option " + (parseFloat(selectID[xx].value)+1)  ;
     selectID.add(opt);
 selectID.size=selectID.length;
 DDP() }

function DDP(){
var i=0 , Tt="";
Tt += "<select> ";
for(i=0 ; i<selectID.length ; i++)
       {  Tt += "\n" + '  <option value="'  ;
           Tt += selectID[i].value + '" >' ; 
              Tt += selectID[i].text + '</option>' ; }

Tt += '\n</select>';
Textcss.innerHTML =Tt ;
 }
DDP();
</script>

Edit

#html #style #script #javascript #html select #select #option #標簽 #autofocus #disabled #form #multiple #required #size #value #label #下拉式選單 #add() #remove()

2022年4月21日星期四

HTML button

<pre><t>HTML <<?>button> 表單按鈕</t>
  <<?>button>按鈕文字<<?>/button>  <button>按鈕文字</button>

<<?>input type="button" value="按鈕文字" > <input type="button" value="按鈕文字">

button   : 屬性  
  disabled : 不能夠動作的按鈕，僅能看不能按。
  name     : 按鈕的名稱
  type     : button（單純按鈕）、reset（清空表單）、submit（送出表單）
  value    : 按鈕文字、 按鈕的値

onclick="function ()" 
   onclick="{javascript}"
  
<</>input <r>onclick="alert('按我')"</r> type="button" value="按我" /> <input onclick="alert('按動')" type="button" value="按我" />

<</>button <r>onclick="alert('按我')"</r> > 按我 <</>/button> <button onclick="alert('按我')" > 按我 </button>

<</>button <r>onclick="alert('按我')"</r>><</>img src="url" /><</>/button><button onclick="alert('按我')" > <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8h9EfbSR8fPGNN1a7R-_zi3M6NJayt92j02qbZ4TY8MVoDEU_Y-pEiU03B6ya8jqxgh6D6XmVJ7isgHcE3VPORLiaor1u0QUCWkjtUdYDiuO__XQY1Xhu23fwIjTR9VzPKB_eJFxdWxpy/w40-h120-rw/"> </button>

<</>button style="background:url(圖片網址)" /></button><button style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8h9EfbSR8fPGNN1a7R-_zi3M6NJayt92j02qbZ4TY8MVoDEU_Y-pEiU03B6ya8jqxgh6D6XmVJ7isgHcE3VPORLiaor1u0QUCWkjtUdYDiuO__XQY1Xhu23fwIjTR9VzPKB_eJFxdWxpy/w40-h120-rw/); width:40px;height:25px" ></button>

</pre>

<t>CSS button</t>  <br>

<div id="DP1" >
<button id="B1"  onclick="Bcss(DP1)" title="B1">B1</button>
<style id="st1">
#B1{ height:50px ; width:50px ;
     font-size: 30px ;
     cursor: pointer ;
     color: #fff ;
     background-color: #4CAF50 ;
     border-radius: 50px ;
     box-shadow: 4px 4px #999 ;}

#B1:hover  { background-color: #3e8e41 ;}

#B1:active { background-color: #3e8e41 ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}
</style>
</div>

<div id="DP2" >
<button id="B2"  onclick="Bcss(DP2)" title="B2">B2</button>
<style id="st2">
#B2 { height:50px; width:100px ;
      font-size: 30px ;
      cursor: pointer ;
      color: #fff ;
      background-color: #4CAF50;
      border-radius: 50px ;
      box-shadow: 4px 4px #999 ;}

#B2:hover  { background-color: #3e8e41 ;}

#B2:active { background-color: #3e8e41 ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}

</style>
</div>

#B3:hover { background-color: gainsboro ;}

#B3:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}
</style>
</div>

<div id="DP4" >
<button id="B4"  onclick="Bcss(DP4)" title="B4">B4</button>
<style id="st4">
#B4 { height:20px ; width:50px ;
      font-size: 16px ;
      cursor: pointer ;
      color: black;
      background-color: lightgray ;
      border-radius: 8px ;
      box-shadow: 4px 4px #999 ;}

#B4:hover { background-color: gainsboro ;}

#B4:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}

</style>
</div>

#B5:hover {background-color: ghostwhite ;}

#B5:active { color: #666;
             box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff ;}
</style>
</div >

#B6:hover { background-color: gainsboro ;}

#B6:active { border: 3px inset #d5d5d5 ;}
</style>
</div >

#B7:hover { background-color: gainsboro ;}

#B7:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}

#B7{animation: mymove 1s infinite;}

@keyframes mymove { 60%  {color:crimson; }
                    80%  {color:yellow;  }
                    90%  {color:orange;  }
                    100% {color:brown;   }  }
</style>
</div>
</div>

function Bcss(x){
Textcss.value=x.innerHTML ;
}
Bcss(DP1)

</script>

.B1{
height:30px ; 
width:100px ; 
font-size: 18px ; 
cursor: pointer ; 
color: #fff ; 
background: darkgray ; 
border-radius: 50px ; 
box-shadow: 4px 4px #999 ;}

.B1:hover {
background: lightslategray  ;}

.B1:active {
background: gainsboro ; 
box-shadow: 1px 1px #666 ; 
transform: translate(4px,4px) ;}
</style>
</nobn >

.B2:hover {
background: lightslategray  ;}

.B2:active {
background: gainsboro ; 
box-shadow: 1px 1px #666 ; 
transform: translate(4px,4px) ;}
</style>
</nobn >

var TT ="</marquee>" ;
txt2 = txt2 .replace(TT,"<<?>/marquee>" ) ;
txt2 = txt2 .replace(TT,"<<?>/marquee>" ) ;

txt2 = txt2 .replace(/ </," <</>") ;
txt2 = txt2 .replace(/<m/,"<</>m") ;
txt2 = txt2 .replace(/<m/,"<</>m") ;
txt2 = txt2 .replace(/<style>/,"<br><br><</>style><br>") ;
txt2 = txt2 .replace(/;}/g,";}<br><br>") ;
txt2 = txt2 .replace(/; /g , ";<br>") ;
txt2 = txt2 .replace("</style>" , "<<?>/style>") ;

TP.innerHTML  = txt2   ;
}
Bcss(B1)

</script>

Edit

#html #style #script #javascript #button #input button #onclick #height #width #hover #background color #transform

2022年4月18日星期一

addEventListener keyboard

Target.addEventListener( )
添加事件監聽器

<t1>addEventListener 監視 keydown 的事件 </t1>
<pre style="font-size: 20px ">監視按鍵盤事件
window.addEventListener( "keydown",  function(event) {...} )
window.addEventListener( "keyup   ",  function(event) {...} )
window.addEventListener( "keypress",  function(event) {...} )

Event.preventDefault() : 如果事件可以被取消，就取消事件行為，
                         但不會影響事件的傳遞，事件仍會繼續傳遞。

keydown  ：按下鍵盤時觸發。
keyup     :鬆開鍵盤時觸發。
keypress ：按下有值的鍵時觸發，Ctrl、Alt、Shift、Meta 這樣無值的鍵。

event.key       返回按下的鍵。
event.ctrlKey   是否按下ctrl    鍵 true/false。
event.shiftKey  是否按下shiftKey鍵 true/false。 
event.altKey    是否按下altKey  鍵 true/false。
event.charCode  ASCII character的數字。
event.keyCode   鍵盤中存在的數字。
</pre>

<table border="1"><tbody>
<tr><td> 
</td><td>keydown
</td><td>keyup
</td><td>keypress
</td></tr>

<tr><td>event.key
</td><td id="A1">
</td><td id="A2">
</td><td id="A3">
</td></tr>

<tr><td>event.ctrlKey 
</td><td id="B1">
</td><td id="B2">
</td><td id="B3">
</td></tr>

<tr><td>event.shiftKey
</td><td id="C1">
</td><td id="C2">
</td><td id="C3">
</td></tr>

<tr><td>event.altKey
</td><td id="altKey1">
</td><td id="altKey2">
</td><td id="altKey3">
</td></tr>

<tr><td>event.charCode
</td><td id="D1">
</td><td id="D2">
</td><td id="D3">
</td></tr>

<tr><td>event.keyCode
</td><td id="E1">
</td><td id="E2">
</td><td id="E3">
</td></tr>

</tbody></table>
</td><td id="F1">
</td><td id="F2">
</td><td id="F3">
</td></tr>

window.addEventListener( "keyup",  function(event) {
A2.innerHTML =   event.key;
B2.innerHTML =   event.ctrlKey;
C2.innerHTML =   event.shiftKey;
altKey2.innerHTML =   event.altKey; 
D2.innerHTML =   event.charCode;
E2.innerHTML =   event.keyCode;
 })

window.addEventListener( "keypress",  function(event) {
A3.innerHTML =   event.key;
B3.innerHTML =   event.ctrlKey;
C3.innerHTML =   event.shiftKey;
altKey3.innerHTML =   event.altKey; 
D3.innerHTML =   event.charCode;
E3.innerHTML =   event.keyCode;
  })

//alert(event.key) ;
</script>

<t1>addEventListener mouse 鼠标事件</t1>
<table border="1" id="Mdiv"><tbody>
<tr>
<td id="msout" width="100px">mouseover</td>
<td width="200px"><nobr id="Move"></nobr> </td>
<td width="200px">  </td>

<tr>
<td id="msout" width="100px">mouseout</td>
<td><nobr id="Mout">mouse out</nobr></td>
<td width="200px">  </td>

<tr>
<td id="msout" width="100px">mouseenter</td>
<td width="200px"><nobr id="Mter"></nobr> </td>
<td width="200px">  </td>

<tr>
<td id="msout" width="100px">mouseleave</td>
<td><nobr id="Mave">mouse out</nobr></td>
<td width="200px">  </td>

<tr>
<td id="msout" width="100px">mouseup</td>
<td><nobr id="Mup">0</nobr></td>
<td width="200px">  </td>

<tr>
<td    width="100px" >mousemove</td>
<td>e.pageX=<nobr id="mXXX" >0</nobr></td>
<td>e.pageY=<nobr id="mYYY" >0</nobr></td>

<tr>
<td    width="100px" >mousedown</td>
<td>e.detail=<nobr id="mdet" >0</nobr></td>
<td>e.button=<nobr id="mbut" >0</nobr></td>

<tr>
<td    width="100px" >mousewheel</td>
<td>e.deltaY=<nobr id="delY" >0</nobr></td>
<td>e.deltaX=<nobr id="delX" >0</nobr></td>

</tr></tbody></table>
<pre> Target.addEventListener(event ,function(e){} ,false)
    event. MouseEvent 監聽事件 : 
    mouseenter 移動進入 <B>父元素</B> 的時候會觸發。 
    mouseleave 移動離開 <B>父元素</B> 的時候會觸發。
    mouseover  移動進入到元素上時就會觸發。
    mouseout   移動離開到元素上時就會觸發。
    mouseup    放開滑鼠按鍵時發生。
    mousedown  按一下滑鼠按鍵時發生, 屬性返回,
                    e.detail 0:無按鍵  1:按鍵
                    e.button 0:左鍵    1:中間鍵   2:加鍵
    mousemove  鼠標移動位置, 屬性返回,
                    e.pageX  與文檔左側邊緣的距離（單位像素）
                    e.pageY  與文檔上側邊緣的距離（單位像素）
    mousewheel 滾輪事件。
</pre>

window.addEventListener('mouseout',function(e){
   Mout.innerHTML ="mouse out"
   Move.innerHTML ="" });

Mdiv.addEventListener('mouseenter',function(e){
   Mter.innerHTML ="mouse over";
   Mave.innerHTML =""});

Mdiv.addEventListener('mouseleave',function(e){
   Mave.innerHTML ="mouse out"
   Mter.innerHTML ="" });

window.addEventListener('mouseup',function(e){
   Mup.innerHTML ="1"
   });

window.addEventListener('mousemove', function (e) {
  mYYY.innerHTML=e.pageY ; mXXX.innerHTML =e.pageX;FMxy() });

window.addEventListener('mousedown', function (e) {
  mdet.innerHTML=e.detail ;
  mbut.innerHTML=e.button ;
 Mup.innerHTML ="0"
   });

window.addEventListener('mouseup', function (e) {
  mdet.innerHTML=0 ;
  mbut.innerHTML=0 ;
  e.preventDefault() },false);

window.addEventListener('contextmenu', function (e) { 
  e.preventDefault(); 
}, false);

window.addEventListener('mousewheel', function (e) {
  delY.innerHTML=e.deltaY;delX.innerHTML=e.deltaX;  }, false);

</script>

<t1>addEventListener click 點擊事件</t1>

<div id="mainID" style="color:black">
<pre><o><<o>div id="<r>mainID</r>">
      <nobr>click me 1</nobr >
           <nobr>click me 2</nobr >
                <nobr>click me 3</nobr >
           <nobr>click me 4</nobr >
       <nobr>click me 5</nobr >
<o><<o>/div></pre>
</div>

<pre>
<r>mainID</r>.addEventListener('click', function(e){
   e.target.style.color=rgb ; })

e.target : mainID 內的物件。
</pre>

mainID.addEventListener('click', function(e){
   // rgb 颜色随机
   var r = Math.floor(Math.random()*256);
   var g = Math.floor(Math.random()*256);
   var b = Math.floor(Math.random()*256);
   var rgb = 'rgb('+r+','+g+','+b+')';
       
e.target.style.color=rgb ; 
 e.preventDefault();

})
</script>

t1{font-size: 30px;color : blue;font-weight : bold;}
B {font-weight : bold;color : blue;}
r {color:red}
</style>

<pre><t1>addEventListener click move 點擊 移動 事件</t1>
window.addEventListener('mouseup', function(e){ Dw=0 })

DIV.addEventListener('mousedown',function(e){ Dw=1 })

window.addEventListener('mousemove', function(e){
    if(Dw==1 ) { DIV.style.top =e.pageY-30+"px" ;
                 DIV.style.left=e.pageX-30+"px" ;}  })
 
</pre>

<div id="DIV">click me move</div>

DIV.addEventListener('mousedown', function(e) { Dw=1 })

window.addEventListener('mousemove', function(e){
if(Dw==1 ){
DIV.style.top =e.pageY-30+"px" ;
DIV.style.left=e.pageX-30+"px" ;}
})

DIV.addEventListener('touchstart', function(e){
var touchobj = e.changedTouches[0] ;
var XXX= parseInt(touchobj.clientX) ;
var YYY= parseInt(touchobj.clientY) ;

DIV.style.top =YYY-30+"px" ;
DIV.style.left=XXX-30+"px" ;
})

window.addEventListener('mousedown', function(e){
e.preventDefault()  })

window.addEventListener('mouseout', function(e){ Dw=0  })

</script>

t1{font-size: 30px;color : blue;font-weight : bold;}
B {font-weight : bold;color : blue;}
r {color:red}
</style>

<pre><b>  addEventListener() to class</b>
<<c>input <r>class="round"</r> type="text" value="111">
<<c>input <r>class="round"</r> type="text" value="222">
<<c>input <r>class="round"</r> type="text" value="333">
<<c>input <r>class="round"</r> type="text" value="444">

<<c>script>
var Class= document.querySelectorAll(<r>".round"</r>) ;

Class.forEach((round) => {
  round.addEventListener("mouseover", function() {
    round.style.backgroundColor = "bisque";
    round.focus() ;
    round.select() ;
  }) })

Class.forEach((round) => {
  round.addEventListener("mouseout", function() {
    round.style.backgroundColor = "ivory";
    round.blur() ;
  }) })
  
<<c>/script>
</pre>

Class.forEach((round) => {
  round.addEventListener("mouseover", function() {
    round.style.backgroundColor = "bisque";
    round.focus() ;
    round.select() ;
  }) })

Class.forEach((round) => {
  round.addEventListener("mouseout", function() {
    round.style.backgroundColor = "ivory";
    round.blur() ;
  }) })
</script>

<pre><b>  addEventListener() to Tag</b> 
<<c><r>input</r> type="button" value="1"> 
<<c><r>input</r> type="button" value="2"> 
<<c><r>input</r> type="button" value="3"> 
<<c><r>input</r> type="button" value="4"> 
<<c>div id="dp"><<c>/div>

<<c>script>
var Tag= document.querySelectorAll(<r>"input"</r>) ;

Tag.forEach((round) => {
  round.addEventListener("click", function() {
dp.innerHTML = round.value ;
  }) })
<<c>/script>
</pre>

Tag.forEach((round) => {
  round.addEventListener("click", function() {
dp.innerHTML = round.value ;
  }) })

</script>

Edit

2022年4月17日星期日

Select option Sort

CSS overflow 控制捲軸

<b>Javascript to sort contents of select element</b><br><br>
<select id="Sel" >
    <option value="158.12 HK$">3 people</option>
    <option value="276.36 HK$">2 people</option>
    <option value="110.36 HK$">8 people</option>
    <option value="879.69 HK$">1 people</option>
    <option value="256.36 HK$">4 people</option>
</select>

select sort <br>
<input type="button" value="sort by HK$"  onclick="sortMe('value')">
<input type="button" value="sort by people" onclick="sortMe('text')">

<pre><ol><li> <<c>script> 
<li> function sortMe(x){
<li> var tmpAry = new Array();
<li>    for (var i=0; i<5 ;i++) {
<li>        tmpAry[i] = new Array();
<li>           if(x=='text' ){ tmpAry[i][0] = Sel[i].text;
<li>                        tmpAry[i][1] = Sel[i].value; }
<li>            if(x=='value' ){ tmpAry[i][0] = Sel[i].value;
<li>                        tmpAry[i][1] = Sel[i].text; }
<li>      }

<li> tmpAry = tmpAry.sort() ;
<li>   for (var ii=0; ii<5 ;ii++) {
<li>         if(x=='text' ){ Sel[ii].text  = tmpAry[ii][0] ;
<li>                         Sel[ii].value = tmpAry[ii][1] ;}
<li>         if(x=='value'){ Sel[ii].value = tmpAry[ii][0] ;
<li>                         Sel[ii].text  = tmpAry[ii][1] ;}
<li>        }
<li> }
<li> <<c>/script>

</pre>

Tt += '</pre>' ;
DP.innerHTML =Tt ;
}
DPhtml() ;
</script>

tmpAry = tmpAry.sort() ;
   for (var ii=0; ii<5 ;ii++) {
         if(x=='text' ){ Sel[ii].text  = tmpAry[ii][0] ;
                         Sel[ii].value = tmpAry[ii][1] ;}
         if(x=='value'){ Sel[ii].value = tmpAry[ii][0] ;
                         Sel[ii].text  = tmpAry[ii][1] ;}
 DPhtml() ; }
}
</script>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

Edit

#html #網頁格式 #script #style #div

2022年4月12日星期二

市場由TradingView提供

Edit

2022年4月8日星期五

CCS flex-flow column row

<pre><t1>CCS flex-flow 屬性介紹</t1>
   內容物會依照交錯軸線排列成一行。
<table border="1"><tbody>
<tr><td>column      </td><td> 縱行</td></tr>
<tr><td>row        </td><td>  列行</td></tr>
<tr><td>row nowrap  </td><td>列行換行</td></tr>
<tr><td>row-reverse nowrap </td><td>列行反向 不換行</td></tr>
<tr><td>column-reverse  nowrap </td><td>縱行反向 不換行</td></tr>
<tr><td>row wrap </td><td>  列行 換行</td></tr>
<tr><td>row-reverse wrap </td><td> 列行反向 換行</td></tr>
<tr><td>column wrap      </td><td>  縱行 換行</td></tr>
<tr><td>column-reverse wrap</td><td> 縱行反向 換行</td></tr>
<tr><td>row wrap-reverse  </td><td>  列行 反向換行</td></tr>
<tr><td>row-reverse wrap-reverse</td><td>  列行反向 反向換行</td></tr>
<tr><td>column wrap-reverse</td><td> 縱行 反向換行</td></tr>
<tr><td>column-reverse wrap-reverse</td><td> 縱行反向 反向換行</td></tr>
<tbody></table>
  flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性。
  flex-flow 屬性用於設置或檢索彈性盒模型對像的子元素排列方式。
  flex-direction 屬性規定靈活項目的方向。
  flex-wrap 屬性規定靈活項目是否拆行或拆列。
  flex-grow：伸展比
  flex-shrink：收縮比
  flex-basis：絕對值
</pre>
<style>
pre ,table  {font-size: 20px ;}
td {padding:0 10px 0 10px}
t1{font-size: 30px;color : blue;font-weight : bold;}
r {color : red}
</style>

div123 { height: 40%;
         margin: 0;
         padding: 0;
         display: flex;
         flex-flow: column;  }

header { display: block;
         margin: 4px;
         padding: 5px;
         height: 20%;
         border: 1px solid #eebb55;
         border-radius: 7pt;
         background: #ffeebb;    }

footer { display: block;
         margin: 4px;
         padding: 5px;
         height: 100%;
         border: 1px solid #eebb55;
         border-radius: 7pt;
         background: #ffeebb;    }

#div1{ width:98% ; margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: #dddd88;
        flex: 0 1 100%;
        order: 1;    }
 
 #div2{ width:98% ; margin: 4px;
        padding: 2px;
        border: 1px solid #8888bb;
        border-radius: 7pt;
        background: #ccccff;
        flex: 0 1 100%;
        order: 2;    }

#div3{ width:98%  ; margin: 4px;
         padding: 2px;
         border: 1px solid #8888bb;
         border-radius: 7pt;
         background: #DAA520 ;
         flex: 0 1 100%;
         order: 3;    }

#inChange{ position: fixed;
           top:45% ; left:150px}
</style>

<Mdiv id="Mdiv" >
    <header id="header">header</header>
        <div123 id="div123">
                  <div1 id="div1">div1</div1>
                  <div2 id="div2">div2</div2>
                  <div3 id="div3">div3</div3>
         </div123>
    <footer>footer <br>

Mdiv flex-flow :<label class="container"><input type="radio" name="MdivFlow"  checked="checked" onchange="Mdiv.style.flexFlow='column'" >column</label>
<label class="container">
<input type="radio" name="MdivFlow"  onchange="Mdiv.style.flexFlow='column-reverse'">column-reverse</label>
<br><br>

header display :
<label class="container">
<input type="radio" name="S1" 
onchange="header.style.display='block'" checked="checked">block</label>
<label class="container">
<input type="radio" name="S1" value="header display none" onchange="header.style.display='none'">none</label>
<br><br>

div1 display :
<label class="container">
<input type="radio" name="S2" checked="checked" onchange="div1.style.display='block'" >block</label>
<label class="container">
<input type="radio" name="S2" value="div1 display none" onchange="div1.style.display='none'">none</label>
<br>

div2 display :
<label class="container">
<input type="radio" name="d2" checked="checked" onchange="div2.style.display='block'" >block</label>
<label class="container">
<input type="radio" name="d2" value="div2 display none" onchange="div2.style.display='none'">none</label>
<br>

div3 display :
<label class="container">
<input type="radio" name="d3" checked="checked" onchange="div3.style.display='block'" >block</label>
<label class="container">
<input type="radio" name="d3" value="div3 display none" onchange="div3.style.display='none'">none</label>
<br><br>

div123 display :
<label class="container">
<input type="radio" name="d4" value="div123 display inherit" onchange="div123.style.display='inherit'" checked="checked">inherit</label>
<label class="container">
<input type="radio" name="d4" value="div123 display none" onchange="div123.style.display='none'">none</label>
<br>

div123 flex-flow :
<label class="container">
<input type="radio" name="d5" checked="checked" onchange="div123.style.flexFlow='column'" >column</label>
<label class="container">
<input type="radio" name="d5"  onchange="div123.style.flexFlow='column-reverse'">column-reverse</label>
<br>

div123 flex-flow :
<label class="container">
<input type="radio" name="d5" checked="checked" onchange="div123.style.flexFlow='row'" >row</label>
<label class="container">
<input type="radio" name="d5"  onchange="div123.style.flexFlow='row-reverse'">row-reverse</label>
<br>
</div>

</footer>

Edit

#html #style #script #javascript #CCS flex-flow #flex-flow column #flex-flow row #display #display flex #flex

2022年4月6日星期三

CSS order

#div1 { width:300px; height:100px;
        background-color:coral;  
        font-size: 20px ;margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: antiquewhite;
        order:1 }

#div2 { width:400px; height:150px;
        background-color:#8888bb;
        font-size: 20px ;margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: pink;
        order:2 }
	
#div3 { width:600px; height:200px;
        background-color:coral; 
        font-size: 20px ;margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: wheat;
        order:3}
	
#main{  display:flex;
        flex-flow:row ; //column ;		
	align-items:flex-end ;
       	width:100%;
	height:300px;
	border:1px solid black;		}

#main div{flex: 1;}	
</style>

<div class="sel">			
CSS div { order :
<select onchange="Order(this)">
    <option value="1 2 3" > ▃ ▅ ▇ </option>
    <option value="2 1 3" > ▅ ▃ ▇</option>
    <option value="3 1 2" > ▇ ▃ ▅ </option>
    <option value="1 3 2" > ▃ ▇ ▅ </option>
    <option value="3 2 1" > ▇ ▅ ▃ </option>
</select> ; } <br>

CSS div { flex :
<select onchange="Order(this)">
    <option value="a" >   auto </option>
    <option value="n" >   none</option>
    <option value="i" >   initial </option>
    <option value="1" >   1  </option>
    <option value="3" >   0  30% </option>
    <option value="0" >   0  20%</option>

</select> ; } <br>

CSS main div {  flex-flow :
<select onchange="Order(this)">
    <option value="main row" > flex-flow : row </option>
    <option value="main column" > flex-flow : column </option>
</select> ; } <br>

</div><Br>

function Order(x) {
 if(x.value == "main row" )   { main.style.flexFlow = "row"; }
 if(x.value == "main column" ){ main.style.flexFlow = "column-reverse nowrap";}

if(x.value == "0" ){     div1.style.flex = "0 20%";
                         div2.style.flex = "0 20%";
                         div3.style.flex = "0 20%";  }

if(x.value == "3" ){     div1.style.flex = "0 30%";
                         div2.style.flex = "0 30%";
                         div3.style.flex = "0 30%";  }

if(x.value == "a" ){     div1.style.flex = "auto";
                         div2.style.flex = "auto";
                         div3.style.flex = "auto";  }

if(x.value == "i" ){     div1.style.flex = "initial";
                         div2.style.flex = "initial";
                         div3.style.flex = "initial";  }

if(x.value == "n" ){     div1.style.flex = "none";
                         div2.style.flex = "none";
                         div3.style.flex = "none";  }

if(x.value == "1" ){     div1.style.flex = "1 ";
                         div2.style.flex = "1 ";
                         div3.style.flex = "1 ";  }

if(x.value == "1 2 3" ){ div1.style.order = 1;
                         div2.style.order = 2;
                         div3.style.order = 3;  }

if(x.value == "2 1 3"){ div2.style.order = 1;
                         div1.style.order = 2;
                         div3.style.order = 3; }

if(x.value == "3 1 2" ){ div3.style.order = 1;
                         div1.style.order = 2;
                         div2.style.order = 3;  }

if(x.value == "1 3 2" ){ div1.style.order = 1;
                         div3.style.order = 2;
                         div2.style.order = 3;  }

if(x.value == "3 2 1" ){ div3.style.order = 1;
                         div2.style.order = 2;
                         div1.style.order = 3;  }

div1.innerHTML = "div1<br>order= "  + div1.style.order +
                  "<br>flex  = " + div1.style.flex;

div2.innerHTML = "div2<br>order= "  + div2.style.order +
                  "<br>flex  = " + div2.style.flex;

div3.innerHTML = "div3<br>order= "  + div3.style.order +
                  "<br>flex  = " + div3.style.flex;

//alert(x.value) 
}
Order("1 2 3");
</script>

Edit

#html #style #script #javascript #CSS #Order #CSS Order #display:flex order #元素的順序

css flex-flow

<sel>
CSS div { flex-flow :
<select onchange="mainDIV.style.flexFlow=this.value;DDP() ">
    <option value="column" > column  </option>
    <option value="row" > row </option>
    <option value="row nowrap" >row nowrap;</option>
    <option value="row-reverse nowrap" > row-reverse nowrap</option>
    <option value="column-reverse nowrap" >column-reverse nowrap</option>
    <option value="row wrap" >row wrap</option>
    <option value="row-reverse wrap" >row-reverse wrap</option>
    <option value="column wrap" >column wrap</option>
    <option value="column-reverse wrap" >column-reverse wrap</option>
    <option value="row wrap-reverse" >row wrap-reverse</option>
    <option value="row-reverse wrap-reverse" >row-reverse wrap-reverse</option>
    <option value="column wrap-reverse" > column wrap-reverse</option>
    <option value="column-reverse wrap-reverse" >column-reverse wrap-reverse</option>

</select> ; } </sel><br>

#mainDIV {height:600px;width:100%;
          background-color: DodgerBlue;
          display: flex;
          flex-flow:column;}

#div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9 {
  width:70px;
  background-color:pink;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px; 
  display:flex ; 
  justify-content:center;
  align-items : center; }
 
 #div1{height:40px;order: 1 }
 #div2{height:60px;order: 2}
 #div3{height:80px;order: 3}
 #div4{height:100px;order: 4}
 #div5{height:120px;order: 5}
 #div6{height:140px;order: 6}
 #div7{height:160px;order: 7}
 #div8{height:180px;order: 8}
 #div9{height:180px;order: 9}

#pp {  font-size: 30px; 
position: fixed;
top:40% ; left:150px
}

</style>

Edit

#html #style #script #javascript #CSS #flex Order #CSS flex Order #flex: initial #flex: auto #flex: none #flex: 1 #flex: 1 1 auto #改變比例

2022年4月4日星期一

align-content

<pre> <t1>CCS align-content 屬性介紹</t1>
      不對齊彈性項目，而是對齊彈性線 （垂直）。
 屬性 : center              置中對齊
       flex-start          靠上對齊
       flex-end            靠下對齊
       space-between       均勻上下分布 
       space-around        均勻分散上下對齊( 上下邊 間距一半）
       space-evenly        均勻分散上下對齊
       start               靠上對齊
       end                 靠下對齊
       baseline            對齊 flex 基準線
       first baseline;
       last baseline
       stretch           撐滿對齊     
       initial           繼承 
       inherit           最初的
       normal            設置對齊
      safe center        安全的 置中對齊
      unsafe center      不安全 置中對齊

<t1> CCS flex-wrap 屬性介紹</t1>
 flex-wrap 屬性規定flex容器是單行或者多行，
 同時橫軸的方向決定了新行堆疊的方向。
 屬性 : nowrap	      默認值。規定靈活的項目不拆行或不拆列。
        wrap	      規定靈活的項目在必要的時候拆行或拆列。
        wrap-reverse 規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。
        initial      設置該屬性為它的默認值。請參閱 initial 。
        inherit      從父元素繼承該屬性。請參閱 inherit 。
</pre>
<style>
pre {font-size: 18px ;}
t1{font-size: 30px;color : blue;font-weight : bold;}
r {color : red}
</style>

<style>

img  {width:auto; 
      border: 5px solid snow;  
      margin:5px;    }

#sel , #sel select  {font-size: 20px ;}
  
#main { display:flex;
        width: 100% ;
        height: 500px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-wrap: wrap;
        align-content: center ;
        border:1px solid black; }

}
</style>
<div id="sel">
flex-wrap :
<select onchange="main.style.flexWrap= this.value">
    <option value="wrap"     > wrap</option>
    <option value="nowrap" >nowrap</option>
    <option value="wrap-reverse"   > wrap-reverse</option>
    <option value="initial"       >  initial</option>
    <option value="inherit" >inherit</option>
</select>
<br>
	
align-content :
<select onchange="main.style.alignContent= this.value">

<option value="center"     > center     </option>
    <option value="flex-start" >flex-start</option>
    <option value="flex-end"   > flex-end</option>
    <option value="space-between"       >  space-between</option>
    <option value="space-around" >space-around</option>
    <option value="space-evenly"   > space-evenly</option>
    <option></option>
    <option value="start"    >  start    </option>
    <option value=" end"       >  end       </option>

<option value="baseline"       >  baseline</option>
    <option value="first baseline" >first baseline</option>
    <option value="last baseline"   > last baseline</option>

<option value="stretch"   > stretch</option>
    <option value="initial"   > initial </option>
    <option value="inherit"   > inherit</option>
    <option value="normal"   > normal</option>
    <option value="safe center"   > safe center</option>
    <option value="unsafe center"   > unsafe center</option>

</select> </div><br>

</div>

Edit

#html #style #script #javascript #CSS #auto #stretch #align-self #center #initial #inherit #flex-start #flex-end #baseline #css 位置 #css center #flex-wrap () #擠壓對齊掛列 img

訂閱：文章 (Atom)

2022年4月30日 星期六

2022年4月27日 星期三

2022年4月21日 星期四

2022年4月18日 星期一

Target.addEventListener( ) 添加事件監聽器

2022年4月17日 星期日

CSS overflow 控制捲軸

2022年4月12日 星期二

2022年4月8日 星期五

2022年4月6日 星期三

2022年4月4日 星期一

2022年4月30日星期六

2022年4月27日星期三

2022年4月21日星期四

2022年4月18日星期一

Target.addEventListener( )
添加事件監聽器

2022年4月17日星期日

2022年4月12日星期二

2022年4月8日星期五

2022年4月6日星期三

2022年4月4日星期一