lightanddesign.ru
You might also like
Материал по разработке калькуляторов на CSS и HTML без JS-файлов, скриптовых тегов и обработчиков HTML-событий будет предоставлен к моменту полномасштабной разработки в курсе Python. Для получения дополнительной информации см. вкладку.
Постановка задачи
Проекты CSS часто компилируют HAML и SCSS в обычные статические HTML и CSS. Последний используется во многих безумных проектах, но я решил не усложнять. Посмотрите на весь код.
Как это сделать?
Давайте начнем с взаимодействия с пользователем. Как узнать, что кнопка была нажата, без JS? Ответ: значение радиокнопки.
Теги связаны с входами, поэтому нажатие на тег приводит к нажатию на вход. Ярлыки лучше, чем щелчок непосредственно на радиокнопке, поскольку они упрощают стилизацию.
Символ — это селектор, выбирающий элементы на том же уровне сложности: A B соответствует элементам B после A. Код выше по умолчанию скрывает элементы p, отображая их, только когда подключенная радиокнопка выбрана.
Переменные и счётчики CSS
Значения счетчика не применяются в функции calc, поэтому для создания числа объявляется переменная. Напишите имя свойства с двумя тире (-) в начале и любое значение CSS. -colour:brown или -digit:3. Чтобы заменить переменную, вызовите функцию CSS var.
Счетчики CSS хранят и отображают числа. Они используются, например, для автоматической нумерации подразделений.
Когда пользователь ставит галочку на кнопку, значение переменной -digit устанавливается в div и наследуется всеми дочерними элементами. Невозможно извлечь это значение напрямую, поэтому давайте увеличим счетчик цифр и отобразим его через сгенерированный контент.
Чтобы получить число больше 9, просто удвойте имеющиеся цифры. Грамотное структурирование HTML и использование промежуточных переменных сводит к минимуму повторение CSS.
Переменная —digit продолжает указываться через ввод, и каждый отдельный div принимает ее значение и присваивает его -first-digit, -second-digit и т.д. Повторите #set-to-code 1: Каждая проверенная цифра не обязательна.
Функция CSS calc
Функция CSS calc выполняет вычисление и применяется, когда указано значение ширины, например: calc(100%-95px). Используйте calc для определения количества входных элементов и результата всех вычислений.
Селектор * выбирает все элементы, поэтому в приведенном выше коде вы найдете .set-number, который является потомком любого элемента после ввода флажка и определенного имени. Второй селектор отменяет первый селектор только потому, что он идет после него.
Окончательный ответ можно получить аналогичным образом, добавив несколько входов для выбора функции. В этом случае значения просто записываются и отображаются в счетчике. Свойство content может также принимать строку, которая отображает функцию калькулятора.
@property и @counter-style
Это позволяет создать калькулятор. Однако здесь есть проблема. Счетчики содержат только целые числа без десятичных. Поэтому необходимо найти способ разделить число на целую и десятичную части и округлить его.
В этом случае счетчик не может быть использован, поскольку его нельзя импортировать в calc. Попробуйте использовать функцию @property experiment. Это определяет переменные, используя такие функции, как проверка типа и проверка наследования значений. Давайте определим @property:.
Таким образом, присвоенное значение —integer округляется до целого числа. Чтобы представить число с семью десятичными знаками, сначала выполните следующее вычисление где число — определяется внешним кодом.
Использование —integer для целых чисел и —decimal для десятичных позволяет увеличивать счетчики с похожими именами, но они не могут быть отображены напрямую. Например, для 1.005, -integer будет 1, а -decimal будет 5.
Десятичные цифры дополнены настраиваемым свойством @Counter -Style, используемым для представления отрицательного числа. Вы не можете сказать системе, что -0,5 — это "отрицательный ноль". Так что -0,5:.
Вторым аргументом функции счетчика является стиль. Стиль PAD-7 определяет обычную систему счисления, за исключением того, что каждое значение, меньшее семи цифр, дополняется нулем.
Стиль sine также использует систему чисел, но определяет букву как пустую, так что при необходимости отображается только знак минус.
Возможности
Это все важные элементы калькулятора, но кое-что еще упущено — стиль. Возможно, вы заметили, что в текущей конфигурации имеется много отдельных наборов входов для каждой цифры числа.
Чтобы всегда показывать метку следующей цифры, можно применять селектор , :checked и свойство display, а content — разбить на отдельные элементы, таким образом показывая десятичную часть только при необходимости.
Теоретически, создание HTML позволяет добраться до научных калькуляторов. Например, симметрия и периодичность тригонометрических функций может быть использована путем применения приближенных вычислений.
Самая сложная часть — это кронштейны. Поскольку мы не знаем, как динамически добавлять их в вычисления, нам нужны отдельные селекторы и CSS для каждого скрипта.
Заключение
Я написал этот компьютер просто для развлечения, но я многому научился, это было очень весело, так что если у вас есть идея для программы знаний, применяйте ее. Почему бы и нет
А пока вы в ней, мы поможем вам овладеть своими навыками или узнать, что требуется после вашей профессии с самого начала: a
Краткий список курсов и профессий
