您好如何正确编码此功能

Question

您可能会看到，我对JS非常陌生，一直在尝试了解这些功能，我要实现的是，当我的设备尺寸小于736时，该按钮应该设置动画。所以我正确地使用了按钮，但是在使用特定的屏幕尺寸时却很费劲。有人可以帮忙吗-预先感谢。

HTML

<button class="btn">CLICK ME</button>

css

.btn {
    width: 200px;
    height: 100px;
    text-align: center;
    padding: 40px;
    text-decoration: none;
    font-size: 20px;
    letter-spacing: .6px;
    border-radius: 5px;
    border: none;
    }

Javascript

$(window).resize(function(){
    if ($(window).width() <= 736){  
        // do something


let myBtn = document.querySelector(".btn");

let btnStatus = false;

myBtn.style.background = "#FF7F00";


function bgChange() {
    if (btnStatus == false) 
        {
            myBtn.style.background = "#FF0000"; 
            btnStatus = true;
        }

    else if (btnStatus == true) 
        {
            myBtn.style.background = "#FF7F00";
            btnStatus = false;
        } 
 }

myBtn.onclick = bgChange; 

    }   
}); 

Answer 1

这里是您要执行的操作的实现：

1. [class更改按钮样式，而不是style，
2. 香草JavaScript而不是jQuery。

使用类是一个好主意，因为它将样式保留在CSS中，而不包含在JavaScript代码中。

最好使用香草JavaScript。

这是两个新类：

.btn-small-screen {
  background: #FF7F00;
}

.btn-clicked {
  background: #FF0000;
}

.btn-small-screen类在窗口很小时应用，单击按钮时将切换.btn-clicked。

这是JavaScript代码：

let myBtn = document.querySelector('.btn');
let isSmallWindow = () => window.innerWidth <= 736;

function toggleButtonOnClick () {
  myBtn.classList.toggle('btn-clicked');
}

function setButtonMode () {
  if (isSmallWindow()) {
    myBtn.classList.add('btn-small-screen');
    myBtn.addEventListener('click', toggleButtonOnClick);
  } else  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
  }
}

// setup mode on resize
window.addEventListener('resize', setButtonMode);

// setup mode at load
window.addEventListener('load', setButtonMode);

一个工作示例：

let myBtn = document.querySelector('.btn');
let isSmallWindow = () => window.innerWidth <= 736;

function toggleButtonOnClick () {
  myBtn.classList.toggle('btn-clicked');
}

function setButtonMode () {
  if (isSmallWindow()) {
    myBtn.classList.add('btn-small-screen');
    myBtn.addEventListener('click', toggleButtonOnClick);
  } else  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
  }
}

// setup small mode on resize
window.addEventListener('resize', setButtonMode);

// setup small mode at load
window.addEventListener('load', setButtonMode);

    .btn {
      width: 200px;
      height: 100px;
      text-align: center;
      padding: 40px;
      text-decoration: none;
      font-size: 20px;
      letter-spacing: .6px;
      border-radius: 5px;
      border: none;
    }

    .btn-small-screen {
      background: #FF7F00;
    }

    .btn-clicked {
      background: #FF0000;
    }

<button class="btn">CLICK ME</button>