✍ 📁 🙈 🙉 🙊

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

2022年5月2日星期一

blockquote

<blockquote> <cfieldset> <legend>

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

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

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

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

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

Edit

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

訂閱：文章 (Atom)

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

2022年5月2日 星期一

<blockquote> <cfieldset> <legend>

2023年3月14日星期二

2023年3月13日星期一

2023年3月7日星期二

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

2023年3月5日星期日

2023年3月4日星期六

2023年3月3日星期五

2022年5月2日星期一