✍ 📁 🙈 🙉 🙊

2023年3月15日星期三

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>

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

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

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

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

2023年3月14日星期二

charCodeAt

取字串中一個字元的編碼

document.getElementById('TTkey').innerHTML = KeyC ;

event.keyCode=9;window.event.keyCode=9;
          event.returnValue=false;
}

document.getElementById('Dd').select(); 
</script>

Edit

#html #網頁格式 #style #div #replace() 字串取代 #match() 傳回尋找到的字串 #concat() 混合兩個字串成一個新字串 #charCodeAt() 取字串中一個字的編碼 #split() 分隔成字串陣列

navigator.userAgent

Edit

2023年3月13日星期一

string modification

String modification 字串修改

<h3>split() 分隔成字串陣列</h3>
  
<pre>stringObject.split(separator, length);
      
      用於把字串分隔成「字串陣列」，separator 為分隔字串 
                                 length    為分隔數目)。
      separator("")  那麼 <r>字元</r> 之間都會被分割。
      separator(" ") 那麼 <r>字串</r> 之間都會被分割。 
      stringObject 中的每個字元之間都會被分割。
   
    "ug5g com : script : split()!".split("")  =
    <script>document.write( "ug5g com : script : split()!".split("")  ) </script>
    
    "ug5g com : script : split()!".split("",10)  =
    <script>document.write( "ug5g com : script : split()!".split("",10)  ) </script>
    
   "ug5g com : script split()!".split(/\s+/)  =
    <script>document.write( "ug5g com : script : split()!".split(/\s+/)  ) </script>
    
    "ug5g com : script : split()!".split(/\s+/,3)  =
    <script>document.write( "ug5g com : script : split()!".split(/\s+/,3)  ) </script>

"ug5g com : script : split()!".split(" ")  =
    <script>document.write( "ug5g com : script : split()!".split(" ")  ) </script>

"ug5g com : script : split()!".split(" ",13)  =
    <script>document.write( "ug5g com : script : split()!".split(" ",13)  ) </script>
    
    "ug5g com : script : split()!".split(":",13)  =
    <script>document.write( "ug5g com : script : split()!".split(":")  ) </script>

</pre>

Edit

#html #網頁格式 #style #div #replace() 字串取代 #match() 傳回尋找到的字串 #concat() 混合兩個字串成一個新字串 #split() 分隔成字串陣列 #toLowerCase() string 換為小寫 #toUpperCase() string 換為大寫 #script replace() string replacement #script match() returns the found string #script concat() Mixes two strings into a new string #script split() separated into an array of strings #script toLowerCase() string converted to lowercase #script toUpperCase() string converted to uppercase

string character position

String meta position 字串元位置,

<h3>indexOf() 字串尋找</h3>
<pre>stringObject.indexOf(searchvalue,fromIndex)
      字串尋找「由左至右尋找」將從頭到尾地檢索字串 stringObject，
      是否包含有 searchvalue。
      檢索開始的位置 fromIndex (沒有指定 fromIndex 時)。 
      如果找到一個 searchvalue ，轉回 searchvalue 所得位置。
  
    "0123456789ABCDEF".indexOf("456") = <script>document.write( "0123456789ABCDEF".indexOf("456")) </script>
    "0123456789ABCDEF".indexOf("456",2) = <script>document.write( "0123456789ABCDEF".indexOf("456",2)) </script>
    "0123456789ABCDEF".indexOf("456",8) = <script>document.write( "0123456789ABCDEF".indexOf("456",8)) </script>
    "0123456789ABCDEF".indexOf("AB") = <script>document.write( "0123456789ABCDEF".indexOf("AB")) </script>
    "0123456789ABCDEF".indexOf("939") = <script>document.write( "0123456789ABCDEF".indexOf("939")) </script>

</pre>

<h3>lastIndexOf() 字串反向尋找</h3>
  
<pre>stringObject.lastIndexOf(searchvalue,fromIndex)
      
      字串反向尋找「由右至左尋找」(反向)將從尾到頭地檢索字串，
      stringObject 看它是否含有子串 searchvalue。
      開始檢索的位置(左)在字串的 fromIndex 處或沒有指定則為字串的結尾。
      
   
    var TxT = "0123456789ABCDEF"
    TxT.lastIndexOf("456",15) = <script>document.write( TxT.lastIndexOf("456",15)) </script>
    TxT.lastIndexOf("456",2)  = <script>document.write( TxT.lastIndexOf("456",2)) </script>
    TxT.lastIndexOf("456",8)  = <script>document.write( TxT.lastIndexOf("456",8)) </script>
    TxT.lastIndexOf("AB")     = <script>document.write( TxT.lastIndexOf("AB")) </script>
    TxT.lastIndexOf("939")    = <script>document.write( TxT.lastIndexOf("939")) </script>

</pre>

<h3>startsWith() 判斷字符串是否以指定的子字符串開始</h3>
  
<pre>   string.startsWith(searchvalue, start)
      方法用於 檢測 searchvalue 是否是指定的子串開始。
      searchvalue : 要查找的字符串
      start : 查找的開始位置，默認為 0。

"hi Hello World".startsWith("hi")      =   <script>document.write( "hi Hello World".startsWith("hi") ) </script>
    "hi Hello World".startsWith("Hello")   =   <script>document.write( "hi Hello World".startsWith("Hello") ) </script>
    "hi Hello World".startsWith("World")   =   <script>document.write( "hi Hello World".startsWith("World") ) </script>
    "hi Hello World".startsWith("World",9) =   <script>document.write( "hi Hello World".startsWith("World",9) ) </script>
</pre>

<h3>endsWith() 判斷字符串是否以指定的子字符串結尾</h3>

<pre>   stringObject.endsWith(searchvalue, start)
        方法用於 檢測 searchvalue 是否是指定的子串結尾。
        searchvalue : 要查找的字符串
        start : 查找的開始位置，默認為 0。
      
    "hi Hello World".endsWith("hi")      =   <script>document.write( "hi Hello World".endsWith("hi") ) </script>
    "hi Hello World".endsWith("Hello")   =   <script>document.write( "hi Hello World".endsWith("Hello") ) </script>
    "hi Hello World".endsWith("World")   =   <script>document.write( "hi Hello World".endsWith("World") ) </script>
    "hi Hello World".endsWith("Hello",11) =   <script>document.write( "hi Hello World".endsWith("Hello",11) ) </script>

</pre>

<h3>test() 方法用於檢測一個字符串是否匹配某個模式</h3>

<pre>   RegExpObject.test(string)
     RegExpObject : 字符串是否全在。
     string : 要檢測的字符串。
          
    /hi/.test('hi Hello World')    =   <script>document.write( /hi/.test('hi Hello World') ) </script>
    /Hello/.test('hi Hello World') =   <script>document.write( /Hello/.test('hi Hello World') ) </script>
    /World/.test('hi Hello World') =   <script>document.write( /World/.test('hi Hello World') ) </script>
    /love/.test('hi Hello World')  =   <script>document.write( /love/.test('hi Hello World') ) </script>
    /r/.test('hi Hello World')     =   <script>document.write( /r/.test('hi Hello World') ) </script>
    /R/.test('hi Hello World')     =   <script>document.write( /R/.test('hi Hello World') ) </script>

</pre>

Edit

#html #網頁格式 #style #div #string test() 字串全在 #string indexOf() 字串尋找 #string lastIndexOf() 字串反向尋找() #string startsWith() 字串位置) #string search() 字串位置() #string endsWith() 字串位置 #script test() 字串全在 #script indexOf() 字串尋找 #script lastIndexOf() 字串反向尋找() #script startsWith() 字串位置) #script search() 字串位置() #script endsWith() 字串位置

string extract

string extraction 字串提取

<h3>substr() 提取字串中的幾個字</h3>
<pre>stringObject.substr(start, length)
        start : 是一個數字,位置從 0 開始,
                如果 start 是一個負數，從尾倒數。
       length : 總共要取出幾個字元，
                如果 length 大個字串 取到字串結尾。

var TxT = "0123456789ABCDEF"
    TxT.length = 16
    TxT.substr( 0)   = <script>document.write(TxT.substr(0)) </script>
    TxT.substr( 4)   = <script>document.write(TxT.substr(4)) </script>
    TxT.substr(-4)   = <script>document.write(TxT.substr(-4)) </script>
    TxT.substr(4,3)  = <script>document.write(TxT.substr(4,3)) </script>
    TxT.substr(4,30) = <script>document.write(TxT.substr(4,30)) </script>
    TxT.substr(-4,4) = <script>document.write(TxT.substr(-4,4)) </script>

</pre>

<h3>substring() 提取字串中兩個指定索引號之間的字元</h3>
<pre>stringObject.substring(start, index)
       start : 必需。一個非負的整數，開始位置。
       index : 可選。一個非負的整數，結束位置，如果省略該參數，
                那麼返回的子串會一直到字符串對象的結尾。

"0123456789ABCDEF".length = 16
    "0123456789ABCDEF".substring( 0)   = <script>document.write("0123456789ABCDEF".substring(0)) </script>
    "0123456789ABCDEF".substring( 4)   = <script>document.write("0123456789ABCDEF".substring(4)) </script>
    "0123456789ABCDEF".substring(-4)   = <script>document.write("0123456789ABCDEF".substring(-4)) </script>
    "0123456789ABCDEF".substring(4,6)  = <script>document.write("0123456789ABCDEF".substring(4,6)) </script>
    "0123456789ABCDEF".substring(4,30) = <script>document.write("0123456789ABCDEF".substring(4,30)) </script>
    "0123456789ABCDEF".substring(-4,4) = <script>document.write("0123456789ABCDEF".substring(-4,4)) </script>
</pre>

Edit

#html #網頁格式 #style #div #string extraction 字串提取 #substr() 提取字串中的幾個字 #substring() 提取字串中兩個指定索引號之間的字元 #slice() 取得部份字串 #script substr() #script substring() #script slice()

2023年3月7日星期二

dialog window

自製彈出對話視窗 Self made dialogue window

<div id="DP">
<input type="button" onclick="MYalert('Self made dialogue window <br> 自製 彈出對話視窗')" value="Self made dialogue window 
 自製 彈出對話視窗" >

var newDiv = document.createElement("div");
newDiv.id="ckalerttxt" ; 
document.body.appendChild(newDiv) ; 
   ckalerttxt.style.position = "absolute";
   ckalerttxt.style.padding  = "20px";
   ckalerttxt.style.textAlign  = "center";
   ckalerttxt.style.backgroundColor ="rgba(255,255,240,0.6)" ;
   ckalerttxt.style.zIndex = "999";
   ckalerttxt.style.width  = "100%";
   ckalerttxt.style.left   = "0%" ;
   ckalerttxt.style.top    = "100px" ;
   ckalerttxt.innerHTML    =  xx  ;
   ckalerttxt.innerHTML   += "<br>" ;
   var tt = "<button type='button' onclick='Cclose()'>close</button>" ;
   ckalerttxt.innerHTML += tt ;

document.body.style.overflow="hidden";
}
</script>
</div>

<div id="PG"></div>
<script>
var txt = DP.innerHTML ;

txt = txt.replace( /</g ,"<<c>" )
txt = txt.replace( /;/g ,";<br>" )
txt = txt.replace( "//" ,"<br><br>" )
txt = txt.replace( /<<c>script>/ ,"<br><br><<c>script>" )

PG.innerHTML = "<br>" + txt ;

</script>

Edit

#html #網頁格式 #style #div #alert() #dialog window #對話框窗口

2023年3月5日星期日

get IP

jquery Get IP https://api.ipdata.co cckedit

<h1>https://ipinfo.io<br>
$.getJSON("https://ipinfo.io", function (data) {....}</h1><br>
<div id="D1"></div>
<div id="D2"></div>
<div id="D3"></div>

$("#D1").html( "<r>JSON.stringify(data)</r> = " + JSON.stringify(data)) ;
$("#D2").html( "<br> <r>Object.keys(data).length</r> = " + 
                Object.keys(data).length) ;

$("#D3").html( "<br><r> data.ip</r> = " + data.ip + 
"<br> <r>data.hostname</r> = " + data.hostname + 
"<br> <r>data.city</r> = " + data.city + 
"<br> <r>data.region</r> = " + data.region + 
"<br> <r>data.country</r> = " + data.country + 
"<br> <r>data.loc</r> = " + data.loc + 
"<br> <r>data.org</r> = " + data.org + 
"<br> <r>data.timezone</r> = " + data.timezone + 
"<br> <r>data.readme</r> = " + data.readme  ) ; 
})

</script>

<ol>
<li><<o>h1>https://ipinfo.io<<o>/h1>
<li><<o>div id="D1"><<o>/div>
<li><<o>div id="D2"><<o>/div>
<li><<o>div id="D3"><<o>/div>
<br>
<li><<o>script src="https://code.jquery.com/jquery-3.4.1.min.js" > <<o>/script>
<br><br>
<li><<o>script>        
<li>var obj ;         
<li>$.getJSON("https://ipinfo.io", function (data) {  
<br><br>
<li>$("#D1").html( "JSON.stringify(data) = " + JSON.stringify(data))
<li>$("#D2").html( "<br> Object.keys(data).length = " + 
                Object.keys(data).length) ;
<br><br>
<li>$("#D3").html( "<<o>br> data.ip = " + data.ip + 
<li>"<<o>br> data.hostname = " + data.hostname + 
<li>"<<o>br> data.city = " + data.city + 
<li>"<<o>br> data.region = " + data.region + 
<li>"<<o>br> data.country = " + data.country + 
<li>"<<o>br> data.loc = " + data.loc + 
<li>"<<o>br> data.org = " + data.org + 
<li>"<<o>br> data.timezone = " + data.timezone + 
<li>"<<o>br> data.readme = " + data.readme  ) ;
<li>})

<li><<o>/script>

</ol>
<br>

<<o>script src="<r>https://secure.geobytes.com/GetCityDetails?key=7c756203dbb38590a66e01a5a3e1ad96&callback=var%20</r><b>cck</b><r>%20</r>">
<<o>/script>

http://ipinfo.io/json<br><br>
<ol>
<li><<c>div id="DP1"><<c>/div>
<br>
<li><<c>script>
<li>function ipinfo(cb, ip) {
<li>    var request ;
<br>       // Mozilla, Safari, ...
<li>       if (window.XMLHttpRequest){ request = new XMLHttpRequest(); } 
<br><br>       // IE
<br>       else if (window.ActiveXObject){ 
<br>            try { request = new ActiveXObject('Msxml2.XMLHTTP'); } 
<br>            catch (e) {
<br>            try { request = new ActiveXObject('Microsoft.XMLHTTP');} 
<br>            catch (e) {}  }  } ; 
  
<br><br>
<li>request.open("GET", '//ipinfo.io/' + ((ip) ? ip : ''), false) ;
<li>request.setRequestHeader("Accept", "application/json") ;
<br><br>
<li>       request.onreadystatechange = function() {
<br>       if (request.readyState == 4 && request.status == 200)
<br>            { cb(request.responseText);  } } ;
<br><br>
<li>    request.send(null);
<li> }
<br><br>
<li>ipinfo(function(response) { DP1.innerHTML = response;
});

<li><<o>/script>

</ol> 
 
<div id="DP1"></div>

request.open("GET", '//ipinfo.io/' + ((ip) ? ip : ''), false);
request.setRequestHeader("Accept", "application/json");
request.onreadystatechange = function() {

if (request.readyState == 4 && request.status == 200) {
            cb(request.responseText);   }
    };
    request.send(null);
}

ipinfo(function(response) { DP1.innerHTML = response;
});

</script>

http://ipinfo.io/json<br>
<ol>
<li><<c>div id="DP1"><<c>/div>
<br>
<li><<c>script>
<li>function ipinfo(cb, ip) {
<li>       var request = new XMLHttpRequest();
<li>       request.open("GET", '//ipinfo.io/' + ((ip) ? ip : ''), false);
<li>       request.setRequestHeader("Accept", "application/json");
<br><br>
<li>       request.onreadystatechange = function() {
<li>              if (request.readyState == 4 && request.status == 200)
<br>                     { cb(request.responseText);   }
    };
<br><br>
<li>       request.send(null);
<li>}
<br><br>
<li>ipinfo(function(response) { DP1.innerHTML = response; });
<li><<c>/script>

</ol>
  
<div id="DP1"></div>

function ipinfo(cb, ip) {
     var request = new XMLHttpRequest();

request.open("GET", '//ipinfo.io/' + ((ip) ? ip : ''), false);
request.setRequestHeader("Accept", "application/json");
request.onreadystatechange = function() {

if (request.readyState == 4 && request.status == 200) {
            cb(request.responseText);   }
    };
    request.send(null);
}

ipinfo(function(response) { DP1.innerHTML = response;

});

</script>

Edit

#html #網頁格式 #style #div #textarea #獲取 IP #IP address data

2023年3月4日星期六

fullScreen 全螢幕顯示的

script requestFullscreen() 全螢幕

<div id="mmm">
  <pre>  <<c>div id="mmm">  <button id="B6" onclick="Fullscreen()" > fullscreen </button>
     整個頁面或某個區塊變成全螢幕的形式，
     呼叫 全螢幕 elem.requestFullscreen()
     離開 全螢幕 document.exitFullscreen

<<c>script>
  function Fullscreen() {
    if (!window.screenTop && !window.screenY) {
          if ( mmm.requestFullscreen) 
             { mmm.requestFullscreen(); }
     else if ( mmm.msRequestFullscreen) 
             { mmm.msRequestFullscreen(); }
     else if ( mmm.mozRequestFullScreen)
             { mmm.mozRequestFullScreen(); } 
     else if ( mmm.webkitRequestFullscreen)
             { mmm.webkitRequestFullscreen(); }
     B6.innerHTML ="exitFullscreen" ; return; }

if ( document.exitFullscreen)
            { document.exitFullscreen(); } 
    else if ( document.mozCancelFullScreen)
            { document.mozCancelFullScreen(); }
    else if ( document.webkitCancelFullScreen)
            { document.webkitCancelFullScreen(); }
    else if ( document.msExitFullscreen) 
            { document.msExitFullscreen(); }
   B6.innerHTML ="fullscreen"
  }
  <<c>/script>

判斷現在是否全螢幕
    if (!window.screenTop && !window.screenY) {....}

css 全螢幕 設定 背景顏色
    #mmm:-webkit-full-screen {background-color: cornsilk;}
    #mmm:-moz-full-screen    {background-color: cornsilk;}
    #mmm:-ms-fullscreen      {background-color: cornsilk;}
    #mmm:fullscreen          {background-color: cornsilk;}

</pre>
</div>

if ( document.exitFullscreen)
           { document.exitFullscreen(); } 
   else if ( document.mozCancelFullScreen)
           { document.mozCancelFullScreen(); }
   else if ( document.webkitCancelFullScreen)
           { document.webkitCancelFullScreen(); }
   else if ( document.msExitFullscreen) 
           { document.msExitFullscreen(); }
   B6.innerHTML ="fullscreen "
}

</script>

#B6{ height:40px; width:180px ;
      font-size: 20px ;
      cursor: pointer ;
      color: black ;
      background-color: lightgray ;
      border-radius: 50%;
      box-shadow: 4px 4px #999 ;}

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

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

#B6{animation: mymove 1s infinite;}

@keyframes mymove { 60%  {color:crimson; }
                    80%  {color:yellow;  }
                    90%  {color:orange;  }
                    100% {color:brown;   }  }

pre     {font-size: 20px; }
h1{font-size: 30px;color : blue;font-weight : bold;text-align: center;}

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

.div-F:-webkit-full-screen {display:block}
.div-F:-moz-full-screen    {display:block}
.div-F:-ms-fullscreen      {display:block}
.div-F:fullscreen          {display:block}
</style>

</div>

</div>

<script>
function Mclick( xx,event){
var x = event.clientX;
var y = event.clientY;
var cw = document.body.clientWidth ;
var Mid = xx.parentElement  ;
var BTA = Mid.getElementsByClassName("BT") ;
if(x > cw/2){FTAA(xx) }
if(x < cw/2){FTLL(xx) }

//BTA[3].innerHTML = cw ;
//alert( y + "[]" + y);
}

function FPTs(id){
var Mid = id.parentElement
var PTL = Mid.getElementsByClassName("PT-img") ;
for(var x = 0; x < PTL.length ;x++){
PTL[x].setAttribute("title", x  ); }
//PTL[x].title= "end" ;
//DP.innerHTML =Mid.id;
}

//DP.innerHTML = Mid.id + " [" +  PTL.length + "] " + MsrcU ;
}

//* +++++++++ out Fullscreen ++++++++++++++++++++++++++++++++++++++++++ *//

//*  +++++++++++++++++++++++++++++++++++++++++++++++++++ *//
function FTAA(xx) {
var Mid = xx.parentElement  ;
var PTL = Mid.getElementsByClassName("PT-img") ;
var BTA = Mid.getElementsByClassName("BT") ;
xx.title = parseFloat(xx.title)+1   ;
if(xx.title > PTL.length-1 ){xx.title = 1} 
  var Msrc = PTL[xx.title].src ;
  var MsrcU= Msrc.replace(/s100/i ,"s1600") ;
PTL[0].style.backgroundImage = 'url(' + MsrcU + ')';
PTL[0].title = PTL[xx.title].title ;
BTA[0].title = PTL[xx.title].title ;
BTA[1].title = PTL[xx.title].title ;
BTA[3].innerHTML = "[" + xx.parentElement.title + "] " + PTL[xx.title].title + " / " +PTL.length  ;
}

//*  ------------------------------------------- *//
function FTLL(xx) {
var Mid = xx.parentElement ;
var PTL = Mid.getElementsByClassName("PT-img") ;
var BTA = Mid.getElementsByClassName("BT") ;
xx.title = parseFloat(xx.title)-1   ;
if(xx.title == 0 ){xx.title = PTL.length-1 } 
  var Msrc = PTL[xx.title].src ;
  var MsrcU= Msrc.replace(/s100/i ,"s1600") ;
PTL[0].style.backgroundImage = 'url(' + MsrcU + ')';
PTL[0].title = PTL[xx.title].title ;
BTA[0].title = PTL[xx.title].title ;
BTA[3].innerHTML = "[" + xx.parentElement.title + "] " + PTL[xx.title].title + " / " +PTL.length  ;
//alert(PTL.length  );  
}

</script>

.div-F:-webkit-full-screen {display:block}
.div-F:-moz-full-screen    {display:block}
.div-F:-ms-fullscreen      {display:block}
.div-F:fullscreen          {display:block}
</style>

</div>

//BTA[3].innerHTML = cw ;
//alert( y + "[]" + y);
}

//DP.innerHTML = Mid.id + " [" +  PTL.length + "] " + MsrcU ;
}

//* +++++++++ out Fullscreen ++++++++++++++++++++++++++++++++++++++++++ *//

</script>

Edit

#html #網頁格式 #style #div #requestFullscreen() 全螢幕 #exitFullscreen() 全螢幕 #css fullscreen

2023年3月3日星期五

CSS：Float

CSS Float 浮動

<div id="MMM" >
<div id="Mn1" onclick="MmDd(0)">float left</div>
<div id="Mn2" onclick="MmDd(1)">float right</div>
<div id="Mn3" onclick="MmDd(2)">float none </div>
<div id="Mn4" onclick="MmDd(3)">float left</div>
</div>
<div id="DDD">

<div id="DP1">
<img id="IMG" style="width:auto;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg?quality=82&strip=all&w=200"  />
Float浮動屬性:通常是想在版面上做出文繞圖的效果，但也可以應用在元素的左右對齊。
<br>
讓元素脫離normal flow，浮動到父容器的上內緣（top），並往右right或往左left貼齊父容器的左內緣或右內緣。

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:left 。

<<c>style>
#img { float: left ;padding: 7px;}
<<c>/style>

</pre>

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:right。

<<c>style>
#img { float: right;padding: 7px;}
<<c>/style>

</pre>

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:none。

<<c>style>
#img { float: none ;padding: 7px;}
<<c>/style>

</pre>

<pre>
<<c>div class="normal">
<<c>div class="float">
<<c>/div><<c>/div>
<<c>style>
.float{ background-color: red;
        width: 300px;
        height: 100px;
        float: left; }
.normal{ background-color: green;
         width: 400px;
         height: 120px; }
<<c>/style>

</pre>

</div>

</div>
</div>

#MMM { position: fixed;
       top:5px ;z-index:2  }

#DP1 ,#DP2 ,#DP3 ,#DP4 { height: 550px;
                         width: 96%;
                         border: 1px solid black;
                         margin-top:-0px;
                         background-color:linen ;
                         display:none ;
                         padding:3px;
                         font-size: 22px;
                         position: fixed;
                         top:35px ;
word-break: keep-all; word-wrap: break-word;}
//word-break: normal|break-all|keep-all;

</style>

function MmDd(xx){
MMM.children[0].style.backgroundColor = "silver"; 
MMM.children[0].style.opacity = 0.6 ;
MMM.children[1].style.backgroundColor = "silver"; 
MMM.children[1].style.opacity = 0.6 ;
MMM.children[2].style.backgroundColor = "silver"; 
MMM.children[2].style.opacity = 0.6 ;
MMM.children[3].style.backgroundColor = "silver"; 
MMM.children[3].style.opacity = 0.6 ;

DDD.children[0].style.display = "none" ; 
DDD.children[1].style.display = "none" ; 
DDD.children[2].style.display = "none" ; 
DDD.children[3].style.display = "none" ;

MMM.children[xx].style.backgroundColor = "linen"; 
MMM.children[xx].style.opacity = 1 ; 
DDD.children[xx].style.display = "block" ; 
}

DP1.style.display = "block";
Mn1.style.backgroundColor = "linen ";
Mn1.style.opacity = 1;
</script>

<div>
<img id="IMG" style="width:auto;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg?quality=82&strip=all&w=200" />
<pre>
Float參數值： none （元素的預設值）
             left （向左浮動） 
             right（向右浮動）
 
但也可以應用在元素的左右對齊，浮動到父容器的上內緣（top），
並往右right或往左left貼齊父容器的左內緣或右內緣。
</pre><br><br>

<div id="ch">
<div id="DP" >Css img{ float: left }</div>

<label class="container" >float: left
  <input type="radio" checked="checked" name="radio" 
          onclick="Ccc('left')" >
  <span class="checkmark"></span>
</label>
<label class="container" >float: right
  <input type="radio" name="radio" onclick="Ccc('right')" >
  <span class="checkmark"></span>
</label>
<label class="container" >float: none 
  <input type="radio" name="radio" onclick="Ccc('none' )" >
  <span class="checkmark"></span>
</label>
</div>

}
</script>

.container { position: relative;
             padding-left: 25px;
             cursor: pointer;
             font-size: 22px; }
.container input { opacity: 0;
                   cursor: pointer;}
.checkmark { position: absolute;
             top: 0;
             left: 0;
             height: 25px;
             width: 25px;
             background-color: #C0C0C0;
             border-radius: 50%;}
.container:hover input ~ .checkmark {
                background-color: #808080; }
.container input:checked ~ .checkmark {
                background-color: #2196F3; }
.checkmark:after { content: "";
                   position: absolute;
                   display: none }
.container input:checked ~ .checkmark:after {
    display: block; }

.container .checkmark:after { top: 9px;
                              left: 9px;
                              width: 8px;
                              height: 8px;
                              border-radius: 50%;
                              background: white;}

</style>

Edit

用JavaScript連結Google Sheets #html #網頁計設計 #script #style #float left #float right #float none

訂閱：文章 (Atom)

2023年3月15日 星期三

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

2023年3月14日 星期二

取字串中一個字元的編碼

2023年3月13日 星期一

String modification 字串修改

String meta position 字串元位置,

string extraction 字串提取

2023年3月7日 星期二

自製 彈出對話視窗 Self made dialogue window

2023年3月5日 星期日

jquery Get IP https://api.ipdata.co cckedit

2023年3月4日 星期六

script requestFullscreen() 全螢幕

2023年3月3日 星期五

CSS Float 浮動

2023年3月15日星期三

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

2023年3月14日星期二

2023年3月13日星期一

2023年3月7日星期二

自製彈出對話視窗 Self made dialogue window

2023年3月5日星期日

2023年3月4日星期六

2023年3月3日星期五