Как сделать ограничитель поля символов?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Как сделать ограничитель поля символов?
Есть код калькулятора. Там имеются различные баги. Один из них - это то, что символы вылезают на границу самого калькулятора. Как это можно исправить?

Как сделать ограничитель поля символов?

HTML

<details> 				<summary>Канкулятор</summary> 					<div class="calc"> 						<div class="calc-screen"> 							<p>0</p> 						</div> 						<div class="buttons"> 							<div class="btn_calc ac bg-grey">AC</div> 							<div class="btn_calc plus-minus bg-grey">+/-</div> 							<div class="btn_calc percent bg-grey">%</div> 							<div class="btn_calc division bg-orange">/</div>  							<div class="btn_calc seven">7</div> 							<div class="btn_calc eight">8</div> 							<div class="btn_calc nine">9</div> 							<div class="btn_calc myltiply bg-orange">X</div>  							<div class="btn_calc four">4</div> 							<div class="btn_calc five">5</div> 							<div class="btn_calc six">6</div> 							<div class="btn_calc minus bg-orange">-</div>  							<div class="btn_calc one">1</div> 							<div class="btn_calc two">2</div> 							<div class="btn_calc three">3</div> 							<div class="btn_calc plus bg-orange">+</div>  							<div class="btn_calc zero">0</div> 							<div class="btn_calc dot">.</div> 							<div class="btn_calc equal bg-orange">=</div> 						</div> 					</div> 					</details>

<details> <summary>Канкулятор</summary> <div class="calc"> <div class="calc-screen"> <p>0</p> </div> <div class="buttons"> <div class="btn_calc ac bg-grey">AC</div> <div class="btn_calc plus-minus bg-grey">+/-</div> <div class="btn_calc percent bg-grey">%</div> <div class="btn_calc division bg-orange">/</div> <div class="btn_calc seven">7</div> <div class="btn_calc eight">8</div> <div class="btn_calc nine">9</div> <div class="btn_calc myltiply bg-orange">X</div> <div class="btn_calc four">4</div> <div class="btn_calc five">5</div> <div class="btn_calc six">6</div> <div class="btn_calc minus bg-orange">-</div> <div class="btn_calc one">1</div> <div class="btn_calc two">2</div> <div class="btn_calc three">3</div> <div class="btn_calc plus bg-orange">+</div> <div class="btn_calc zero">0</div> <div class="btn_calc dot">.</div> <div class="btn_calc equal bg-orange">=</div> </div> </div> </details>

CSS

.calc {   width: 300px;   height: 500px;   border: 1px solid #000;   border-radius: 20px;   background: #000;   color: #fff;   font-family: Arial;   padding: 18px; }  .calc-screen {   height: 125px;   padding: 10px;   display: grid;   justify-items: end;   align-items: end;   margin-bottom: 25px; }  .calc-screen p {   text-align: right;   font-size: 4rem;   margin: 0; }  .buttons {   display: grid;   font-weight: bold;   grid-template-areas:   "ac plus-minus percent divison"   "seven eight nine multi"   "four five six minus"   "one two three plus"   "zero zero dot equal";   grid-gap: 7px;   justify-items: center; }  .btn_calc {   width: 60px;   height: 60px;   background: #333;   border-radius: 50%;   text-align: center;   line-height: 60px;   cursor: pointer;   user-select: none; }  .btn_calc.zero {   grid-area: zero;   width: 100%;   border-radius: 34px; }  .btn_calc:hover {   filter: brightness(120%); }  .btn_calc:active {   filter: brightness(90%) }  .btn_calc.bg-grey {   background: #a6a6a6; }  .btn_calc.bg-orange {   background: #ff9501; }  .btn_calc.ac.bg-grey {   color: #000; }  .btn_calc.plus-minus.bg-grey {   color: #000; }  .btn_calc.percent.bg-grey {   color: #000; }

.calc { width: 300px; height: 500px; border: 1px solid #000; border-radius: 20px; background: #000; color: #fff; font-family: Arial; padding: 18px; } .calc-screen { height: 125px; padding: 10px; display: grid; justify-items: end; align-items: end; margin-bottom: 25px; } .calc-screen p { text-align: right; font-size: 4rem; margin: 0; } .buttons { display: grid; font-weight: bold; grid-template-areas: "ac plus-minus percent divison" "seven eight nine multi" "four five six minus" "one two three plus" "zero zero dot equal"; grid-gap: 7px; justify-items: center; } .btn_calc { width: 60px; height: 60px; background: #333; border-radius: 50%; text-align: center; line-height: 60px; cursor: pointer; user-select: none; } .btn_calc.zero { grid-area: zero; width: 100%; border-radius: 34px; } .btn_calc:hover { filter: brightness(120%); } .btn_calc:active { filter: brightness(90%) } .btn_calc.bg-grey { background: #a6a6a6; } .btn_calc.bg-orange { background: #ff9501; } .btn_calc.ac.bg-grey { color: #000; } .btn_calc.plus-minus.bg-grey { color: #000; } .btn_calc.percent.bg-grey { color: #000; }

JS

let a = ''; // first number let b = ''; // secont number let sign = ''; // знак операции let finish  = false;  const digit = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.']; const action = ['-', '+', 'X', '/'];  // экран const out = document.querySelector('.calc-screen p');  function clearAll () {     a = ''; // first number and result     b = ''; // second number     sign = ''; // знак     finish = false;     out.textContent = 0; }  document.querySelector('.ac').onclick = clearAll;  document.querySelector('.buttons').onclick = (event) => {     // нажата не кнопка     if(!event.target.classList.contains('btn_calc')) return;     // нажата кнопка clearAll ac     if(event.target.classList.contains('AC')) return;      out.textContent = '';     // получаю нажатую кнопку     const key = event.target.textContent;      // если нажата клавиша 0-9 или .     if (digit.includes(key)) {         if (b ==='' && sign === '') {             a += key;              out.textContent = a;         }         else if (a!=='' && b!=='' && finish) {             b = key;             finish = false;             out.textContent = b;         }         else {             b += key;             out.textContent = b;         }         console.table(a, b , sign);         return;     }       // если нажата клавиша + - / *      if (action.includes(key)) {         sign = key;         out.textContent = sign;         console.table(a, b , sign);         return;     }      // нажата =     if (key === '=') {         if (b ==='') b = a;         switch (sign) {             case "+":                 a = (+a) + (+b);                 break;             case "-":                 a = a - b;                 break;             case "X":                 a = a * b;                 break;             case "/":                 if (b === '0') {                     out.textContent = 'Ошибка';                     a = '';                     b = '';                     sign = '';                     return;                 }                 a = a / b;                 break;         }         finish = true;         out.textContent = a;         console.table(a, b , sign);     }  }

let a = ''; // first number let b = ''; // secont number let sign = ''; // знак операции let finish = false; const digit = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.']; const action = ['-', '+', 'X', '/']; // экран const out = document.querySelector('.calc-screen p'); function clearAll () { a = ''; // first number and result b = ''; // second number sign = ''; // знак finish = false; out.textContent = 0; } document.querySelector('.ac').onclick = clearAll; document.querySelector('.buttons').onclick = (event) => { // нажата не кнопка if(!event.target.classList.contains('btn_calc')) return; // нажата кнопка clearAll ac if(event.target.classList.contains('AC')) return; out.textContent = ''; // получаю нажатую кнопку const key = event.target.textContent; // если нажата клавиша 0-9 или . if (digit.includes(key)) { if (b ==='' && sign === '') { a += key; out.textContent = a; } else if (a!=='' && b!=='' && finish) { b = key; finish = false; out.textContent = b; } else { b += key; out.textContent = b; } console.table(a, b , sign); return; } // если нажата клавиша + - / * if (action.includes(key)) { sign = key; out.textContent = sign; console.table(a, b , sign); return; } // нажата = if (key === '=') { if (b ==='') b = a; switch (sign) { case "+": a = (+a) + (+b); break; case "-": a = a - b; break; case "X": a = a * b; break; case "/": if (b === '0') { out.textContent = 'Ошибка'; a = ''; b = ''; sign = ''; return; } a = a / b; break; } finish = true; out.textContent = a; console.table(a, b , sign); } }

Дополнительно:

Начни исправлять ошиПки русского каНкулятора))))

  • Олег, спасибо)
  • Все зависит от того, что именно ограничивать. Можно сделать допустим максимальное кол-во в n символов, и под него подогнать стили цифр. Или ширину калькулятора увеличить.

    • Ответы:

    Для начала реши как ты будешь отображать числа в которых число разрядов больше чем достуно в калькуляторе для вывода. А потом уже можно заниматься исправлением бага.

    oveflo-x: scroll / hidden на родителя можно
    если hidden, то нужно будет париться с представлением больших чисел (всякие там e вставлять, вместо разрядов)
    если scroll, то надо будет скроллбар прятать

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Виктор Sys Ответ

    Для создания ограничителя поля символов в PHP можно использовать функцию substr() для обрезания строки до определенного количества символов. Вот пример кода, демонстрирующий это:

    // Исходная строка
$string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
 
// Ограничение до 20 символов
$limitedString = substr($string, 0, 20);
 
// Вывод ограниченной строки
echo $limitedString;

    // Исходная строка $string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."; // Ограничение до 20 символов $limitedString = substr($string, 0, 20); // Вывод ограниченной строки echo $limitedString;

    В данном примере исходная строка "Lorem ipsum dolor sit amet, consectetur adipiscing elit." будет обрезана до 20 символов, и результат будет выведен на экран.

    Если вы хотите добавить многоточие (...) в конце обрезанной строки, чтобы показать, что текст был усечен, вы можете сделать это следующим образом:

    // Ограничение до 20 символов с добавлением многоточия
$maxLength = 20;
if (strlen($string) > $maxLength) {
    $limitedString = substr($string, 0, $maxLength) . '...';
} else {
    $limitedString = $string;
}
 
// Вывод ограниченной строки
echo $limitedString;

    // Ограничение до 20 символов с добавлением многоточия $maxLength = 20; if (strlen($string) > $maxLength) { $limitedString = substr($string, 0, $maxLength) . '...'; } else { $limitedString = $string; } // Вывод ограниченной строки echo $limitedString;

    Этот код проверяет длину исходной строки и, если она превышает заданное ограничение, добавляет многоточие в конце. В противном случае он просто выводит полную строку.

    Таким образом, вы можете легко создать ограничитель поля символов в PHP с помощью функции substr() и добавления многоточия для обозначения усечения текста.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 1 ответ