어떻게 JS 스 크 립 트 를 이용 하여 웹 페이지 의 전자 동 스 톱 구 매 기능 을 실현 합 니까?

4677 단어 js전자 동순식간에 죽이다앞 다 투어 사다
카운트다운 페이지:

카운트다운 이 끝나 지 않 았 을 때 구 매 버튼 을 클릭 할 수 없습니다.
종료 시 구 매 를 클릭 할 수 있 습 니 다.클릭 후"결제 성공"알림 이 나타 납 니 다.

효과 보이 기 GIF

1.테스트 페이지 만 들 기
우선 저희 가 간단 한 사재 기 페이지 를 만들어 보도 록 하 겠 습 니 다.

<!DOCTYPE html>
<html lang="zh_CN">
<head>
 <meta charset="UTF-8">
 <title>Apple</title>
 <style type="text/css">
  body {
   background-color: black;
  }

  #hOne{
   color: white;
   font-size: 50px;
   font-family: PingFangSC-Regular, sans-serif;
   line-height: 1px;
   width: 100%;
   text-align: center;
  }

  #hTwo{
   color: #d01f2a;
   font-size: 20px;
   text-align: center;
  }

  #hThree{
   color: white;
   font-size: 30px;
   line-height: 30px;
   font-family: PingFangSC-Regular, sans-serif;
   text-align: center;
  }

  #div1 {
   color: white;
   margin: auto;
  }

  #endTime {
   color: #2997ff;
  }

  img {
   width: 228px;
   height: 366px;
   border: 0px;
  }
 </style>
</head>
<body>
<br /><br />
<h1 id="hOne"> WATCH</h1>
<h2 id="hTwo">S E R I E S 6</h2>
<h3 id="hThree">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     ，    。</h3>
<div align="center" id="div1">
 <img src="apple%20watch.jpeg">
 <p id="time">      <span id="endTime"></span>  ！</p>
 <input type="button" id="btn" value="    " disabled="disabled"><br />
</div>
</body>
</html>
보 여 주세요:

2.카운트다운 및 구 매 기능 의 실현
우리 가 사용 하 는 것 은jQuery프레임 워 크 이 고jQuery자바 스 크 립 트 프로 그래 밍 을 크게 간소화 했다.

<script type="text/javascript" src="script/jquery-1.7.2.js"></script> //   jquery
<script type="text/javascript">
  $(function () {
   var timeElement = $("#endTime")[0]; //      dom  
   var i = 10;
   function remainTime() {
    if (i > 0) {
     timeElement.innerHTML = i--;
     setTimeout(function () {
      remainTime();
     }, 1000);
    }
    if (i == 0) {
     $("#time")[0].innerHTML = "      ";
     $("#time").css({color: "#2997ff"});
     $("#btn")[0].disabled = false; //      ，      
    }
   }
   remainTime();

   $("#btn").click(function () { //     
    alert("         ，        ");
   });
  });
</script>
3.JS 스 크 립 트 를 사용 하여 자동 구 매 기능 구현
(1)브 라 우 저 에서 개발 자 도구 열기
​
(2)단추 요소 라벨 이 있 는 위 치 를 찾 습 니 다.

(3)JS 사재 기 스 크 립 트

var btnObj = document.getElementById("btn"); //        id=“btn"
var timer = setInterval(function () {
    if (btnObj.disabled == false) { //         
     btnObj.click();		//  
     clearInterval(timer); //        timer，       ，    
    }
   });
(4)콘 솔 에서 JS 스 크 립 트 실행
세 번 째 코드 를 알 아 보면 콘 솔 에서 실행 할 수 있 습 니 다.
세 번 째 코드 복사 해서 콘 솔 에 붙 여 넣 기

메모:콘 솔Enter이 실 행 됩 니 다.Enter + Shift줄 을 바 꾸 고 스 크 립 트 는 카운트다운 이 끝나 기 전에 주입 해 야 합 니 다.
최종 결과 GIF

학습 을 참고 할 수 있 으 며 도덕 에 어 긋 나 이익 을 도모 하 는 일 을 하지 마 세 요.
JS 스 크 립 트 를 이용 하여 웹 페이지 의 전자 동 스 톱 구 매 기능 을 실현 하 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 js 웹 페이지 의 전자 동 스 톱 구 매 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 지지 해 주세요!
php+layui 데이터 시트 데이터 페이지 렌 더 링 코드 구현
Delphi OpenGL2d 로 그림 을 그 리 는 방법 Bmp

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage