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