✍ 📁 🙈 🙉 🙊

blockquote

<blockquote> <cfieldset> <legend>

<div id="S1" onclick="DPcss(S1)">
  <blockquote class="ccs1" > blockquote 1</blockquote>
     <style>
         .ccs1 { font-size: 24px;color: #555555; 
                 width:150px ; height:60px ;
                 border-left:20px solid #78C0A8 ;
                 background:#EDEDED;
                 box-shadow: 12px 12px 8px #ccc;
                 display:flex ;
                 align-items : center;
                 justify-content: center;cursor:pointer;  }
  </style></div>

<div id="S2" onclick="DPcss(S2)">
  <blockquote class="ccs2">blockquote 2</blockquote>
    <style>
     .ccs2 { font-size: 24px;color: #555555;
             width:150px ; height:60px ;
             border-left:15px solid #78C0A8 ;
             background:#EDEDED;
             box-shadow: 12px 12px 8px #ccc;  
             display:flex ;
             align-items : center;
             justify-content: center ;cursor:pointer;}

.ccs2::before { font-size:40px;
                      content: "\201C";}
  </style></div>

<div id="S3" onclick="DPcss(S3)">
  <blockquote class="css3" >blockquote 3</blockquote>
  <style>
    .css3 { font-size: 20px ; color: #666;
            width:150px ; height:60px ;
            background-color: yellow;
            border-left:  15px solid #00aae1;
            border-right: 15px solid #00aae1;
            box-shadow: 12px 12px 8px #ccc;
            display:flex ;
            align-items : center;
            justify-content: center;cursor:pointer; }
  </style></div>  
  
</div>
<div id="Textcss"></div>
<script>
var newDiv = document.createElement("textarea");
 newDiv.id="Textcss" ; 
 newDiv.readOnly = "true" ;
 document.body.replaceChild(newDiv, Textcss);

function DPcss(x){
Textcss.value = x.innerHTML ;
//alert(x.innerHTML  )
}
DPcss(S1)
</script>
<style>
#Textcss {width:98%; height:80%;
font-size: 20px;}
</style>

Edit

#html #style #script #javascript #css #blockquote #fieldset #legend #標題內容 #文章內容 #pre

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()

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

blockquote

<blockquote> <cfieldset> <legend>

a href

Array sort

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

blockquote

<blockquote> <cfieldset> <legend>

a href

Array sort

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單