Jquery / jquery 初階滑鼠事件click/hover

My tip

如果看不到codepen playground，請重新整理頁面

See the Pen 你的 CodePen 標題 by Retsnom on CodePen.

---

index.html

<h3>1.點擊觸發，與紀錄購買狀態 (click)</h3>
<div class="buybtn">點擊購買</div>
<div class="buybtn">點擊購買</div>
<hr/>
<h3>2. $(this)操作觸發動作的按鍵:請選擇物品</h3>
<div class="selbtn" data-cata="tree">選擇物品一</div>
<div class="selbtn" data-cata="flower">選擇物品二</div>
<div class="selbtn" data-cata="sea">選擇物品三</div>
<h4 class="show_info">以選擇物品: 無</h4>
<h4 class="show_cata">以選擇種類</h4>
<hr/>
<h3>3.滑鼠的移入移出</h3>
<div class="buybtn mbtn">使用者移入了嗎?</div>
<hr/>
<h3>4. 時間相關的一些觸發</h3>
<h4>set Timeout(動作,時間) 經過特定時間後執行</h4>
<h4>set Interval(動作,時間) 每經過特定時間後執行</h4>
<div class="selbtn timerbox">五秒後這裡會移動且變紅色</div>
<div class="countbox">經過了XXX秒</div>

style.sass

*
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1px
  
.buybtn,.selbtn
  border: solid 2px
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  
.buyed
  border: solid 2px black
  background-color: #f24
  color: white

script.js

$(".buybtn").click(
  function(){
    $(this).text("已經購買");
    $(this).addClass("buyed");
  }
);
$(".selbtn").click(
  function(){
    $(".show_info").text($(this).text());
    $(".show_cata").text($(this).attr("data-cata"));
    if ($(this).attr("data-cata")=="flower") {
        $(".show_cata").append("，他買的是花!!!!");
    }else{
        $(".show_cata").append("，嗚嗚他買的不是花:(");
    }
  }
);
$(".mbtn").mouseenter(
  function(){
    $(this).css("background-color","#333");
    $(this).css("color","#fff");
    $(this).text("使用者進入了!")
  }
);
$(".mbtn").mouseleave(
  function(){
    $(this).css("background-color","#fff");
    $(this).css("color","#333");
    $(this).text("使用者離開了!")
  }
);
setTimeout(
  function(){
    $(".timerbox").css("background-color","red")
  }           
,5000);

let nowtime=0;
setInterval(
  function(){
    nowtime += 1;
    $(".countbox").text("已經經過"+nowtime+"秒");
  }
,1000);

---

Please note

這個內容是來自吳哲宇老師的動畫互動網頁程式入門 (HTML/CSS/JS) 課程