JavaScript 스크레이퍼 효과 구현

2820 단어 js스크레이퍼
스크레이퍼 어떻게 해요?
본 논문 의 사례 는 자 바스 크 립 트 가 스 크 래 치 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
이리 와 봐.내 가 가르쳐 줄 게.
1.먼저 프로 그래 밍 소프트웨어 webStorm 또는 eclipse 를 준비 하 셔 도 됩 니 다.
2.코드 를 작성 할 줄 모 릅 니까?준비 해 드릴 게 요.
3.다음 과 같다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .outer{
      height: 90px;
      width: 300px;
      margin: 0 auto;
      margin-top: 5px;
    }
    .box{
      height: 70px;
      width: 70px;
      background-color: darkgray;

      line-height: 70px;
      text-align: center;
      display: inline-block;
      margin-left: 5px;
    }

  </style>
</head>
<body>
<div class="outer">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="outer">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="outer">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<script>
  var boxs = document.getElementsByClassName("box");
  var item = ["   ","   ","   ","  ","  ","  ","  ","  ","  ",];


  for (var i = 0;i<boxs.length;i++){
    var box = boxs[i];
    box.onclick = function (){
      this.style.backgroundColor="red";
      //this.innerText="   ";//          ,      !
      var number = Math.floor(Math.random()*9);
      this.innerText = item[number];
      this.style.color = "#fff";
      this.style.verticalAlign = "top";
    }
  }
</script>
</body>
</html>
4.이 부분의 코드 블록 문자 내용 은 사용자 정의 할 수 있 고 표시 하고 자 하 는 내용 으로 바 꿀 수 있 습 니 다.

5.최종 웹 페이지 화면 은 다음 과 같다.



이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기