js实现的电子邮件订阅表单提示特效代码

使用方法

const subscribeBtn = document.getElementById('subscribe');
const sendingBtn = document.getElementById('sending');
const subscribeWrapper = document.getElementById('wrapper');
const btnSend = document.getElementById('send');
const form = document.getElementById('form');

const onClickSubscribeBtn = event => {
  event.stopPropagation();
  subscribeBtn.classList.add('active');
  form.classList.add('active');
};

const onClickDocument = event => {
  const clickTarget = event.target.parentNode;

  let botonContainClass = subscribeBtn.classList.contains('active');

  if(botonContainClass && clickTarget != subscribeWrapper) {
    subscribeBtn.classList.remove('active');
    form.classList.remove('active');
    form.reset()
    sendingBtn.classList.remove('active');
  }
};

const onClickSend = event => {
  event.preventDefault();
  event.stopPropagation();
  sendingBtn.classList.add('active');
  form.classList.remove('active');
}

const init = () => {
  subscribeBtn.addEventListener('click', onClickSubscribeBtn, false);
  btnSend.addEventListener('click', onClickSend, false);
  document.addEventListener('click', onClickDocument, false);
};

document.addEventListener('DOMContentLoaded', init);