Как создать калькулятор с HTML

Автор: John Stephens
Дата создания: 21 Январь 2021
Дата обновления: 15 Май 2024
Anonim
Верстаем калькулятор. HTML + CSS. Подробный урок
Видео: Верстаем калькулятор. HTML + CSS. Подробный урок

Содержание

В этой статье: Понимание кода. Написание основного кода калькулятора. Создание калькулятора. Использование калькулятора.

Есть много способов сделать вычисления на вашем компьютере, используя встроенный калькулятор, но вы также можете создать свой собственный, используя только HTML-код. Для этого вы должны изучить основы HTML, прежде чем копировать необходимый код в файл e, который вы сохраняете с расширением .html. Затем просто откройте файл в вашем любимом браузере, чтобы получить доступ к калькулятору. Этот метод позволяет вам делать расчеты прямо в браузере, изучая основы искусства компьютерного программирования.


этапы

Часть 1 Понимание кода



  1. Понять, как работает код. Код, который вы будете использовать для создания калькулятора, основан на небольших кусочках кода, которые работают друг с другом для определения различных элементов документа. Вы можете узнать больше о HTML, нажав на эту ссылку, или вы можете прочитать, что каждая строка делает в коде, который вы собираетесь использовать для калькулятора.
    • HTML: этот фрагмент кода указывает на остальную часть документа используемый язык. Используется много разных языков программирования, и этот тег указывает остальной части документа, что на этот раз вы используете HTML.
    • голова : это говорит документу, что следующая информация - это данные, также называемые «метаданными». Тег обычно используется для определения стилистических элементов документа, таких как заголовок, заголовки и т. Д. Это как зонтик, под которым определяется остальная часть кода.
    • название Это название, которое вы дадите документу. Этот тег используется для отображения заголовка документа после его открытия в браузере.
    • body bgcolor = "#" : Устанавливает цвет фона для документа. Число, которое появляется после резкого, соответствует предопределенному цвету.
    • = '' : Слово в кавычках указывает на цвет e в документе.
    • имя формы = "" : Этот атрибут указывает имя формы, которая будет использоваться для структуры того, что следует после, чтобы JavaScript мог знать, о какой форме говорят. Например, имя формы, которое мы будем использовать, это «калькулятор», который создаст определенную структуру документа.
    • тип ввода = "" : это где действие будет происходить. Атрибут «тип ввода» сообщает документу тип значения для е в остальных скобках. Например, это может быть e, пароль, кнопка (как это будет для нашего калькулятора) и так далее.
    • значение = «» : Этот атрибут сообщает документу, что будет содержать атрибут «тип ввода». Для калькулятора вы будете отображать числа от 1 до 9 и арифметические знаки (+, -, *, /, =).
    • OnClick = "" : Этот фрагмент кода описывает событие, которое сообщает документу, что что-то должно произойти, когда кнопка активирована. Для калькулятора вы хотите отобразить число, соответствующее кнопке, которую нажал пользователь. Например, если кнопка 6 включена, вы хотите поместить document.calculator.in.value + = 6 между кавычками.
    • уш : это тег, который обозначает разрыв строки, весь остальной код, следующий за ним, появится ниже.
    • / form, / body и / html Эти закрывающие теги сообщают браузеру, что открытые ранее теги теперь завершены и закрыты.

Часть 2 Напишите основной код калькулятора

Скопируйте код ниже. Выберите e ниже, удерживая курсор в верхнем левом углу поля и перетаскивая его в правый нижний угол, чтобы весь e казался синим. Затем нажмите «Command + C» на Mac или «Ctrl + C» на ПК, чтобы скопировать e.


HTML калькулятор

Результат

Часть 3 Создание калькулятора




  1. Откройте файл e на компьютере. Есть много программ, которые вы можете использовать, но ради качества рекомендуется использовать Edit или Notepad.
    • На Mac просто нажмите на увеличительное стекло в правом верхнем углу экрана, чтобы открыть Spotlight. После открытия введите редактировать и нажмите на программу, которая должна быть выделена синим цветом.
    • На ПК нажмите на кнопку начало нижний левый. В строке поиска введите блокнот и нажмите на приложение, которое должно появиться в результатах.


  2. Вставьте HTML-код в документ.
    • На Mac просто нажмите в теле документа и нажмите "Command + V", Затем вы должны нажать на формат в верхней части экрана, а затем на Посмотреть в простой электронной после вставки кода.
    • На ПК щелкните в теле документа и вставьте код, нажав "Ctrl + V".


  3. Сохраните файл. Просто нажмите на кнопку файл в левом верхнем углу окна, а затем на Сохранить как ... на ПК или Сохранить ... на Mac в выпадающем меню, которое появляется.


  4. Добавьте расширение HTML. В меню введите имя файла, а затем «.html», прежде чем нажимать запись, Например, если вы хотите назвать этот файл «мой первый калькулятор», вы можете дать ему имя: «MyPremierCalculette.html».

Часть 4 Использование калькулятора



  1. Найдите файл HTML. Просто введите имя файла в Spotlight на Mac или в строке поиска в меню «Пуск» Windows. Нет необходимости вводить расширение файла.


  2. Нажмите на него, чтобы открыть. Ваш браузер по умолчанию должен открыть калькулятор в новой вкладке.


  3. Нажмите на кнопки, чтобы использовать его. Результаты ваших расчетов должны появиться в строке, предусмотренной для этой цели.

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

Другие разделы Если в вашей школе есть шкафчики с замками, вы, вероятно, захотите поскорее открывать свои. Не волнуйтесь; с практикой становится легче. См. Шаг 1, чтобы научиться открывать 99% всех ст...

Популярное на портале