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> <script> function ISKey(event){ var charCode = (evt.which) ? evt.which : evt.keyCode; document.getElementById("kkk").innerHTML=charCode ; if (charCode == 13 ){ return true;}; if (charCode > 41 && charCode < 57){ return true;}; return false; } </script> <script> var Class= document.querySelectorAll(".c") ; 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>

00

<style> #Random {font-size:20px;width:100%} #Random td{font-size:20px;padding:6px} </style> <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> <script> var qid ; function Ram(){ clearTimeout ( qid );Math.floor 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>

00

<font size = 5><center>number.toFixed(x)<br> 小數點後有指定位數的數字</center><font size = 3> <pre> 1234.123456789.toFixed(0) = <script>document.write(1234.123456789.toFixed(0) ) </script> 1234.123456789.toFixed(2) = <script>document.write(1234.123456789.toFixed(2) ) </script> 1234.123456789.toFixed(5) = <script>document.write(1234.123456789.toFixed(5) ) </script> 1234.123456789.toFixed(30) = <script>document.write(1234.123456789.toFixed(30) ) </script> </pre>

00

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)
設置指定元素上的一個屬性值。

<pre><font size = 5>element.setAttribute(string name, string value) <font size = 4><br>string name 名稱和值的新屬性。 string value 屬性設定為指定的值。 example : div1.setAttribute("align", "center") div1.setAttribute("id", "div2")     input.setAttribute("type", "button") img.setAttribute("src", "yy.jpg") 相關 : getAttribute()    hasAttribute()     removeAttribute()<br /> </pre>

00

<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> <script language="JavaScript"> function Change(){ var CHid = idInput.value ; var CHcolor = document.getElementById("Cinput").value ; var CHfont = document.getElementById("Finput").value ; Mdiv.children[0].setAttribute("id",CHid ); Mdiv.children[0].setAttribute("style","color:" + CHcolor +";font-size :" + CHfont ); id1.innerHTML = Mdiv.children[0].id; id2.innerHTML = Mdiv.children[0].id; id3.innerHTML = Mdiv.children[0].id; id4.innerHTML = Mdiv.children[0].id; } Change() </script>

00

Edit

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

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> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<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> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("<div>New div</div>"); newDiv.appendChild(newContent); document.body.appendChild(newDiv, div1); } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<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> <script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi"); newDiv.appendChild(newContent); div1.appendChild(newDiv, div1); } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<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> <script> function myFunction() { var newNode = document.createElement("li"); var textNode = document.createTextNode("new li"); newNode.appendChild(textNode); myList.insertBefore(newNode, myList.children[1]); } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<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> <script> function remove(x) { Mid.removeChild(x) } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<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> <table border="1" style="width:100%"> <tbody> <tr><td width="50%" height="80px"> <input id="DP" type="text" value="input tag" /> </td><td> <button id="B4" onclick="Replace()" title="B4">換掉元素</button> </td></tr></tbody></table> <script> function Replace() { if( DP.nodeName=="INPUT"){ var textarea =document.createElement('textarea') ; textarea.innerHTML = "textarea tag"; textarea.id="DP" ; DP.parentNode.replaceChild(textarea , DP) ; return } var input =document.createElement('input') ; input.value = "input tag" ; input.id="DP" ; DP.parentNode.replaceChild(input, DP) ; } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red; } #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>

00

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> <div id="dp"></div> </pre> <div id="Mdiv"> <div>111</div> <a>222</a> <h1>333</h1> <p>444</p> </div> <script> var txt="" ; txt += "Mdiv.children.length = " + Mdiv.children.length ; txt += "<br>" ; txt += "<br>Mdiv.children[0].nodeName= " + Mdiv.children[0].nodeName; txt += "<br>Mdiv.children[1].nodeName= " + Mdiv.children[1].nodeName; txt += "<br>Mdiv.children[2].nodeName= " + Mdiv.children[2].nodeName; txt += "<br>Mdiv.children[3].nodeName= " + Mdiv.children[3].nodeName; txt += "<br>" ; txt += "<br>Mdiv.children[0].innerHTML= " + Mdiv.children[0].innerHTML ; txt += "<br>Mdiv.children[1].innerHTML= " + Mdiv.children[1].innerHTML ; txt += "<br>Mdiv.children[2].innerHTML= " + Mdiv.children[2].innerHTML ; txt += "<br>Mdiv.children[3].innerHTML= " + Mdiv.children[3].innerHTML ; dp.innerHTML =txt; </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<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> <div id="dp"></div> </pre> <div id="Mdiv"> <div id="div"> 111 <a id="a"> 222 </a> <h1 id="h1"> 333 </h1> </div> <p id="p"> 444 </p> </div> <script> var txt="" ; txt += "<br>p.parentElement.id = "+ p.parentElement.id ; txt += "<br>h1.parentElement.id = "+ h1.parentElement.id ; txt += "<br>a.parentElement.id = "+ a.parentElement.id ; txt += "<br>div.parentElement.id = "+ div.parentElement.id ; txt += "<br>a.parentElement.parentElement.id = "+ a.parentElement.parentElement.id ; dp.innerHTML =txt; </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

Edit

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

blur focus

focus() / blur()

<pre><b>聚焦：element.focus()獲得焦點 element.blur()失去焦點 </b> <<c>input type="type" value="⇦ blur" onmouseout = "this.blur(); this.value= '⇦ blur'" onmouseover = "this.focus();this.value= '⇦ focus'" /> <<c>style> input:focus {background-color: yellow } input {background-color: lime } <<c>/style> </pre> <input type="type" value="⇦ blur" onmouseout="this.blur();this.value='⇦ blur'" onmouseover="this.focus();this.value='⇦ focus'" /> <style> input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("input").mouseover(function(){ $("input").focus(); $("input").val("focus"); }); $("input").mouseout(function() { $("input").blur(); $("input").val("blur"); }); }); </script> <style> input:focus {background-color: yellow } input {background-color: lime } </style> <style> b{font-size:30px;color:blue;} #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>

00

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); var txt = "<font size='4'>"; txt += " var text = '" + '[{ "aa":"00" , "bb":"00000" },' txt += '\n { "aa":"11" , "bb":"11111" },' txt += '\n { "aa":"22" , "bb":"22222" }] ;' txt += " ' " ; 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); var txt = "<font size='4'>"; txt += " var text = '" + '[{ "aa":"00" , "bb":"00000" },' txt += '\n { "aa":"11" , "bb":"11111" },' txt += '\n { "aa":"22" , "bb":"22222" }] ;' txt += " ' " ; 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> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<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"}] } <p id="demo" ></p> </pre> <script> var txt ="" ; 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>

00

<pre><p id="demo"></p> </pre> <script> var Ay= [{ "aa":"00" , "bb":"00000" },{ "aa":"11" , "bb":"11111","cc":"111" }, { "aa":"22" , "bb":"22222"}] 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> <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+ */ } #demo{font-size:20px;} b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<div id="Dp"></div> <br> <script> var DDP = "<font size='5'>" var D1= {"0":"A","1":"B","2":"C","3":"D"}; obj = JSON.stringify(D1) DDP += 'var D1= {"0":"A","1":"B","2":"C","3":"D"};<br>' ; DDP += '<br> obj = JSON.stringify(D1) ;<br>' ; DDP += 'obj ☛ ' + obj ; DDP += '<br> Object.keys(D1).length ☛ '+ Object.keys(D1).length ; DDP += '<br> Object.keys(D1) ☛ '+ Object.keys(D1) ; DDP+='<br><br>Object.values(D1) = ' + Object.values(D1) ; DDP+='<br>Object.values(D1)[0] = ' + Object.values(D1)[0] ; DDP+='<br>Object.values(D1)[1] = ' + Object.values(D1)[1] ; DDP+='<br>Object.values(D1)[2] = ' + Object.values(D1)[2] ; DDP+='<br>Object.values(D1)[3] = ' + Object.values(D1)[3] ; DDP+='<br><br>D1[0] = ' + D1[0] ; DDP+='<br> D1[1] = ' + D1[1] ; DDP+='<br> D1[2] = ' + D1[2] ; DDP+='<br> D1[3] = ' + D1[3] ; Dp.innerHTML = DDP; </script> <style> l1{padding-left: 8em;} </style>

00

<p id="demo"></p> <script> var Ay= [ "00","11","22","33","44","55" ]; var txt =''; txt += 'var Ay= [ "00","11","22","33","44","55" ];<br><br>' ; txt += 'Ay☛ ' + Ay; txt += '<br>Ay.length ☛ ' + Ay.length ; txt += '<br>Object.keys(Ay).length ☛ ' + Object.keys(Ay).length ; txt += '<br>Object.values(Ay).length ☛ ' + Object.values(Ay).length ; txt +='<br>Ay[0] ☛ '+ Ay[0] + "<l /> Object.values(Ay)[0] ☛ "+Object.values(Ay)[0] ; txt+='<br>Ay[1] ☛ '+ Ay[1] + "<l /> Object.values(Ay)[1] ☛ "+Object.values(Ay)[1] ; txt+='<br>Ay[2] ☛ '+ Ay[2] + "<l /> Object.values(Ay)[2] ☛ "+Object.values(Ay)[2] ; txt+='<br>Ay[3] ☛ '+ Ay[3] + "<l /> Object.values(Ay)[3] ☛ "+Object.values(Ay)[3] ; txt+='<br>Ay[4] ☛ '+ Ay[4] + "<l /> Object.values(Ay)[4] ☛ "+Object.values(Ay)[4] ; txt+='<br>Ay[4] ☛ '+ Ay[5] + "<l /> Object.values(Ay)[5] ☛ "+Object.values(Ay)[5] ; demo.innerHTML = txt; </script> <style> L{padding-left: 4em;} #demo{font-size:22px;} </style>

00

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

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> <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 ) } </script> <input type="text" onkeyup="CT(this)"> <div id="DP"></div> <style> input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:25px;color:blue;} r{font-size:20px;color:red;} </style>

00

<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> <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; } </script> <input type="text" onkeypress="return isNumberKey(event)" > <style> input:focus {background-color: yellow} input {background-color: lime } 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+ */ } b{font-size:25px;color:blue;} r{font-size:20px;color:red;} </style>

00

<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> <script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("mouseover", function() { round.select() ; }) }) </script> <style> input {cursor:pointer;} 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>

00

<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> 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() } //dp.innerHTML =e.key ; //dp.innerHTML = Tag.length ; //dp.innerHTML = [...Tag].indexOf(event.target) //dp.innerHTML = [...Tag].indexOf(event.target) ; //const index = [...form].indexOf(event.target) }) }) </script> <style> input {cursor:pointer;} 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>

00

Edit

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

window open

JavaScript window.open() 開啟新視窗

JavaScript 的 window.open() 來開啟新的視窗，新的視窗可以顯示不同的 HTML 或 PHP 網頁。<br><br> window.open(' 新視窗的網址 ', '新視窗的名稱', config='height=高度,width=寬度'); <br><br> example 1 : 開新視窗 html.ug5g.com<br> <span class="sa" onclick="window.open( ' https://html.ug5g.com/ ' , 'NEW_W' , 'height=500,width=500');"> <<c>span onclick="window.open( 'https://html.ug5g.com/ ' , 'NEW_W' , 'height=500,width=500');"> 開新視窗 <<c>/span> </span> <br><br> example 2 : 開新空白視窗<br> <span class="sa" onclick="window.open( '' , 'NEW_W' , 'height=500,width=500'); "> <<c>span onclick="window.open( ' ' , 'NEW_W' , 'height=500,width=500');"> 開新視窗 <<c>/span> </span> <br><br> example 3 : 開新視窗在 右下角<br> <span class="sa" onclick="newwin = window.open( '','neww' ,'width=500,height=500');newwin .moveTo(5000, 5000); "> <<c>span onclick="newwin = window.open( ' ','neww' ,'width=500,height=500');newwin .moveTo(5000, 5000); "> 開新視窗 <<c>/span> </span> <style> .sa { color:blue; cursor:pointer; text-decoration : underline;} </style>

00

參數	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> <script>var newwin; function LT(){ //開新視窗在 左上角 if(newwin ) {newwin.close()} newwin = window.open("","neww","width=300,height=300"); newwin .moveTo(0, 0); 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 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>

00

Edit

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

HTML dd Tag

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

<pre>可製作出縮排的效果，<<c>dl>、<<c>dt>、<<c>dd> 標籤的層級不同。 <<c>dl> 清單 description list <<c>dt> 項目 description term <<c>dd> 描述 description descriptions <div>Example <<c>dl> <<c>dt> level one<<c>/dt> <<c>dd> first level content <<c>/dd> <<c>dd> first level content <<c>/dd> <<c>dt> Second floor<<c>/dt> <<c>dd> Second floor content <<c>/dd> <<c>/dl> </div></pre> result : <dl> <dt> level one</dt> <dd> first level content </dd> <dd> first level content </dd> <dt> Second floor</dt> <dd> Second floor content </dd> </dl> <style> div {background:beige} B {text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } pre {font-size: 20px;} ol {background-color:tan ;} li {background-color:ivory ;padding-left:10px;text-align: left;} li {word-break: break-word } r { color:red} </style>

00

Edit

#html #網頁格式 #style #div

pre

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

<pre><B> HTML <<c>pre﹥ 元素表示預定義格式文本。</B> 在該元素中的文本通常按照原文件中的編排， ♥● ♥● ♥● ♥● 以等寬字體的形式展現出來， ♥● ♥● ♥● ♥● 文本中的 空白符 空格 換行符， ♥● ♥●♥● ♥● 來都會顯示出。 ♥● ♥● ♥● ♥● 祝您生日快樂 ♥● ♥● 平安健康 ♥● ♥● 幸福美滿 ♥● ♥● ♥● ^__^ ♥● ♥● (oo)\_______ ♥● ♥● (__)\ )\/\ ♥● ♥● ||----w| ♥● ♥● || || ♥● ♥● </pre> <style> B {text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } pre {font-size: 20px;} ol {background-color:tan ;} li {background-color:ivory ;padding-left:10px;text-align: left;} li {word-break: break-word } r { color:red} </style>

00

<pre><font size=6> (>人<) (>_<) (¬_¬) (´∀`) (◎_◎;) ٩(^ᴗ^)۶ ٩(⚙ᴗ⚙)۶ ◉‿◉ ٩(●ᴗ●)۶ (=^_^=) (≧▽≦) (＞﹏＜) (＞x＜) o(^▽^)o (^-人-^) ((≡^⚲͜^≡)) ٩(͡๏̯͡๏)۶ ( ͡~ ͜ʖ ͡~) ( ͡° ͜ʖ ͡°) ( ͡⚆ ͜ʖ ͡⚆) </pre>

00

Edit

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

  #
 格式文本
  #HTML 


   

string to number

#isNaN #typeof

parseInt() / parseFloat()
文字 轉換 數字

<pre><B>parseInt(string, radix) 字串轉成整數</B> string argument and returns an integer string : 待轉成數字的字串。 radix : 從 2 到 36，能代表該進位系統的數字。 parseInt( "10" ,10) = <script>document.write( parseInt("10") ) </script> parseInt("-13.00" ,10) = <script>document.write( parseInt("-13.00") ) </script> parseInt( "16.33" ,10) = <script>document.write( parseInt("16.33") ) </script> parseInt("34 45 6",10) = <script>document.write( parseInt("34 45 6") ) </script> parseInt("40years",10) = <script>document.write( parseInt("40 years") ) </script> parseInt( "He 40" ,10) = <script>document.write( parseInt("He 40") ) </script> parseInt( "15*3" ,10) = <script>document.write( parseInt( "15*3", 10) ) </script> parseInt( "15e2" ,10) = <script>document.write( parseInt( "15e2", 10) ) </script> parseInt( "42 " ,8) = <script>document.write( parseInt("42",8) ) </script> parseInt( "42" ,16) = <script>document.write( parseInt("42",16) ) </script> parseInt( "0xF" ,16) = <script>document.write( parseInt(" 0xF" , 16 ) ) </script> parseInt( "0xA" ,16) = <script>document.write( parseInt(" 0xA" , 16 ) ) </script> parseInt( "1111" ,2 ) = <script>document.write( parseInt(" 1111" , 2 ) ) </script> </pre> <style> B {text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } pre {font-size: 20px;} ol {background-color:tan ;} li {background-color:ivory ;padding-left:10px;text-align: left;} li {word-break: break-word } r { color:red} </style>

00

<pre><B>parseFloat(string) 字串轉成浮點數</B> string argument and returns a floating string : 待轉成數字的字串。 parseFloat( "10" ) = <script>document.write( parseFloat("10") ) </script> parseFloat( "10.233" ) = <script>document.write( parseFloat("10.233") ) </script> parseFloat("-10.233" ) = <script>document.write( parseFloat("-10.233") ) </script> parseFloat("34 45 66") = <script>document.write( parseFloat("34 45 66") ) </script> parseFloat( "0x6" ) = <script>document.write( parseFloat(" 0x6 ") ) </script> parseFloat("40 years") = <script>document.write( parseFloat("40 years") ) </script> parseFloat( "He 40" ) = <script>document.write( parseFloat("He 40") ) </script> </pre> <style> B {text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } pre {font-size: 20px;} ol {background-color:tan ;} li {background-color:ivory ;padding-left:10px;text-align: left;} li {word-break: break-word } r { color:red} </style>

00

<pre><B>String(value) 數字轉成字串</B> input number into a string value : 數字。 String( 10 ) = <script>document.write( String(10) ) </script> String( -10 ) = <script>document.write( String(-10) ) </script> String(10.23) = <script>document.write( String(10.23) ) </script> String(0xA) = <script>document.write( String(0xA) ) </script> String(0xff) = <script>document.write( String(0xff) ) </script> String(5+3) = <script>document.write( String(5+3) ) </script> String(5/3) = <script>document.write( String(5/3) ) </script> String(true) = <script>document.write( String(true) ) </script> String(false) = <script>document.write( String(false) ) </script> String(Boolean(0)) = <script>document.write( String(Boolean(0)) ) </script> String(Boolean(1)) = <script>document.write( String(Boolean(1)) ) </script> String([1,2,3,4]) = <script>document.write( String([1,2,3,4]) ) </script> String({"name":"12"}) = <script>document.write( String({"name":"12"}) ) </script> </pre> <style> B {text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } pre {font-size: 20px;} ol {background-color:tan ;} li {background-color:ivory ;padding-left:10px;text-align: left;} li {word-break: break-word } r { color:red} </style>

00

<pre><B>number.toString(radix) 數字作轉成字符串 </B> Convert numbers to strings number : 數字。 radix : 可選。使用的基數 , 2/8/16 進制。 ( 10).toString( ) = <script>document.write( (10).toString( ) ) </script> (-10).toString( ) = <script>document.write( (-10).toString( ) ) </script> (1.25).toString( ) = <script>document.write( (1.25).toString( ) ) </script> ( 15).toString( 2) = <script>document.write( (15).toString(2 ) ) </script> ( 15).toString( 8) = <script>document.write( (15).toString(8 ) ) </script> ( 15).toString(16) = <script>document.write( (15).toString(16 ) ) </script> (0xA).toString( ) = <script>document.write( (0xA).toString( ) ) </script> (0xF).toString( ) = <script>document.write( (0xF).toString( ) ) </script> (0xFF).toString( ) = <script>document.write( (0xFF).toString( ) ) </script> (5+3).toString( ) = <script>document.write( (5+3).toString( ) ) </script> (5/3).toString( ) = <script>document.write( (5/3).toString( ) ) </script> Boolean(0).toString( ) = <script>document.write( Boolean(0).toString( ) ) </script> Boolean(1).toString( ) = <script>document.write( Boolean(1).toString( ) ) </script> ([1,2,3]).toString( ) = <script>document.write( ([1,2,3]).toString( ) ) </script> ({"name":"12"}).toString( ) = <script>document.write( ({"name":"12"}).toString( ) ) </script> </pre> <style> B {text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } pre {font-size: 20px;} ol {background-color:tan ;} li {background-color:ivory ;padding-left:10px;text-align: left;} li {word-break: break-word } r { color:red} </style>

00

<pre><B>typeof 檢驗運算元的型別</B> typeof type operator typeof 37 = <script>document.write(typeof 37 ) </script> typeof 3.14 = <script>document.write( typeof 3.14 ) </script> typeof (6+6) = <script>document.write( typeof (6+6) ) </script> typeof Math.LN2 = <script>document.write( typeof Math.LN2 ) </script> typeof Infinity = <script>document.write( typeof Infinity ) </script> typeof "" = <script>document.write( typeof "" ) </script> typeof " " = <script>document.write( typeof " " ) </script> typeof "love" = <script>document.write( typeof "love" ) </script> typeof true = <script>document.write( typeof true ) </script> typeof false = <script>document.write( typeof false ) </script> typeof undefined = <script>document.write( typeof undefined ) </script> typeof html = <script>document.write( typeof html ) </script> typeof {a:1} = <script>document.write( typeof {a:1} ) </script> typeof [1, 2, 4] = <script>document.write( typeof [1, 2, 4] ) </script> typeof new Date = <script>document.write( typeof new Date ) </script> typeof {name:'john', age:34} = <script>document.write( typeof {name:'john', age:34} ) </script> typeof function(){} = <script>document.write( typeof function () {} ) </script> typeof Math.sin = <script>document.write( typeof Math.sin ) </script> </pre> <style> B {text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } pre {font-size: 20px;} ol {background-color:tan ;} li {background-color:ivory ;padding-left:10px;text-align: left;} li {word-break: break-word } r { color:red} </style>

00

Edit

#html #網頁格式 #style #div #string 文字數字轉換 parseInt() #string 文字數字轉換 parseFloat() #string 文字數字轉換 toString() #string 文字數字型別 typeof #string 文字數字型別 String() #parseInt() string argument and returns an integer #parseFloat() string argument and returns a floating #toString() Convert numbers to strings #typeof typeof type operator #String() input number into a string