✍ 📁 🙈 🙉 🙊

2023年3月24日星期五

if else while

JavaScript Math Object
是一個擁有數學常數及數學函數。

<pre><b>JavaScript if, else, and else if</b>
if (condition 狀況) 
      { block of code to be executed if the condition is 
        true 條件為真時執行的代碼塊 }
else if (condition2 狀況) 
           { block of code to be executed 
             if the condition1 is false and condition2 is true
             條件 1 為假且條件 2 為真時執行的代碼塊 }

else { block of code to be executed if the condition is false
       條件為假時執行的代碼塊 }

比較運算子：     等於： ==       不等於：!==
                大於： >         小於：<
            大於等於： >=     小於等於：<=

連接兩個以上的條件都是true  &&  
連接兩個其中一個條件成true  ||

</pre>

txt.innerHTML =Select ; 
}
</script>

<pre><b>script if 條件敘述</b>
  <<c>input onclick="Fif(this.value)" type="button" value="10" />
  <<c>input onclick="Fif(this.value)" type="button" value="30" />
  <<c>input onclick="Fif(this.value)" type="button" value="60" />
  <<c>input onclick="Fif(this.value)" type="button" value="90" />
  <<c>input onclick="Fif(this.value)" type="button" value="  " />
  <<c>span id="txt">??<<c>/span>

<<c>script>
 var Select = "??" ;
    if(x==10){ Select = "ten"}
    if(x==30){ Select = "thirty"}
    if(x==60){ Select = "sixty"}
    if(x==90){ Select = "ninety"}

txt.innerHTML =Select ; 
}
<<c>/script>

</pre>

txt.innerHTML =Select ; 
}
</script>

<<c>script>
 function Fif(x) {
 var Select = (x==10)?"is 10" : (x==30)?"is 30" : (x==60)?"is 60":
              (x>10)?"is 90": "??";
 txt.innerHTML = Select ; 
}
<<c>/script>

</pre>

<pre><b>script if 條件敘述</b>
請選擇 30 Please select 30
  <<c>input onclick="Fif(this.value)" type="button" value="10" />
  <<c>input onclick="Fif(this.value)" type="button" value="30" />
  <<c>input onclick="Fif(this.value)" type="button" value="60" />
  <<c>input onclick="Fif(this.value)" type="button" value="90" />
  <<c>input onclick="Fif(this.value)" type="button" value="  " />
  <<c>span id="txt">??<<c>/span>

<<c>script>
function Fif(x) {
if (x==30){txt.innerHTML= '選擇正確choose correctly';return }
  else if( x < 30) {txt.innerHTML='選擇小於/ hoose less than 30'}
  else {txt.innerHTML='選擇大於/ elect greater than 30' }
}
<<c>/script>

請選擇 30 Please select 30
<input onclick="Fif(this.value)" type="button" value=1 />  <input onclick="Fif(this.value)" type="button" value=20 />  <input onclick="Fif(this.value)" type="button" value=30 />  <input onclick="Fif(this.value)" type="button" value=60 />  <input onclick="Fif(this.value)" type="button" value=90 />  <span id="txt">??</span>

</pre>

Edit

#html #網頁格式 #script #style #div #script 條件真假 if else #script if else #運算子

2023年3月23日星期四

getElementById

document.getElementById(id)
取得 id 的元素

<pre><b>document.getElementById()</b>
<div id="div1">html.ug5g.com My id = div1</div>

Edit

#html #網頁格式 #script #style #div #script 元素獲取 getElementById() #script 元素獲取 getElementsByClassName() #script 元素獲取 getElementsByTagName() #script 元素獲取 getElementsByName() #script getElementById() #script getElementsByClassName() #script getElementsByTagName() #script getElementsByName()

2023年3月22日星期三

script Math

JavaScript Math Object
是一個擁有數學常數及數學函數。

<font size = 5><center>
常用 Math 數學的運算</center>
<div border="2" class="Div" >

Math.round(x) : 將x四捨五入到整數。<br />

Math.round ( <input class="c" type="text" value="3.1416" /> ) = <nobr class="c"></nobr><br />

Math.round ( <input class="c" type="text" value="3.89" /> ) =   <nobr class="c"></nobr></div>
  <div border="2" class="Div">
Math.floor(x) : 將x往下減到整數。<br />
Math.floor ( <input class="c" type="text" value="4.2" /> ) = <nobr class="c"></nobr><br />

Math.floor ( <input class="c" type="text" value="4.8" /> ) = <nobr class="c"></nobr></div>
  <div border="2" class="Div">
Math.pow(7,2) 返回7的2次方，即為7X7=49。<br />
Math.pow( <input class="c" type="text" value="7" />, 
<input class="c" type="text" value="2" /> ) = <nobr class="c"></nobr></div>
  <div border="2" class="Div">
Math.sqrt(49) 表示49的平方根，即為$ \sqrt 49 $=7。
<br />Math.sqrt( <input class="c" type="text" value="49" /> ) = <nobr class="c"></nobr></div>
  <div border="2" class="Div">
Math.abs(x) : 將x轉成正數。( 將x轉成負數 張 x 成 -1 OK)<br />
Math.abs( <input class="c" type="text" value="-123" /> ) = <nobr class="c"></nobr></div>
  <div border="2" class="Div">
Math.ceil(x) : 將x往上加到整數。<br />
Math.ceil( <input class="c" type="text" value="1.23" /> ) = <nobr class="c"></nobr></div>
  <div border="2" class="Div">
Math.min() : 找出參數列表中最小的值。<br />
Math.min( <input class="c"  type="text" value="88" />, 
<input class="c" type="text" value="33" />, 
<input class="c" type="text" value="22" />, 
<input class="c" type="text" value="44" /> ) = <nobr class="c"></nobr></div>
  <div border="2" class="Div">
Math.max() : 找出參數列表中最大的值。<br />
Math.max( <input class="c" type="text" value="88" />, 
<input class="c" type="text" value="33" />, 
<input class="c" type="text" value="22" />, 
<input class="c" type="text" value="44" /> ) = <nobr class="c"></nobr></div>
 
<style>
.Div input {width:80px}  
.Div {background-color: lavender; width: 90%;font-size: 20px ; 
      border: 1px solid black; padding: 10px; } 
.Div:nth-child(2n+2) {background-color: orange}  
</style>
<script>function OKf() { 
bb = document.getElementsByClassName("c");   
bb[1].innerHTML =  Math.round(bb[0].value);   
bb[3].innerHTML =  Math.round(bb[2].value);    
bb[5].innerHTML =  Math.floor(bb[4].value);   
bb[7].innerHTML =  Math.floor(bb[6].value);   
bb[10].innerHTML =  Math.pow(bb[8].value,bb[9].value);   
bb[12].innerHTML =  Math.sqrt(bb[11].value);   
bb[14].innerHTML =  Math.abs(bb[13].value);   
bb[16].innerHTML =  Math.ceil(bb[15].value);   
bb[21].innerHTML =  Math.min(bb[17].value,bb[18].value,bb[19].value,
bb[20].value);   
bb[26].innerHTML =  Math.max(bb[22].value,bb[23].value,bb[24].value,bb[25].value);   }   OKf();  
</script>

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

Class.forEach((round) => {
  round.addEventListener("change", function() {
   round.select() ; OKf() ;
  }) })
</script>

<font size = 5><center>Math.random() 偽隨機數</center>
<table id="Random" border="1" >
<tbody><tr>
<th width="55%">函數</th><th width="20%">範圍</th><th width="25%">隨機數</th>
<tr><td> Math.random()</td><td>random 0 to 1</td><td id="Ra1">第一行 欄位 2
<tr><td> Math.floor(Math.random()*10)</td><td>random 0 to 9</td><td id="Ra2">
<tr><td> Math.floor(Math.random()*10+1)</td><td>  random 1 to 10</td><td id="Ra3">
<tr><td> Math.floor(Math.random()*100)</td><td> random 0 to 99</td><td id="Ra4">
<tr><td> Math.floor(Math.random()*100+1)</td><td> random 1 to 100</td><td id="Ra5">
<tr><td> var min=20, max=80<br>
     Math.floor(Math.random() * (max - min + 1) ) + min;
             </td><td> random 20 to 80</td><td id="Ra6">

</td></tr>
</tbody>
</table>

Ra1.innerHTML = Math.random().toFixed(15);
Ra2.innerHTML = Math.floor(Math.random()*10);
Ra3.innerHTML = Math.floor(Math.random()*10+1);
Ra4.innerHTML = Math.floor(Math.random()*100);
Ra5.innerHTML = Math.floor(Math.random()*100+1);

var min=20, max=80 ;
Ra6.innerHTML=Math.floor(Math.random() * (max - min + 1) ) + min;

qid = setTimeout ( Ram,  1000 );

}
Ram();

</script>

Edit

#html #網頁格式 #script #style #div #script 數字小數點 toFixed() #script Math.round() #script Math.floor() #script Math.pow() #script Math.sqrt() #script Math.ceil() #script Math.random() 隨機數 #script Math 數字運算() #script Math.random()

setAttribute

element.setAttribute(name, value)
設置指定元素上的一個屬性值。

<div id="Mdiv">
<div id="div">   
<<c>div id="<span id="id1"></span>" > change this Attribute<<c>/div> 
<br><br>

<span id="id2"></span>.setAttribute("id" , "<input id="idInput" type="text" value = "div" onchange="Change()" onmouseover="this.select()" >  ")  
<br><br>
<span id="id3"></span>.setAttribute("style" , "color :<select id="Cinput" onchange="Change()" style="width:100px" >                    
<option value="black">black</OPTION>               
<option value="blue">blue</OPTION>               
<option value="lime">lime</OPTION>                 
<option value="goldenrod">goldenrod</OPTION> 
<option value="red">red</OPTION></SELECT>")

<br><br>
<span id="id4"></span>.setAttribute("style" , "font-size :               <select id="Finput" onchange="Change()" style="width:100px" >                           <option value="20px">16px</OPTION>                      
<option value="25px">20px</OPTION>                      
<option value="30px">25px</OPTION>
</SELECT>")    
   </div></div>

Edit

#html #網頁格式 #style #script setAttribute() #script setAttribute() 添加指定的属性

2023年3月21日星期二

createElement()

createElement() 創建元素

<pre><b>createElement() 創建元素</b>
document.createElement() 創建一個元素。
      例 : document.createElement("div")
           document.createElement("P")
           document.createElement("input") .......等等

document.createElement()          可以建立一個新的元素。
document.createTextNode()         就是用來建立文字節點的方法。
document.createDocumentFragment() 一開始我們有一個 HTML 的容器元素。

Node.appendChild()   方法在節點的子節點<r>列表末</r>新增新的子節點。
Node.insertBefore()  方法在節點的子節點列表任意位置<r>插入</r>新的節點。
Node.removeChild()   方法從 DOM 移除一個子節點，並返回<r>移除</r>的節點。
Node.replaceChild()  實現子節點(對像)的替換。返回被<r>替換</r>對像的引用。
Node.hasChildNodes() 取得值，指出這個節點<r>是否有子節點</r>。
</pre>

<b>Node.appendChild( )<br>
用來新增一個子節點到指定元素節點的最後面</b>
<pre>
   Node.appendChild(child) : child 為另一個元素物件。

var newDiv = document.createElement("div");
 var newT = document.createTextNode("<<?>div>New div<<?>/div>"); 
     newDiv.appendChild(newT);
     <r>document.body</r>.appendChild(newDiv, div1);

//<r>document.body</r> 內加入新 div

</pre>

<button  onclick="myFunction()">Node.appendChild()</button>
<div id="DP">
<div id="div1" ><<?>div id="div1"><<?>/div></div>
</div>

}
</script>

<b>Node.appendChild( )<br>
用來新增一個子節點到指定元素節點的最後面</b>
<pre>

var newDiv = document.createElement("div");
    var newContent = document.createTextNode("Hi"); 
        newDiv.appendChild(newContent);
        <r>div1</r>.appendChild(newDiv, div1);

//<r>div1</r> 內加入新 div

</pre>

<button  onclick="myFunction()">Node.appendChild()</button>
<div id="div1" ><<c>div id="<r>div1</r>">

</div>
<<c>/div>

<b>Node.insertBefore()<br>
插入新的子代 (child) 元素。</b>
<pre>  parentNode.insertBefore(插入的新元素, 之前的元素物件);

<<c>ol id="myList">
    <<c>li>Coffee<<c>/li>
    <<c>li>Tea<<c>/li>
<<c>/ol>

var newNode = document.createElement("li");
    var textNode = document.createTextNode("new li");
        newNode.appendChild(textNode);
        myList.insertBefore(newNode, myList.children[1]);
</pre>

<button  onclick="myFunction()">insertBefore()</button>
<ol id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ol>

<b>Node.removeChild() <br>
移除一個子節點，並傳回移除的節點。</b>
<pre><<?>div id="Mid">
<<?>button onclick="remove(this)"> 1 remove me <<?>/button>
<<?>button onclick="remove(this)"> 2 remove me <<?>/button>
<<?>button onclick="remove(this)"> 3 remove me <<?>/button>
<<?>button onclick="remove(this)"> 4 remove me <<?>/button>
<<?>button onclick="remove(this)"> 5 remove me <<?>/button>
<<?>/div>

<<c>script>
function remove(x) { Mid.removeChild(x) }
<<c>/script>

</pre>

<div id="Mid">
<button onclick="remove(this)"> 1 remove me </button>
<button onclick="remove(this)"> 2 remove me </button>
<button onclick="remove(this)"> 3 remove me </button>
<button onclick="remove(this)"> 4 remove me </button>
<button onclick="remove(this)"> 5 remove me </button>
</div>

<B>node.replaceChild( newChild, oldChild )<br>
   取代 元素  </B>
<pre>     newChild 為要加進去的子代元素，
     oldChild 為要換掉的的子代元素。

例: <<?>input id="input_DP" type="text" value="input tag" />

var textarea =document.createElement('textarea') ;
      textarea.innerHTML = "textarea tag";
      textarea.id="textarea_ID" ;
      input_DP.parentNode.replaceChild(textarea , input_DP)

</pre>

}
</script>

#B4 { height:30px ; width:100px ;
      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>

Edit

#html #網頁格式 #style #div #createElement() 創建元素 #Node.removeChild() #Node.insertBefore() #Node.appendChild( ) #createElement()

parentElement children

children 子元素 / parentElement 父元素

<pre><b>nodeObject.children 子元素</b>
<<c>div id="Mdiv">
       <<c>div> 111 <<c>/div>
       <<c>a>   222 <<c>/a>
       <<c>h1>  333 <<c>/h1>
       <<c>p>   444 <<c>/p>
<<c>/div>

</pre>

</script>

<pre><b>nodeObject.parentElement 父元素</b>
<<c>div id="Mdiv">
       <<c>div id="div"> 111 
              <<c>a   id="a">   222 <<c>/a>
              <<c>h1  id="h1">  333 <<c>/h1>
       <<c>/div>
       <<c>p id="P">   444 <<c>/p>
<<c>/div>

</pre>

dp.innerHTML =txt;

</script>

Edit

#html #網頁格式 #style #div #script parentElement #script children #script parentElement 父元素 #script children 子元素 #script nodeObject.parentElement #script nodeObject.children

2023年3月20日星期一

blur focus

focus() / blur()

<b>jquery focus()</b>
<pre>  <<c>input type="type" value="⇦ blur" />
<<c>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"><<c>/script>
<<c>script>
$(document).ready(function(){
    $("input").mouseover(function(){ $("input").focus(); 
                                     $("input").val("focus"); });

$("input").mouseout(function() { $("input").blur(); 
                                     $("input").val("blur"); });
});          
<<c>/script>
</pre>
<input type="type" value="⇦ blur" />

$("input").mouseout(function() { $("input").blur(); 
                                     $("input").val("blur"); });
}); 
</script>

#www{font-size: 30px ;word-wrap:break-word;}
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>

Edit

#html #網頁格式 #style #div #script focus() #script blur() #script 獲得焦點 #script 失去焦點

JavaScript Array

JavaScript Array JSON
JSON.stringify(JSON) / Object.keys( ) / Object.values( )

<pre><p id="demo"></p></pre>
<script>
var text = '[{ "aa":"00" , "bb":"00000" },{ "aa":"11" , "bb":"11111" },{ "aa":"22" , "bb":"22222" } ]';

var parse= JSON.parse(text);
var stringify= JSON.stringify(text);

txt += "\n\n var parse= JSON.parse(text) ;"
txt += "\n var stringify= JSON.stringify(text) ;"
txt += "\n\n typeof text  = " + typeof text ;
txt += "\n typeof parse = " + typeof parse;
txt += "\n typeof stringify = " + typeof stringify;

txt += "\n\n parse = " + parse ; 
txt += "\n stringify = " + stringify;

txt += "\n\n JSON.stringify(parse)= " + JSON.stringify(parse );

txt += "\n\n JSON.stringify(parse, null , 2)= " + JSON.stringify(parse, null , 2);

txt += "\n\n JSON.stringify(parse, ['aa'],2)= " + 
             JSON.stringify(parse, ['aa'],2);

txt += "\n\n JSON.stringify(parse, ['bb'],2)= " + 
             JSON.stringify(parse, ['bb'],2);

//toString

txt +="<br><br><br><br><br>";
//txt += "JSON.stringify(obj) = " +JSON.stringify(obj)+ "<br><br>";

//txt += "JSON.parse(text) = "+ JSON.parse(text) + "<br><br>";
//txt += "obj  = "+ obj  + "<br><br>";

//txt += "obj.length = " + obj.length + "<br><br>";

//for(var x=0 ; x < parse.length; x++){
//  txt += "obj[parse].aa = "+obj[parse].aa+ '    ';
 // txt += "obj[parse].bb= " +obj[parse].bb+ "<br>"; }

document.getElementById("demo").innerHTML = txt
</script>

<pre><p id="demo"></p></pre>
<script>
var text = '[{ "aa":"00" , "bb":"00000" },{ "aa":"11" , "bb":"11111" },{ "aa":"22" , "bb":"22222" } ]';

var parse= JSON.parse(text);
var stringify= JSON.stringify(text);

txt += "\n\n var parse= JSON.parse(text) ;"
txt += "\n var stringify= JSON.stringify(text) ;"
txt += "\n\n typeof text  = " + typeof text ;
txt += "\n\n typeof parse = " + typeof parse;
txt += "\n\n typeof stringify = " + typeof stringify;

txt += "\n\n parse = " + parse ; 
txt += "\n stringify = " + stringify;

txt += "\n\n JSON.stringify(parse)= " + JSON.stringify(parse );

txt += "\n\n JSON.stringify(parse, null , 2)= " + JSON.stringify(parse, null , 2);

txt += "\n\n JSON.stringify(parse, ['aa'],2)= " + 
             JSON.stringify(parse, ['aa'],2);

txt += "\n\n JSON.stringify(parse, ['bb'],2)= " + 
             JSON.stringify(parse, ['bb'],2);

//toString

txt +="<br><br><br><br><br>";
//txt += "JSON.stringify(obj) = " +JSON.stringify(obj)+ "<br><br>";

//txt += "JSON.parse(text) = "+ JSON.parse(text) + "<br><br>";
//txt += "obj  = "+ obj  + "<br><br>";

//txt += "obj.length = " + obj.length + "<br><br>";

//for(var x=0 ; x < parse.length; x++){
//  txt += "obj[parse].aa = "+obj[parse].aa+ '    ';
 // txt += "obj[parse].bb= " +obj[parse].bb+ "<br>"; }

document.getElementById("demo").innerHTML = txt
</script>

<pre>
var D1 =  {"中文":[{item: "橙子" , Qty: 31 , from: "香港"} ,
                  {item: "蘋果" , Qty: 12 , from: "中國"} ,
                  {item: "檸檬" , Qty: 32 , from: "美國"} ,
                  {item: "芒果" , Qty: 22 , from: "日本"}],
           "英文":[{item: "orange" , Qty: 31 , from: "HK"} ,
                  {item: "apple" , Qty: 12 , from: "China"} ,
                  {item: "lemon" , Qty: 32 , from: "US"} ,
                  {item: "mango" , Qty: 22 , from: "Japan"}]   }

txt += "</r>\n\nD1 ☛ "    + D1 ;
txt += "\nD1.length ☛ "    + D1.length ;

txt += "\nObject.keys(D1) ☛ "    + Object.keys(D1) ;
txt += "\nObject.keys(D1).length ☛ "    + Object.keys(D1).length ;
txt += "\nObject.keys(D1)[0] ☛" + Object.keys(D1)[0] ; 
txt += "\nObject.keys(D1)[1] ☛" + Object.keys(D1)[1] ;
txt += "\nObject.keys(D1.中文).length ☛" + Object.keys(D1.中文).length ;
txt += "\nObject.keys(D1.英文).length ☛" + Object.keys(D1.英文).length ;
txt += "\n\nJSON.stringify(Object.keys(D1)) ☟\n" + 
        JSON.stringify(Object.keys(D1)) ;

txt += "\n\nObject.values(D1).length ☛" + Object.values(D1).length ;
txt += "\n\nJSON.stringify(Object.values(D1)[0]) ☟\n" + 
        JSON.stringify(Object.values(D1)[0]) ;
txt += "\n\nJSON.stringify(Object.values(D1)[1]) ☟\n" + 
        JSON.stringify(Object.values(D1)[1]) ;
txt += "\n\nJSON.stringify(Object.values(D1)) ☟\n" + 
        JSON.stringify(Object.values(D1)) ;

txt += "\n\nJSON.stringify(D1)  ☟\n" + 
JSON.stringify(D1);

txt += "\n\nJSON.stringify(Object.values(D1)[0] ) ☟\n" + JSON.stringify(Object.values(D1)[0] );

txt += "\n\nJSON.stringify(Object.values(D1)[1] ) ☟\n" + JSON.stringify(Object.values(D1)[1] );

txt += "\n\nD1.中文[0].item=" + D1.中文[0].item ;
txt += "  D1.中文[0].Qty=" + D1.中文[0].Qty ;  
txt += "  D1.中文[0].from="+ D1.中文[0].from ;

txt += "\nD1.中文[1].item=" + D1.中文[1].item ;
txt += "  D1.中文[1].Qty=" + D1.中文[1].Qty ;  
txt += "  D1.中文[1].from="+ D1.中文[1].from ;

txt += "\nD1.中文[2].item=" + D1.中文[2].item ;
txt += "  D1.中文[2].Qty=" + D1.中文[2].Qty ;  
txt += "  D1.中文[2].from="+ D1.中文[2].from ;

txt += "\nD1.中文[3].item=" + D1.中文[3].item ;
txt += "  D1.中文[3].Qty=" + D1.中文[3].Qty ;  
txt += "  D1.中文[3].from="+ D1.中文[3].from ;

txt += "\n\nD1.英文[0].item=" + D1.英文[0].item ;
txt += "  D1.英文[0].Qty=" + D1.英文[0].Qty ;  
txt += "  D1.英文[0].from="+ D1.英文[0].from ;

txt += "\nD1.英文[1].item=" + D1.英文[1].item ;
txt += "  D1.英文[1].Qty=" + D1.英文[1].Qty ;  
txt += "  D1.英文[1].from="+ D1.英文[1].from ;

txt += "\nD1.英文[2].item=" + D1.英文[2].item ;
txt += "  D1.英文[2].Qty=" + D1.英文[2].Qty ;  
txt += "  D1.英文[2].from="+ D1.英文[2].from ;

txt += "\nD1.英文[3].item=" + D1.英文[3].item ;
txt += "  D1.英文[3].Qty=" + D1.英文[3].Qty ;  
txt += "  D1.英文[3].from="+ D1.英文[3].from ;

demo.innerHTML = txt; 
</script>
<style>
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
r{font-size:20px;color:red;}

</style>

var Tt= '' ;

Tt += 'var Ay = ' + JSON.stringify(Ay) ;

Tt += '\n\nAy.length = ' + Ay.length ;
Tt += '\nAy = ' + Ay
Tt += '\nJSON.stringify(Ay) = ' + JSON.stringify(Ay) ;

Tt += '\n\nObject.keys(Ay).length = ' + Object.keys(Ay).length ; 
Tt += '<br>Object.keys(Ay[0]).length = ' + Object.keys(Ay[0]).length ; 
Tt += '<br>Object.keys(Ay[1]).length = ' + Object.keys(Ay[1]).length ; 
Tt += '<br>Object.keys(Ay[2]).length = ' + Object.keys(Ay[2]).length ;  
Tt += '\nJSON.stringify(Object.keys(Ay))    = ' + 
          JSON.stringify(Object.keys(Ay)) ;
Tt += '\nJSON.stringify(Object.keys(Ay[0])) = ' + 
          JSON.stringify(Object.keys(Ay[0])) ;
Tt += '\nJSON.stringify(Object.keys(Ay[1])) = ' + 
          JSON.stringify(Object.keys(Ay[1])) ;
Tt += '\nJSON.stringify(Object.keys(Ay[2])) = ' + 
          JSON.stringify(Object.keys(Ay[2])) ;

Tt += '<br><br>Object.values(Ay).length = ' + Object.values(Ay).length ; 
Tt += '<br>Object.values(Ay[0]) = ' + Object.values(Ay[0]) ; Tt += '<br>Object.values(Ay[1]) = ' + Object.values(Ay[1]) ; Tt += '<br>Object.values(Ay[2]) = ' + Object.values(Ay[2]) ;

Tt += '\n\nJSON.stringify(Object.values(Ay))    ☟\n' + 
          JSON.stringify(Object.values(Ay)) ;
Tt += '\n\nJSON.stringify(Object.values(Ay[0])) ☟\n' + 
          JSON.stringify(Object.values(Ay[0])) ;
Tt += '\n\nJSON.stringify(Object.values(Ay[1])) ☟\n ' + 
          JSON.stringify(Object.values(Ay[1])) ;
Tt += '\n\nJSON.stringify(Object.values(Ay[2])) ☟\n ' + 
          JSON.stringify(Object.values(Ay[2])) ;

var obj = JSON.parse(JSON.stringify(Ay));
Tt += '\n\n<r>var obj = JSON.parse(JSON.stringify(Ay))</r>'
Tt += '\nobj[0].aa = ' + obj[0].aa +'  obj[0].bb = '+obj[0].bb;
Tt += '\nobj[1].aa = ' + obj[1].aa +'  obj[1].bb = '+obj[1].bb;
Tt += '  obj[1].cc = ' + obj[1].cc ;
Tt += '\nobj[2].aa = ' + obj[2].aa +'  obj[2].bb = '+obj[2].bb;

demo.innerHTML = Tt;

</script>

Edit

#html #網頁格式 #style #div #JavaScript array 陣列 #JavaScript Array #html Array #JavaScript Array JSON #html Array JSON #html Object.keys() #JavaScript Object.keys() #html Object.values() #JavaScript Object.values()

2023年3月19日星期日

input Number Key

input Number Key only
input 僅輸入數字鍵

<pre><b>input Number Key only 
input 僅輸入數字鍵</b>

<<c>input type="text" <r>onkeyup</r>="CT(this)">

<<c>script>
function CT(x)   {
  var ls = x.value.substr(-1) ;
  if(ls.charCodeAt(0) >= 42 && ls.charCodeAt(0)<= 57){return }
  x.value=x.value.substr( 0,x.value.length-1 )
}
<<c>/script>

input only [0 to 9] , [+ - * /]</pre>

<pre><b>input Number Key only 
input 僅輸入數字鍵</b>

<<c>input type="text" <r>onkeypress</r>="return isNumberKey(event)" >

<<c>script>
function isNumberKey(evt)   {
   var charCode = (evt.which) ? evt.which : event.keyCode
   if (charCode >= 42 && charCode <= 57){return true;}
   if (charCode == 13){return true;}
   return false;      }
<<c>/script>

input only [0 to 9] , [+ - * /]</pre>

<pre><bb>input  on mouseove</bb>
<input type="text" size="20" value="11" />
<input type="text" size="20" value="22" />
<input type="text" size="20" value="33" />
<input type="text" size="20" value="44" />
<input type="text" size="20" value="55" />

<<c>script>
var Tag= document.querySelectorAll("input") ;
Tag.forEach((round) => {
    round.addEventListener("mouseover", function() { 
    round.select() ;
  }) })
<<c>/script>
</pre>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

<pre><bb>Activate the next input field 
激活下一個輸入字段</bb>
<input type="text" size="20" value="11" />
<input type="text" size="20" value="22" />
<input type="text" size="20" value="33" />
<input type="text" size="20" value="44" />
<input type="text" size="20" value="55" />
<div id="dp"></div>
<<c>script>
var Tag= document.querySelectorAll("input") ;
Tag.forEach((round) => {
    round.addEventListener("keypress", function(e) { 
          if(e.key == "Enter"){
                var ii = [...Tag].indexOf(event.target);
                if(ii > Tag.length-2){ii=-1}
                Tag[ii+1 ].select()  }
  }) })
<<c>/script>
</pre>

}) })
</script>

Edit

#html #網頁格式 #script #div #input #input 僅輸入數字鍵 #input Number Key only

2023年3月17日星期五

window open

JavaScript window.open() 開啟新視窗

參數	window.open 參數值與說明
toolbar	toolbar，預設是要顯示，若不顯示 toolbar=no。
scrollbars	scroll bars 要顯示可用參數值 yes，若不顯示請使用參數值 scrollbars=no。
resizable	是否同意網友自己調整新視窗的大小，若不同意請使用參數值 resizable=no。
location	網址欄位顯示控制，預設是要顯示，若不顯示請使用參數值 location=no。
menubar	目錄欄位顯示控制，預設為要顯示，若不顯示請使用參數值 menubar=no。
status	狀態列顯示控制，預設為要顯示，若不顯示請用參數值 status=no。
left	開啟的新視窗靠瀏覽器左邊的距離，單位為 px。
top	開啟的新視窗靠瀏覽器上邊的距離，單位為 px。
width	開啟的新視窗寬度，單位為 px。
height	開啟的新視窗高度，單位為 px。
fullscreen	是否在全屏模式下顯示瀏覽器。默認是否。全屏模式下的窗口也必須處於影院模式。

<table border="1" cellspacing="1" style="width: 100%;height:100%">
<tbody>
<tr><td style="width:80px">
<button  onclick="LT()">左上角開視窗 </button >
</td><td>
newwin = window.open("","neww","width=300,height=300")<br>
newwin.moveTo(0, 0)<br>
newwin.focus()<br>
newwin.document.write(...視窗內容...)<br> 
newwin.document.write(...視窗內容...)<br>
newwin.document.close();
</td></tr>

<tr><td>
<button  onclick="BB()">中央角開視窗 </button >
</td><td>
newwin = window.open("","neww","width=300,height=300")<br>
newwin.moveTo( (screen.width-300)/2, (screen.height-300)/2) )<br>
newwin.focus()<br>
newwin.document.write(...視窗內容...)<br> 
newwin.document.write(...視窗內容...)<br>
newwin.document.close();
</td></tr>

<tr><td>
<button  onclick="RB()">右下角開視窗 </button >
</td><td>
newwin = window.open("","neww","width=300,height=300")<br>
newwin.moveTo(5000, 5000)<br>
newwin.focus()<br>
newwin.document.write(...視窗內容...)<br> 
newwin.document.write(...視窗內容...)<br>
newwin.document.close();
</td></tr></tbody></table>

function RB(){  
//開新視窗在 右下角 
if(newwin ) {newwin.close()} 
newwin = window.open( "","neww" ,"width=300,height=300");
newwin .moveTo(5000, 5000); 
newwin.focus();
newwin.document.write('<center>window open<br>'); newwin.document.write('<input type="button" onclick = "window.close() " value="close">') 
newwin.document.write('<center>'); 
newwin.document.close();}

function BB(){    
//正中央有關閉按鈕 
if(newwin ) {newwin.close()} 
newwin = window.open("","neww","width=300,height=300");                newwin .moveTo((screen.width-300 ) / 2, (screen.height-300) / 2); newwin.focus(); 
newwin.document.write('<center>window open<br>'); newwin.document.write('<input type="button" onclick = "window.close() " value="close">') 
newwin.document.write('<center>');  newwin.document.close();}

</script>

Edit

#html #網頁格式 #style #div #script window open #script 開新視窗 #document.write()

2023年3月16日星期四

HTML dd Tag

<dl>、<dt>、<dd> 標籤的層級不同

Edit

#html #網頁格式 #style #div

pre

HTML <pre﹥ 元素表示預定義格式文本

Edit

#html #網頁格式 #style #div #標簽排版


  # 格式文本
  #HTML

訂閱：文章 (Atom)

2023年3月24日 星期五

JavaScript Math Object 是一個擁有數學常數及數學函數。

2023年3月23日 星期四

document.getElementById(id)取得 id 的元素

2023年3月22日 星期三

JavaScript Math Object 是一個擁有數學常數及數學函數。

element.setAttribute(name, value) 設置指定元素上的一個屬性值。

2023年3月21日 星期二

createElement() 創建元素

children 子元素 / parentElement 父元素

2023年3月20日 星期一

focus() / blur()

JavaScript Array JSONJSON.stringify(JSON) / Object.keys( ) / Object.values( )

2023年3月19日 星期日

input Number Key only input 僅輸入數字鍵

2023年3月17日 星期五

JavaScript window.open() 開啟新視窗

2023年3月16日 星期四

<dl>、<dt>、<dd> 標籤的層級不同

HTML <pre﹥ 元素表示預定義格式文本

2023年3月24日星期五

JavaScript Math Object
是一個擁有數學常數及數學函數。

2023年3月23日星期四

document.getElementById(id)
取得 id 的元素

2023年3月22日星期三

JavaScript Math Object
是一個擁有數學常數及數學函數。

element.setAttribute(name, value)
設置指定元素上的一個屬性值。

2023年3月21日星期二

2023年3月20日星期一

JavaScript Array JSON
JSON.stringify(JSON) / Object.keys( ) / Object.values( )

2023年3月19日星期日

input Number Key only
input 僅輸入數字鍵

2023年3月17日星期五

2023年3月16日星期四