简体   繁体   English

通过函数的参数增加变量的值

[英]Increase value of variable by parameter of function

I am trying to create a timer in JavaScript but I don't know how to assign value of parameter of function to global variable.我正在尝试在 JavaScript 中创建一个计时器,但我不知道如何将函数参数的值分配给全局变量。 I can do this without using parameters but I want to reduce number of lines in my source code.我可以在不使用参数的情况下执行此操作,但我想减少源代码中的行数。

Here's my code:这是我的代码:

 const elemHoursIncreaseBtn = document.querySelector('.hours__increase__btn'); const elemHoursCount = document.querySelector('.hours__count'); let hours = 0; function increaseCount(unit, number, elem){ if(unit<number){ unit++; if(String(unit).length<2){ elem.textContent = "0" + unit; }else{ elem.textContent = unit; } }else{ unit=0; elem.textContent = "0" + unit; } } elemHoursIncreaseBtn.addEventListener('click', function(){ increaseCount(hours, 23, elemHoursCount); });
 .flex__center{ display: flex; flex-direction: column; justify-content: center; } .timer__container{ display: flex; flex-direction: row; } .increase__pick, .decrease__pick, .hours__count, .minutes__count, .seconds__count{ text-align: center; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Timer</title> <link rel="stylesheet" href="../css/timer.css"> </head> <body> <div class="timer__container"> <div class="hours__picker"> <button class="increase__pick hours__increase__btn">/\\</button> <p class="hours__count">00</p> <button class="decrease__pick hours__decrease__btn">\\/</button> </div> </div> <script src="../js/timer.js"></script> </body> </html>

You can store the actual values in a map, pass in the key for the map that you want to adjust, and reference it.您可以将实际值存储在地图中,传入要调整的地图的键,然后引用它。

 const elemHoursIncreaseBtn = document.querySelector('.hours__increase__btn'); const elemHoursCount = document.querySelector('.hours__count'); const units = { hours: 0, minutes: 0, seconds: 0 }; function increaseCount(unitType, number, elem){ if(units[unitType]<number){ units[unitType]++; if(String(units[unitType]).length<2){ elem.textContent = "0" + units[unitType]; }else{ elem.textContent = unit; } }else{ units[unitType]=0; elem.textContent = "0" + unit; } } elemHoursIncreaseBtn.addEventListener('click', function(){ increaseCount('hours', 23, elemHoursCount); });
 .flex__center{ display: flex; flex-direction: column; justify-content: center; } .timer__container{ display: flex; flex-direction: row; } .increase__pick, .decrease__pick, .hours__count, .minutes__count, .seconds__count{ text-align: center; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Timer</title> <link rel="stylesheet" href="../css/timer.css"> </head> <body> <div class="timer__container"> <div class="hours__picker"> <button class="increase__pick hours__increase__btn">/\\</button> <p class="hours__count">00</p> <button class="decrease__pick hours__decrease__btn">\\/</button> </div> </div> <script src="../js/timer.js"></script> </body> </html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM