본문 바로가기

javascript

js12_events

<style>
  .reverse{
    background-color: black;
    color:white;

  }
</style>
<script>
 // on() : 발생된 이벤트를 dom객체에 연결
 $(function() {
      // 1. on(이벤트, function(event) {} )
      $('h1').on('click', function(event) {
        $(this).html(function(index, html) {
          return html + '+';
        })
      })

      // 2. 실습. reverse 클래스를 add or remove 하기
      // mouseenter(addClass), mouseleave(removeClass)
      $('h1').on('mouseenter', function(e) {
        $(this).addClass('reverse');
      })
      $('h1').on('mouseleave', function(e) {
        $(this).removeClass('reverse');
      })

      // $('h1').on({
      //   mouseenter: function(e) { $(this).addClass('reverse'); },
      //   mouseleave: function(e) {$(this).removeClass('reverse'); },
      // })

      // $('h1').hover(
      //   function(e) { $(this).addClass('reverse'); },
      //   function(e) {$(this).removeClass('reverse'); },
      // )
    })

</script>
</head>
<body>
  <h1 class="reverse">header-1</h1>
  <h1>header-2</h1>
  <h1>header-3</h1>
</body>

낙서장.html

<script>
  // mousedown, mouseup
  $(function(){
    let canvas = document.getElementById("canvas");
    let context = canvas.getContext('2d');

    $('canvas').on({
      mousedown: function(e){
        let position = $(this).offset(); // 현재 마우스의 x, y 좌표를 리턴
        let x = e.pageX - position.left;
        let y = e.pageY - position.top;
        // 선 그리기
        context.beginPath();
        context.moveTo(x, y);
      },
       
   
        mouseup : function(e){
        let position = $(this).offset();
        let x = e.pageX - position.left;
        let y = e.pageY - position.top;
        context.lineTo(x, y);
        context.stroke();
      },
    })
  })
</script>
</head>
<body>
  <canvas id="canvas" width="700px" height="400" style="border: 3px solid black
  ;"></canvas>
</body>
<script>
  /*
    keyboard event

    keydown : 키보드를 눌렀을 때
    keyup : 키보드를 땔 때
    keypress : 키보드를 입력했을 떄
  */
 $(function(){
  $('textarea').keydown(function(){
    // 남은 글자 확인
    let len = $(this).val().length;
    let rem = 20 - len;
    console.log(`남은 글자 수 = ${rem}`);
    $('h1').html(rem);

    // 남은 글자수 > 0 black 아닐 경우 red
    if(rem=0){
      $('h1').css('display', 'block');
    } else{
      $('h1').css('display','none');
    }
  })
 })
</script>
</head>
<body>
  <div>
    <p>야생화 : 하얗게 피어난 얼음 꽃 하나가</p>
    <h1>20</h1>
    <textarea name="" id="" cols="30" rows="10"></textarea>
  </div>
</body>
<script>
  $(()=>{
    $('#control a').click(function(){
      let num = Number($(this).text()) - 1;
      $(this)
        .addClass('on')
        .siblings()
        .removeClass('on');
      $('#pic>div')
        .filter(':visible')
        .stop(true)
        .fadeOut(350)
        .end()
        .eq(num)  
        .stop(true)
        .fadeIn(350);
    });
    $('#control a:first')
        .addClass('on')
        .add('#pic > div:first')
        .show()
  })

</script>
<style>
  *{margin:0;
    padding:0;}
  li{
    list-style: none;
  }
  a{
    font-style: "D2coding";
    font-size: 15px;
    color:white;
    text-decoration: none;
  }
  #visual{
    width: 500px;
    margin:0;
    position:relative;
  }
  #pic{
    height: 250px;
    overflow: hidden;
    position:relative;
    box-shadow: 1px 5px 10px 2px #666;
  }
  #pic>div{
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }
  #control{
    position: absolute;
    width: 100%;
    left:0;
    bottom:30px;
    text-align: center;
  }
  #control a{
    display: inline-block;
    width: 26px;
    height: 26px;
    background-color: #000;
    color:black;
    line-height: 26px;
    font-style: 0.8em;
    border-radius: 14px;
    margin:0 2px;
   
  }
  #control a.on{
    background-color: violet;
  }
  img{
    width: 500px;
    height: 350px;
  }
</style>
</head>
<body>
  <div id="visual">
    <div id="pic">
      <div><a href="#"><img src="./imgs/blackpink_01.jpg" alt="1"></a></div>
      <div><a href="#"><img src="./imgs/blackpink_02.jpg" alt="2"></a></div>
      <div><a href="#"><img src="./imgs/blackpink_03.jpg" alt="3"></a></div>
      <div><a href="#"><img src="./imgs/blackpink_04.jpg" alt="4"></a></div>
    </div>

    <div id="control">
      <a href="javascript:;">1</a>
      <a href="javascript:;">2</a>
      <a href="javascript:;">3</a>
      <a href="javascript:;">4</a>
    </div>
  </div>
   
</body>
<style>
  *{margin: 0;padding: 0;}
  body{font-family: "D2Coding";font-size: 12px;color:#000;}
  li{list-style: none;}
  a{text-decoration: none; /* 언더라인 사라짐 */color: #000;}
  h1{text-align: center;padding: 10px 0;}
  #gnb{width: 600px;margin: 0 auto;}
  #gnb:after{content: "";display: block;clear: both;}
  #gnb .m{float: left;width: 120px;text-align: center;position: relative;}
  #gnb .m > a{display: block;height: 40px;line-height: 40px;font-size: 1.4em;}
  #gnb .m.om > a{border-bottom: 4px solid #725f3f;box-sizing: border-box;}
  #gnb .m ul{position: absolute;left:0;top:40px;width: 100%;background: #000;display: none;}
  #gnb .m ul li a {display: block;color: #fff;padding: 10px 0;border-bottom: 1px solid #333;}
  #gnb .m ul li:last-child a{border: none;}
  #gnb .m ul li a:hover,#gnb .m ul li a:active,#gnb .m ul li a:focus {background-color: #fff;color: #000;}
  #visual{background: url('./imgs/blackpink_01.jpg') no-repeat center center;height: 300px;}
  #visual a{display: block;width: 100px;height: 300px;margin: 0 auto;text-indent: -999999%;overflow: hidden;}
</style>
<script>
  $(function(){
    $('#gnb .m')
      .on('mouseover', function(){
        $('ul',this).show();
        $(this).siblings('li').find('ul').hide();
        $(this).addClass('on').siblings('li').removeClass('on');
      }).on('mouseleave', function(){
        $('#gnb ul').hide().add('#gnb .m').removeClass('on');
      })
  })
</script>

</head>
<body>
  <h1><a href="#">BLACKPINK</a></h1>
  <ul id="gnb">
    <li class="m">
      <a href="#">FILE</a>
      <ul>
        <li><a href="#">new</a></li>
        <li><a href="#">open</a></li>
        <li><a href="#">save</a></li>
        <li><a href="#">save as</a></li>
       
      </ul>
    </li>
    <li class="m">
      <a href="#">EDIT</a>
      <ul>
        <li><a href="#">new</a></li>
        <li><a href="#">open</a></li>
        <li><a href="#">save</a></li>
        <li><a href="#">save as</a></li>
      </ul>
    </li>
    <li class="m"><a href="#">SOURCE</a>
      <ul>
        <li><a href="#">new</a></li>
        <li><a href="#">open</a></li>
        <li><a href="#">save</a></li>
        <li><a href="#">save as</a></li>
      </ul>
    </li>
    <li class="m"><a href="#">NAVIGATION</a>
      <ul>
        <li><a href="#">new</a></li>
        <li><a href="#">open</a></li>
        <li><a href="#">save</a></li>
        <li><a href="#">save as</a></li>
      </ul>
    </li>
  </ul>
  <div id="visual"><a href="#">visual</a></div>
</body>

'javascript' 카테고리의 다른 글

js14_jQuery_ui  (0) 2023.06.19
js13_effect  (0) 2023.06.01
js11_Query  (0) 2023.06.01
js10_exception  (0) 2023.06.01
js09_builtin  (0) 2023.06.01