✍ 📁 🙈 🙉 🙊

HTML button

<pre><t>HTML <<?>button> 表單按鈕</t>
  <<?>button>按鈕文字<<?>/button>  <button>按鈕文字</button>

<<?>input type="button" value="按鈕文字" > <input type="button" value="按鈕文字">

button   : 屬性  
  disabled : 不能夠動作的按鈕，僅能看不能按。
  name     : 按鈕的名稱
  type     : button（單純按鈕）、reset（清空表單）、submit（送出表單）
  value    : 按鈕文字、 按鈕的値

onclick="function ()" 
   onclick="{javascript}"
  
<</>input <r>onclick="alert('按我')"</r> type="button" value="按我" /> <input onclick="alert('按動')" type="button" value="按我" />

<</>button <r>onclick="alert('按我')"</r> > 按我 <</>/button> <button onclick="alert('按我')" > 按我 </button>

<</>button <r>onclick="alert('按我')"</r>><</>img src="url" /><</>/button><button onclick="alert('按我')" > <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8h9EfbSR8fPGNN1a7R-_zi3M6NJayt92j02qbZ4TY8MVoDEU_Y-pEiU03B6ya8jqxgh6D6XmVJ7isgHcE3VPORLiaor1u0QUCWkjtUdYDiuO__XQY1Xhu23fwIjTR9VzPKB_eJFxdWxpy/w40-h120-rw/"> </button>

<</>button style="background:url(圖片網址)" /></button><button style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8h9EfbSR8fPGNN1a7R-_zi3M6NJayt92j02qbZ4TY8MVoDEU_Y-pEiU03B6ya8jqxgh6D6XmVJ7isgHcE3VPORLiaor1u0QUCWkjtUdYDiuO__XQY1Xhu23fwIjTR9VzPKB_eJFxdWxpy/w40-h120-rw/); width:40px;height:25px" ></button>

</pre>

<t>CSS button</t>  <br>

<div id="DP1" >
<button id="B1"  onclick="Bcss(DP1)" title="B1">B1</button>
<style id="st1">
#B1{ height:50px ; width:50px ;
     font-size: 30px ;
     cursor: pointer ;
     color: #fff ;
     background-color: #4CAF50 ;
     border-radius: 50px ;
     box-shadow: 4px 4px #999 ;}

#B1:hover  { background-color: #3e8e41 ;}

#B1:active { background-color: #3e8e41 ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}
</style>
</div>

<div id="DP2" >
<button id="B2"  onclick="Bcss(DP2)" title="B2">B2</button>
<style id="st2">
#B2 { height:50px; width:100px ;
      font-size: 30px ;
      cursor: pointer ;
      color: #fff ;
      background-color: #4CAF50;
      border-radius: 50px ;
      box-shadow: 4px 4px #999 ;}

#B2:hover  { background-color: #3e8e41 ;}

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

</style>
</div>

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

#B3:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}
</style>
</div>

<div id="DP4" >
<button id="B4"  onclick="Bcss(DP4)" title="B4">B4</button>
<style id="st4">
#B4 { height:20px ; width:50px ;
      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>
</div>

#B5:hover {background-color: ghostwhite ;}

#B5:active { color: #666;
             box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff ;}
</style>
</div >

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

#B6:active { border: 3px inset #d5d5d5 ;}
</style>
</div >

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

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

#B7{animation: mymove 1s infinite;}

@keyframes mymove { 60%  {color:crimson; }
                    80%  {color:yellow;  }
                    90%  {color:orange;  }
                    100% {color:brown;   }  }
</style>
</div>
</div>

function Bcss(x){
Textcss.value=x.innerHTML ;
}
Bcss(DP1)

</script>

.B1{
height:30px ; 
width:100px ; 
font-size: 18px ; 
cursor: pointer ; 
color: #fff ; 
background: darkgray ; 
border-radius: 50px ; 
box-shadow: 4px 4px #999 ;}

.B1:hover {
background: lightslategray  ;}

.B1:active {
background: gainsboro ; 
box-shadow: 1px 1px #666 ; 
transform: translate(4px,4px) ;}
</style>
</nobn >

.B2:hover {
background: lightslategray  ;}

.B2:active {
background: gainsboro ; 
box-shadow: 1px 1px #666 ; 
transform: translate(4px,4px) ;}
</style>
</nobn >

var TT ="</marquee>" ;
txt2 = txt2 .replace(TT,"<<?>/marquee>" ) ;
txt2 = txt2 .replace(TT,"<<?>/marquee>" ) ;

txt2 = txt2 .replace(/ </," <</>") ;
txt2 = txt2 .replace(/<m/,"<</>m") ;
txt2 = txt2 .replace(/<m/,"<</>m") ;
txt2 = txt2 .replace(/<style>/,"<br><br><</>style><br>") ;
txt2 = txt2 .replace(/;}/g,";}<br><br>") ;
txt2 = txt2 .replace(/; /g , ";<br>") ;
txt2 = txt2 .replace("</style>" , "<<?>/style>") ;

TP.innerHTML  = txt2   ;
}
Bcss(B1)

</script>

Edit

#html #style #script #javascript #button #input button #onclick #height #width #hover #background color #transform

addEventListener keyboard

Target.addEventListener( )
添加事件監聽器

<t1>addEventListener 監視 keydown 的事件 </t1>
<pre style="font-size: 20px ">監視按鍵盤事件
window.addEventListener( "keydown",  function(event) {...} )
window.addEventListener( "keyup   ",  function(event) {...} )
window.addEventListener( "keypress",  function(event) {...} )

Event.preventDefault() : 如果事件可以被取消，就取消事件行為，
                         但不會影響事件的傳遞，事件仍會繼續傳遞。

keydown  ：按下鍵盤時觸發。
keyup     :鬆開鍵盤時觸發。
keypress ：按下有值的鍵時觸發，Ctrl、Alt、Shift、Meta 這樣無值的鍵。

event.key       返回按下的鍵。
event.ctrlKey   是否按下ctrl    鍵 true/false。
event.shiftKey  是否按下shiftKey鍵 true/false。 
event.altKey    是否按下altKey  鍵 true/false。
event.charCode  ASCII character的數字。
event.keyCode   鍵盤中存在的數字。
</pre>

<table border="1"><tbody>
<tr><td> 
</td><td>keydown
</td><td>keyup
</td><td>keypress
</td></tr>

<tr><td>event.key
</td><td id="A1">
</td><td id="A2">
</td><td id="A3">
</td></tr>

<tr><td>event.ctrlKey 
</td><td id="B1">
</td><td id="B2">
</td><td id="B3">
</td></tr>

<tr><td>event.shiftKey
</td><td id="C1">
</td><td id="C2">
</td><td id="C3">
</td></tr>

<tr><td>event.altKey
</td><td id="altKey1">
</td><td id="altKey2">
</td><td id="altKey3">
</td></tr>

<tr><td>event.charCode
</td><td id="D1">
</td><td id="D2">
</td><td id="D3">
</td></tr>

<tr><td>event.keyCode
</td><td id="E1">
</td><td id="E2">
</td><td id="E3">
</td></tr>

</tbody></table>
</td><td id="F1">
</td><td id="F2">
</td><td id="F3">
</td></tr>

window.addEventListener( "keyup",  function(event) {
A2.innerHTML =   event.key;
B2.innerHTML =   event.ctrlKey;
C2.innerHTML =   event.shiftKey;
altKey2.innerHTML =   event.altKey; 
D2.innerHTML =   event.charCode;
E2.innerHTML =   event.keyCode;
 })

window.addEventListener( "keypress",  function(event) {
A3.innerHTML =   event.key;
B3.innerHTML =   event.ctrlKey;
C3.innerHTML =   event.shiftKey;
altKey3.innerHTML =   event.altKey; 
D3.innerHTML =   event.charCode;
E3.innerHTML =   event.keyCode;
  })

//alert(event.key) ;
</script>

<t1>addEventListener mouse 鼠标事件</t1>
<table border="1" id="Mdiv"><tbody>
<tr>
<td id="msout" width="100px">mouseover</td>
<td width="200px"><nobr id="Move"></nobr> </td>
<td width="200px">  </td>

<tr>
<td id="msout" width="100px">mouseout</td>
<td><nobr id="Mout">mouse out</nobr></td>
<td width="200px">  </td>

<tr>
<td id="msout" width="100px">mouseenter</td>
<td width="200px"><nobr id="Mter"></nobr> </td>
<td width="200px">  </td>

<tr>
<td id="msout" width="100px">mouseleave</td>
<td><nobr id="Mave">mouse out</nobr></td>
<td width="200px">  </td>

<tr>
<td id="msout" width="100px">mouseup</td>
<td><nobr id="Mup">0</nobr></td>
<td width="200px">  </td>

<tr>
<td    width="100px" >mousemove</td>
<td>e.pageX=<nobr id="mXXX" >0</nobr></td>
<td>e.pageY=<nobr id="mYYY" >0</nobr></td>

<tr>
<td    width="100px" >mousedown</td>
<td>e.detail=<nobr id="mdet" >0</nobr></td>
<td>e.button=<nobr id="mbut" >0</nobr></td>

<tr>
<td    width="100px" >mousewheel</td>
<td>e.deltaY=<nobr id="delY" >0</nobr></td>
<td>e.deltaX=<nobr id="delX" >0</nobr></td>

</tr></tbody></table>
<pre> Target.addEventListener(event ,function(e){} ,false)
    event. MouseEvent 監聽事件 : 
    mouseenter 移動進入 <B>父元素</B> 的時候會觸發。 
    mouseleave 移動離開 <B>父元素</B> 的時候會觸發。
    mouseover  移動進入到元素上時就會觸發。
    mouseout   移動離開到元素上時就會觸發。
    mouseup    放開滑鼠按鍵時發生。
    mousedown  按一下滑鼠按鍵時發生, 屬性返回,
                    e.detail 0:無按鍵  1:按鍵
                    e.button 0:左鍵    1:中間鍵   2:加鍵
    mousemove  鼠標移動位置, 屬性返回,
                    e.pageX  與文檔左側邊緣的距離（單位像素）
                    e.pageY  與文檔上側邊緣的距離（單位像素）
    mousewheel 滾輪事件。
</pre>

window.addEventListener('mouseout',function(e){
   Mout.innerHTML ="mouse out"
   Move.innerHTML ="" });

Mdiv.addEventListener('mouseenter',function(e){
   Mter.innerHTML ="mouse over";
   Mave.innerHTML =""});

Mdiv.addEventListener('mouseleave',function(e){
   Mave.innerHTML ="mouse out"
   Mter.innerHTML ="" });

window.addEventListener('mouseup',function(e){
   Mup.innerHTML ="1"
   });

window.addEventListener('mousemove', function (e) {
  mYYY.innerHTML=e.pageY ; mXXX.innerHTML =e.pageX;FMxy() });

window.addEventListener('mousedown', function (e) {
  mdet.innerHTML=e.detail ;
  mbut.innerHTML=e.button ;
 Mup.innerHTML ="0"
   });

window.addEventListener('mouseup', function (e) {
  mdet.innerHTML=0 ;
  mbut.innerHTML=0 ;
  e.preventDefault() },false);

window.addEventListener('contextmenu', function (e) { 
  e.preventDefault(); 
}, false);

window.addEventListener('mousewheel', function (e) {
  delY.innerHTML=e.deltaY;delX.innerHTML=e.deltaX;  }, false);

</script>

<t1>addEventListener click 點擊事件</t1>

<div id="mainID" style="color:black">
<pre><o><<o>div id="<r>mainID</r>">
      <nobr>click me 1</nobr >
           <nobr>click me 2</nobr >
                <nobr>click me 3</nobr >
           <nobr>click me 4</nobr >
       <nobr>click me 5</nobr >
<o><<o>/div></pre>
</div>

<pre>
<r>mainID</r>.addEventListener('click', function(e){
   e.target.style.color=rgb ; })

e.target : mainID 內的物件。
</pre>

mainID.addEventListener('click', function(e){
   // rgb 颜色随机
   var r = Math.floor(Math.random()*256);
   var g = Math.floor(Math.random()*256);
   var b = Math.floor(Math.random()*256);
   var rgb = 'rgb('+r+','+g+','+b+')';
       
e.target.style.color=rgb ; 
 e.preventDefault();

})
</script>

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

<pre><t1>addEventListener click move 點擊 移動 事件</t1>
window.addEventListener('mouseup', function(e){ Dw=0 })

DIV.addEventListener('mousedown',function(e){ Dw=1 })

window.addEventListener('mousemove', function(e){
    if(Dw==1 ) { DIV.style.top =e.pageY-30+"px" ;
                 DIV.style.left=e.pageX-30+"px" ;}  })
 
</pre>

<div id="DIV">click me move</div>

DIV.addEventListener('mousedown', function(e) { Dw=1 })

window.addEventListener('mousemove', function(e){
if(Dw==1 ){
DIV.style.top =e.pageY-30+"px" ;
DIV.style.left=e.pageX-30+"px" ;}
})

DIV.addEventListener('touchstart', function(e){
var touchobj = e.changedTouches[0] ;
var XXX= parseInt(touchobj.clientX) ;
var YYY= parseInt(touchobj.clientY) ;

DIV.style.top =YYY-30+"px" ;
DIV.style.left=XXX-30+"px" ;
})

window.addEventListener('mousedown', function(e){
e.preventDefault()  })

window.addEventListener('mouseout', function(e){ Dw=0  })

</script>

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

<pre><b>  addEventListener() to class</b>
<<c>input <r>class="round"</r> type="text" value="111">
<<c>input <r>class="round"</r> type="text" value="222">
<<c>input <r>class="round"</r> type="text" value="333">
<<c>input <r>class="round"</r> type="text" value="444">

<<c>script>
var Class= document.querySelectorAll(<r>".round"</r>) ;

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() ;
  }) })
  
<<c>/script>
</pre>

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

<pre><b>  addEventListener() to Tag</b> 
<<c><r>input</r> type="button" value="1"> 
<<c><r>input</r> type="button" value="2"> 
<<c><r>input</r> type="button" value="3"> 
<<c><r>input</r> type="button" value="4"> 
<<c>div id="dp"><<c>/div>

<<c>script>
var Tag= document.querySelectorAll(<r>"input"</r>) ;

Tag.forEach((round) => {
  round.addEventListener("click", function() {
dp.innerHTML = round.value ;
  }) })
<<c>/script>
</pre>

Tag.forEach((round) => {
  round.addEventListener("click", function() {
dp.innerHTML = round.value ;
  }) })

</script>

Edit

Select option Sort

CSS overflow 控制捲軸

<b>Javascript to sort contents of select element</b><br><br>
<select id="Sel" >
    <option value="158.12 HK$">3 people</option>
    <option value="276.36 HK$">2 people</option>
    <option value="110.36 HK$">8 people</option>
    <option value="879.69 HK$">1 people</option>
    <option value="256.36 HK$">4 people</option>
</select>

select sort <br>
<input type="button" value="sort by HK$"  onclick="sortMe('value')">
<input type="button" value="sort by people" onclick="sortMe('text')">

<pre><ol><li> <<c>script> 
<li> function sortMe(x){
<li> var tmpAry = new Array();
<li>    for (var i=0; i<5 ;i++) {
<li>        tmpAry[i] = new Array();
<li>           if(x=='text' ){ tmpAry[i][0] = Sel[i].text;
<li>                        tmpAry[i][1] = Sel[i].value; }
<li>            if(x=='value' ){ tmpAry[i][0] = Sel[i].value;
<li>                        tmpAry[i][1] = Sel[i].text; }
<li>      }

<li> tmpAry = tmpAry.sort() ;
<li>   for (var ii=0; ii<5 ;ii++) {
<li>         if(x=='text' ){ Sel[ii].text  = tmpAry[ii][0] ;
<li>                         Sel[ii].value = tmpAry[ii][1] ;}
<li>         if(x=='value'){ Sel[ii].value = tmpAry[ii][0] ;
<li>                         Sel[ii].text  = tmpAry[ii][1] ;}
<li>        }
<li> }
<li> <<c>/script>

</pre>

Tt += '</pre>' ;
DP.innerHTML =Tt ;
}
DPhtml() ;
</script>

tmpAry = tmpAry.sort() ;
   for (var ii=0; ii<5 ;ii++) {
         if(x=='text' ){ Sel[ii].text  = tmpAry[ii][0] ;
                         Sel[ii].value = tmpAry[ii][1] ;}
         if(x=='value'){ Sel[ii].value = tmpAry[ii][0] ;
                         Sel[ii].text  = tmpAry[ii][1] ;}
 DPhtml() ; }
}
</script>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

Edit

#html #網頁格式 #script #style #div

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

HTML button

addEventListener keyboard

Target.addEventListener( )
添加事件監聽器

Select option Sort

CSS overflow 控制捲軸

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

HTML button

addEventListener keyboard

Target.addEventListener( ) 添加事件監聽器

Select option Sort

CSS overflow 控制捲軸

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

Target.addEventListener( )
添加事件監聽器