Vanilla JS 闹钟：范围和增量问题

【问题标题】：Vanilla JS Alarm Clock: Scope and Increment QuestionsVanilla JS 闹钟：范围和增量问题
【发布时间】：2021-02-10 19:05:33
【问题描述】：

我的闹钟有 2 个问题。

1）当小时增加或减少到超过12时，我想从上午切换到下午。问题是我调用 today.getHours(); 的地方，它位于不同的函数中。我的增量按钮功能（增加/减少）在该功能之外，当移动到持有 today.getHours() 的时钟功能内时，它不起作用，所以我不能说当小时数大于 12 时，切换到 PM。再次调用 getHours 似乎是多余的。有人对如何在 vanilla JS 中解决此问题有任何建议吗？有没有更好的方法？

2) 单击时，分钟减少增量按钮给出负值。我知道这可能有一个简单的解决方案，但我想我已经盯着它看太久了。

//Select Elements
const alarm_time = document.getElementById('alarmTime');
const set_alarm = document.getElementById('setAlarm');
const alarm_alert = document.getElementById('alarmAlert');
const hr_increase= document.getElementById('hourIncrease');
const hr_decrease = document.getElementById('hourDecrease');
const min_increase= document.getElementById('minuteIncrease');
const min_decrease = document.getElementById('minuteDecrease');
const increment = document.querySelectorAll('.increment');

//Variables
let hr;
let min;
let TOD;
let alarmHr=0;
let alarmMin=0;
let alarmTOD="AM";
let alarmActive=false;

//Alarm Sound
let sound = new Audio("https://res.cloudinary.com/saveallthethings/video/upload/v1565033348/Free%20Music%20Downloads/bensound-hey_vunrwo.mp3");

//Alarm Function
if (alarmHr== hr && parseInt(alarmMin) == min && alarmTOD == TOD){
    sound.play();
    card.classList.add("blinkingAlarm");
}

//Get Time
function clock(){
  //Display Greeting, Time and Date
  let today = new Date();
  let year = today.getFullYear();
  let date = today.getDate();
  let hours = today.getHours(); 
  let minutes = today.getMinutes();

  //Specify Am or PM, and populate greeting
  if (hours >= 17){
    timeofDay = "PM";
  } else if (hours >= 12 && hours < 17){
    timeofDay = "PM";
  } else {
    timeofDay = " AM";
  }

  //Convert Hours to 12hr Format
  if (hours>12){
    hours = hours - 12;
  }
  else if (hours===0){
    hours = 12; 
  }
  
  //For single digit minutes, add a zero 
  if (minutes<10){
    minutes = "0" + minutes;
  }
  else {
    minutes = minutes;
  }
  
  if (alarm_time.classList.contains("blinkingText")){
    alarm_time.innerHTML = (alarmHr + ":" + alarmMin + alarmTOD);
    }else{alarm_time.innerHTML = (hours + ":" + minutes + timeofDay);}

}//Closing Brackets for clock fnc

//Set Interval to Update Time
setInterval('clock()', 500);

//Count Clicks on Set Alarm Btn
let clickCounter = 0;
set_alarm.onclick = function() {
  clickCounter += 1;
  //Second Click sets the alarm, says "Alarm set to"
    if((clickCounter % 2) === 0){
    alarm_time.classList.remove("blinkingText");
    alarmActive = true;  
    if (alarmHr == 0 && alarmMin == 0){
      alarm_alert.innerHTML = "no alarm set";
    }else{
      alarm_alert.innerHTML = "alarm set for  "+  alarmHr +":" + alarmMin + alarmTOD;
    }
    //Loop that disables and hides buttons
    for (var i = 0; i < increment.length; i++) {
      hourIncrease.classList.remove("visibility");
      hourDecrease.classList.remove("visibility");
      minuteIncrease.classList.remove("visibility");
      minuteDecrease.classList.remove("visibility");
      document.getElementById("hourIncrease").disabled = true;
      document.getElementById("hourDecrease").disabled = true;
      document.getElementById("minuteIncrease").disabled = true;
      document.getElementById("minuteDecrease").disabled = true;
        }                    
    } else {
        alarm_time.classList.add("blinkingText");
        //Loop Over the Node List for increment
        for (var i = 0; i < increment.length; i++) {
          hourIncrease.classList.add("visibility");
          hourDecrease.classList.add("visibility");
          minuteIncrease.classList.add("visibility");
          minuteDecrease.classList.add("visibility");
          document.getElementById("hourIncrease").disabled = false;
          document.getElementById("hourDecrease").disabled = false;
          document.getElementById("minuteIncrease").disabled = false;
          document.getElementById("minuteDecrease").disabled = false;
        }                        
    }
  };

//Turn off alarm
dismiss.onclick = function() {
  if(alarmActive = "true"){
    alarmActive ="false"
    alarmHr = 0;
    alarmMin = 0;
    alarmTOD = "AM";   
    alarm_alert.innerHTML = "no alarm set";
    sound.pause();
    alarm_time.classList.remove("blinkingText");
    //Loop that disables and hides buttons
    for (var i = 0; i < increment.length; i++) {
      hourIncrease.classList.remove("visibility");
      hourDecrease.classList.remove("visibility");
      minuteIncrease.classList.remove("visibility");
      minuteDecrease.classList.remove("visibility");
      document.getElementById("hourIncrease").disabled = true;
      document.getElementById("hourDecrease").disabled = true;
      document.getElementById("minuteIncrease").disabled = true;
      document.getElementById("minuteDecrease").disabled = true;
        }                        
  }
};

hr_increase.onclick = function() { 
  alarmHr++;
  if (alarmHr > 12){
    alarmHr= alarmHr - 12;
  }
}

hr_decrease.onclick = function() { 
  alarmHr--;
  if (alarmHr <= 0){
    alarmHr= alarmHr + 12;
  }
  console.log(alarmHr);}; 

min_increase.onclick = function() { 
  alarmMin++;
  if (alarmMin < 10){
      alarmMin= "0" + alarmMin;
    }
  if(alarmMin > 59){
    alarmMin= alarmMin-60 ;
  }
  if(alarmMin == 0){
    alarmMin= "00";
  }

}

min_decrease.onclick = function() { 
  alarmMin--;
  if (alarmMin < 10){
    alarmMin= "0" + minutes;
  }
  if (alarmMin < 0){
    alarmMin= alarmMin % 60;
  }
  }; 
@import url('https://fonts.googleapis.com/css?family=Montserrat:900|Open+Sans:800|Source+Sans+Pro:300');


html, body {
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
  font-size:15px;
}

.card_container{
  height:100vh;
}
.center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.card{
  border-radius:15px;
  background-color: rgba(254, 253, 253,0.8);
  box-shadow: 0px 0px 51px -3px rgba(0,0,0,0.13);
  max-width:22rem;
  border:solid rgba(254, 253, 253,0.8) 0.1px;
}

.blinkingAlarm{
  animation:blinkingAlarm 1.2s ease-in-out infinite;
}

@keyframes blinkingAlarm{
      50%{
           border:solid white 7px;}
 }

.card_inner{
  border-radius:15px;
  margin:.75rem;
}


.card_currentContainer{
  border-radius:15px;
  margin-bottom:1rem;
}

.card_alarmContainer {
  color:#7E7E7E;
  background:#fff;
  text-align:center;
}


.card_alarmContainer{
   flex-direction:column;
   border-radius:15px;
}

.alarmOptions{
  display:flex;
  color:#7E7E7E;
  padding-top:.5rem;
  padding-bottom:.5rem;
}

.blinkingText{
  animation:blinkingText 1.6s linear infinite;
}

@keyframes blinkingText{
      50%{opacity:0.3;}
}

.setBox{
  flex-direction:column;
  padding-left:.5rem;
  padding-right:.5rem;
  padding-top:0;
}

.button {
  display:block;
  border-style:none;
  margin: 0px 0px;
  padding:0px;
}

.increment{
  font-size:1rem;
  border:none;
  background: rgba(254, 253, 253,0.8);
  color:#7E7E7E;
  font-family: 'Source Sans Pro', sans-serif;
  cursor: pointer;
  visibility:hidden;
}

.increment:hover{
  cursor:pointer;
  color:black;
  border-style:none;
}

.visibility{
  visibility:visible;
}
.alarmBox{
  padding-bottom:.2rem;
}

.alarmTime{

  font-size:2rem;
  line-height:1rem;
  padding-top:.7rem;
}

.alarmAlert{
  font-size:.8rem;
  text-transform:uppercase;
  padding-top:.5rem;
}

.card_buttonsContainer{
  width:100%;
  margin:1rem 0rem;
  justify-content:space-between;
  flex-wrap:wrap;
}

.btn{
  height:3rem;
  width:8rem;
}

#setAlarm{
  transition: .2s;
  color:#fff; 
  cursor:pointer; 
  border-radius:15px;
    background: linear-gradient(to left, #ff7e5f , #feb47b); 
  padding-right:.5rem;
  padding-left:.5rem;
  font-size:1.5rem; 
  margin-right:0.3rem;
}

#setAlarm:hover{
  border-radius:20px;
  opacity: .8;
}

#dismiss{
  transition: .2s;
  font-size:1.5rem; 
  color:#fff; 
  border-radius:15px; 
  cursor:pointer; 
  background: linear-gradient(to left, #64B1F2 , #00DBF3); 
  padding-right:.5rem;
  padding-left:.5rem;
  margin-left:0.3rem;
}

#dismiss:hover{
  border-radius:20px;
  opacity: .8;
}

/***Media Queries****/
@media only screen and (max-width:332px) {
  .current_greetings{
    text-align:center;
  }
  .card_buttonsContainer{
     justify-content:center;
  }
  .btn{
    margin-bottom:.5rem;
  }
}  
<div class="card_container center">  
  <div class ="card">
    <div class="card_inner">
      <div class="card_alarmContainer center"> 
        <div class="alarmOptions ">
          <div class="setBox center">
            <button class="increment center" id="hourIncrease" disabled>&#x2b;</button>
            <button class="increment center" id="hourDecrease" disabled>&#x2212;</button>
          </div>
          <div class="alarmBox">
          <div class="alarmTime center" id="alarmTime"></div>
          <div class="alarmAlert" id="alarmAlert">no alarm set</div>
            </div>
          <div class="setBox center">
            <button class="increment center" id="minuteIncrease" disabled>&#x2b;</button>
            <button class="increment center" id="minuteDecrease" disabled>&#x2212;</button>
          </div>
          
        </div>
      </div>
      <div class="card_buttonsContainer center">
        <div class ="buttonBox center">
          <div class="btn center" id="setAlarm">Set Alarm</div>
        </div>
        <div class ="buttonBox center">
          <div class="btn center" id="dismiss">Dismiss</div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

  • 您好，欢迎来到 Stack Overflow！将来，请在您的问题中包含与您的问题相关的所有相关代码，而不是链接到第三方站点上您的代码的可执行版本，因为这些链接可能会随着时间的推移而失效。您可以在编写或编辑问题时单击“code sn-p”按钮&lt;&gt;，在您的问题中创建可执行代码 sn-p。

标签： javascript scope


【解决方案1】：

在您的代码中，您需要在每分钟更改时增加和减少小时。我还建议将小时增加和小时减少提取到函数中（我有一个工作解决方案的示例代码），以便您可以在分钟增加和减少函数中使用它们来增加或减少时间。我还建议使用一个函数来改变一天中的闹钟时间，这样你就可以在你的小时增加和小时减少功能中使用它。您的闹钟时间初始值为 0，但没有 0 小时。我建议从 12 点开始作为闹钟时间。我在示例代码中更新了所有这些

您可以更新 TOD 的方式是增加小时检查新小时是否为 12，然后切换 TOD。在减少中，您检查新时间是否为 11，然后切换 TOD。查看我的示例工作代码！

//Select Elements
const alarm_time = document.getElementById('alarmTime');
const set_alarm = document.getElementById('setAlarm');
const alarm_alert = document.getElementById('alarmAlert');
const hr_increase= document.getElementById('hourIncrease');
const hr_decrease = document.getElementById('hourDecrease');
const min_increase= document.getElementById('minuteIncrease');
const min_decrease = document.getElementById('minuteDecrease');
const increment = document.querySelectorAll('.increment');

//Variables
let hr;
let min;
let TOD;
let alarmHr=12;
let alarmMin=0;
let alarmTOD="AM";
let alarmActive=false;

//Alarm Sound
let sound = new Audio("https://res.cloudinary.com/saveallthethings/video/upload/v1565033348/Free%20Music%20Downloads/bensound-hey_vunrwo.mp3");

//Alarm Function
if (alarmHr== hr && parseInt(alarmMin) == min && alarmTOD == TOD){
    sound.play();
    card.classList.add("blinkingAlarm");
}

function toggleAlarmTOD() {
  if(alarmTOD === "AM") {
     alarmTOD = "PM"
  } else {
     alarmTOD = "AM"
  }
}

function increaseHr() {
  alarmHr++;
  if(alarmHr === 12) {
    toggleAlarmTOD();
  } else if (alarmHr > 12){
    alarmHr = alarmHr - 12;
  }
}

function decreaseHr() {
  alarmHr--;
  if(alarmHr <= 0) {
    alarmHr = alarmHr + 12;
  } else if(alarmHr === 11) {
    toggleAlarmTOD();
  }
}

//Get Time
function clock(){
  //Display Greeting, Time and Date
  let today = new Date();
  let year = today.getFullYear();
  let date = today.getDate();
  let hours = today.getHours(); 
  let minutes = today.getMinutes();

  //Specify Am or PM, and populate greeting
  if(hours >= 12){
    timeofDay = "PM";
  } else {
    timeofDay = " AM";
  }

  //Convert Hours to 12hr Format
  if (hours>12){
    hours = hours - 12;
  }
  else if (hours===0){
    hours = 12; 
  }
  
  //For single digit minutes, add a zero 
  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  else {
    minutes = minutes;
  }
  
  if (alarm_time.classList.contains("blinkingText")){
    alarm_time.innerHTML = (alarmHr + ":" + (alarmMin < 10 ? "0" + alarmMin : alarmMin) + alarmTOD);
    }else{alarm_time.innerHTML = (hours + ":" + minutes + timeofDay);}

}//Closing Brackets for clock fnc

//Set Interval to Update Time
setInterval('clock()', 500);

//Count Clicks on Set Alarm Btn
let clickCounter = 0;
set_alarm.onclick = function() {
  clickCounter++;
  //Second Click sets the alarm, says "Alarm set to"
    if((clickCounter % 2) === 0){
    alarm_time.classList.remove("blinkingText");
    alarmActive = true;  
    if (alarmHr == 0 && alarmMin == 0){
      alarm_alert.innerHTML = "no alarm set";
    }else{
      alarm_alert.innerHTML = "alarm set for  " + alarmHr + ":" + (alarmMin < 10 ? "0" + alarmMin : alarmMin) + alarmTOD;
    }
    //Loop that disables and hides buttons
    for (var i = 0; i < increment.length; i++) {
      hourIncrease.classList.remove("visibility");
      hourDecrease.classList.remove("visibility");
      minuteIncrease.classList.remove("visibility");
      minuteDecrease.classList.remove("visibility");
      document.getElementById("hourIncrease").disabled = true;
      document.getElementById("hourDecrease").disabled = true;
      document.getElementById("minuteIncrease").disabled = true;
      document.getElementById("minuteDecrease").disabled = true;
        }                    
    } else {
        alarm_time.classList.add("blinkingText");
        //Loop Over the Node List for increment
        for (var i = 0; i < increment.length; i++) {
          hourIncrease.classList.add("visibility");
          hourDecrease.classList.add("visibility");
          minuteIncrease.classList.add("visibility");
          minuteDecrease.classList.add("visibility");
          document.getElementById("hourIncrease").disabled = false;
          document.getElementById("hourDecrease").disabled = false;
          document.getElementById("minuteIncrease").disabled = false;
          document.getElementById("minuteDecrease").disabled = false;
        }                        
    }
  };

//Turn off alarm
dismiss.onclick = function() {
  if(alarmActive = "true") {
    alarmActive ="false"
    alarmHr = 12;
    alarmMin = 0;
    alarmTOD = "AM";   
    alarm_alert.innerHTML = "no alarm set";
    sound.pause();
    alarm_time.classList.remove("blinkingText");
    //Loop that disables and hides buttons
    for (var i = 0; i < increment.length; i++) {
      hourIncrease.classList.remove("visibility");
      hourDecrease.classList.remove("visibility");
      minuteIncrease.classList.remove("visibility");
      minuteDecrease.classList.remove("visibility");
      document.getElementById("hourIncrease").disabled = true;
      document.getElementById("hourDecrease").disabled = true;
      document.getElementById("minuteIncrease").disabled = true;
      document.getElementById("minuteDecrease").disabled = true;
        }                        
  }
};

hr_increase.onclick = function() { 
  increaseHr();
}

hr_decrease.onclick = function() { 
  decreaseHr();
}; 

min_increase.onclick = function() { 
  alarmMin++;
  if(alarmMin > 59){
    alarmMin = 0;
    increaseHr();
  }
}

min_decrease.onclick = function() { 
  alarmMin--;
  if (alarmMin < 0){
    alarmMin = 59;
    decreaseHr();
  }
}; 
@import url('https://fonts.googleapis.com/css?family=Montserrat:900|Open+Sans:800|Source+Sans+Pro:300');


html, body {
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
  font-size:15px;
}

.card_container{
  height:100vh;
}
.center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.card{
  border-radius:15px;
  background-color: rgba(254, 253, 253,0.8);
  box-shadow: 0px 0px 51px -3px rgba(0,0,0,0.13);
  max-width:22rem;
  border:solid rgba(254, 253, 253,0.8) 0.1px;
}

.blinkingAlarm{
  animation:blinkingAlarm 1.2s ease-in-out infinite;
}

@keyframes blinkingAlarm{
      50%{
           border:solid white 7px;}
 }

.card_inner{
  border-radius:15px;
  margin:.75rem;
}


.card_currentContainer{
  border-radius:15px;
  margin-bottom:1rem;
}

.card_alarmContainer {
  color:#7E7E7E;
  background:#fff;
  text-align:center;
}


.card_alarmContainer{
   flex-direction:column;
   border-radius:15px;
}

.alarmOptions{
  display:flex;
  color:#7E7E7E;
  padding-top:.5rem;
  padding-bottom:.5rem;
}

.blinkingText{
  animation:blinkingText 1.6s linear infinite;
}

@keyframes blinkingText{
      50%{opacity:0.3;}
}

.setBox{
  flex-direction:column;
  padding-left:.5rem;
  padding-right:.5rem;
  padding-top:0;
}

.button {
  display:block;
  border-style:none;
  margin: 0px 0px;
  padding:0px;
}

.increment{
  font-size:1rem;
  border:none;
  background: rgba(254, 253, 253,0.8);
  color:#7E7E7E;
  font-family: 'Source Sans Pro', sans-serif;
  cursor: pointer;
  visibility:hidden;
}

.increment:hover{
  cursor:pointer;
  color:black;
  border-style:none;
}

.visibility{
  visibility:visible;
}
.alarmBox{
  padding-bottom:.2rem;
}

.alarmTime{

  font-size:2rem;
  line-height:1rem;
  padding-top:.7rem;
}

.alarmAlert{
  font-size:.8rem;
  text-transform:uppercase;
  padding-top:.5rem;
}

.card_buttonsContainer{
  width:100%;
  margin:1rem 0rem;
  justify-content:space-between;
  flex-wrap:wrap;
}

.btn{
  height:3rem;
  width:8rem;
}

#setAlarm{
  transition: .2s;
  color:#fff; 
  cursor:pointer; 
  border-radius:15px;
    background: linear-gradient(to left, #ff7e5f , #feb47b); 
  padding-right:.5rem;
  padding-left:.5rem;
  font-size:1.5rem; 
  margin-right:0.3rem;
}

#setAlarm:hover{
  border-radius:20px;
  opacity: .8;
}

#dismiss{
  transition: .2s;
  font-size:1.5rem; 
  color:#fff; 
  border-radius:15px; 
  cursor:pointer; 
  background: linear-gradient(to left, #64B1F2 , #00DBF3); 
  padding-right:.5rem;
  padding-left:.5rem;
  margin-left:0.3rem;
}

#dismiss:hover{
  border-radius:20px;
  opacity: .8;
}

/***Media Queries****/
@media only screen and (max-width:332px) {
  .current_greetings{
    text-align:center;
  }
  .card_buttonsContainer{
     justify-content:center;
  }
  .btn{
    margin-bottom:.5rem;
  }
}  
<div class="card_container center">  
  <div class ="card">
    <div class="card_inner">
      <div class="card_alarmContainer center"> 
        <div class="alarmOptions ">
          <div class="setBox center">
            <button class="increment center" id="hourIncrease" disabled>&#x2b;</button>
            <button class="increment center" id="hourDecrease" disabled>&#x2212;</button>
          </div>
          <div class="alarmBox">
          <div class="alarmTime center" id="alarmTime"></div>
          <div class="alarmAlert" id="alarmAlert">no alarm set</div>
            </div>
          <div class="setBox center">
            <button class="increment center" id="minuteIncrease" disabled>&#x2b;</button>
            <button class="increment center" id="minuteDecrease" disabled>&#x2212;</button>
          </div>
          
        </div>
      </div>
      <div class="card_buttonsContainer center">
        <div class ="buttonBox center">
          <div class="btn center" id="setAlarm">Set Alarm</div>
        </div>
        <div class ="buttonBox center">
          <div class="btn center" id="dismiss">Dismiss</div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode