Програмиране на калкулатор в HTML

Видео: Верстаем калькулятор. HTML + CSS. Подробный урок

Съдържание

Стъпвам
Част 1 от 4: Разбиране на кода
Част 2 от 4: Стандартен код за HTML калкулатор
Част 3 от 4: Направете свой собствен калкулатор
Част 4 от 4: Използвайте вашия калкулатор
Съвети

Има много различни начини за изчисляване с компютър с помощта на вградения калкулатор, но друг начин е да създадете свой собствен, като използвате прост HTML код. За да направите калкулатор с помощта на HTML, имате нужда от някои основни познания по HTML, след това въведете необходимия код в текстов редактор и го запазете като HTML файл. След това можете да използвате калкулатора, като отворите HTML файла в любимия си браузър. Не само ще можете да извършвате аритметични операции в браузъра си, но и ще можете да научите някои основни умения за изкуството на програмирането!

Стъпвам

Част 1 от 4: Разбиране на кода

Научете какво прави всяка функция на HTML. Кодът, който ще използвате за създаване на вашия калкулатор, се състои от много различни типове синтаксис, които заедно определят различните елементи на документ. Щракнете тук за обяснение на този процес или прочетете, за да научите повече за това какво ще направи всеки ред код, за да създаде калкулатора.
- html: Този бит синтаксис казва на останалата част от документа кой език ще се използва в кода. Има няколко езика за кодиране и в този случай html> дава ясно на останалата част от документа, че се намира - предположихте - html.
- глава: Казва на документа, че всичко след него са данни за данни, наричани още "метаданни". Командата head> обикновено се използва за дефиниране на стилистични елементи на документ, като заглавия, заглавия и др. Мислете за това като за чадър, под който е дефинирана останалата част от кода.
- заглавие: Заглавието на вашия документ е посочено тук. Този атрибут се използва за посочване на заглавието на документа, когато той е отворен в HTML браузър.
- body bgcolor = "#": Този атрибут задава цвета на фона на HTML страницата и тялото. Числото в кавичката и след # съответства на определен цвят.
- текст = "": Този синтаксис задава цвета на текста на документа.
- име на форма = "": Този атрибут указва името на формуляр и се използва за изграждане на структурата на следващото, въз основа на това, което Javascript знае за значението на името на формата. Например името на формуляра, което ще използваме, е "калкулатор", който ще използваме, за да създадем специфична структура за документа.
- тип на въвеждане = "": Тук се случва нещо. Атрибутът "тип на въвеждане" казва на анализатора на документа какъв вид текст се съдържа в стойностите между кавичките. Например това може да е текст, парола, бутон (както ще бъде в случая с калкулатора) и т.н.
- стойност = "": Тази команда казва на анализатора на документа какво е включено в горния тип въвеждане. За калкулатор това са числа (1-9) и операции (+, -, *, /, =).
- onClick = "": Този синтаксис описва събитие, указващо, че трябва да се направи нещо, когато се натисне бутона. За калкулатор искаме текстът на всеки бутон също да бъде разпознат като такъв. Така че преди бутона "6" поставяме document.calculator.ans.value + = "6" между кавичките.
- бр: този таг създава нов ред в документа, така че текстът (или нещо друго) да бъде поставен след него на друг ред.
- / form, / body и / html: тези команди са затварящи за съответните команди, отворени по-рано в документа.

Част 2 от 4: Стандартен код за HTML калкулатор

Копирайте кода по-долу. Изберете текста в полето по-долу, като задържите левия бутон на мишката и плъзнете курсора от долния ляв ъгъл на горния десен ъгъл, така че целият текст да стане син. След това натиснете "Command + C" на Mac или "Ctrl + C" на компютър, за да копирате кода в клипборда.

html> head> title> HTML Calculator / title> / head> body bgcolor = "# 000000" text = "gold"> form name = "calculator"> input type = "button" value = "1" onClick = "document. calculator.ans.value + = '1' "> type type =" button "value =" 2 "onClick =" document.calculator.ans.value + = '2' "> type type =" button "value =" 3 "onClick =" document.calculator.ans.value + = '3' "> type type =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> input type =" бутон "value =" 4 "onClick =" document.calculator.ans.value + = '4' "> input type =" button "value =" 5 "onClick =" document.calculator.ans.value + = '5' "> input type =" button "value =" 6 "onClick =" document.calculator.ans.value + = '6' "> input type =" button "value =" - "onClick =" document.calculator.ans. value + = '-' "> input type =" button "value =" 7 "onClick =" document.calculator.ans.value + = '7' "> input type =" button "value =" 8 "onClick =" document.calculator.ans.value + = '8' "> input type =" button "value =" 9 "onClick =" document.calculator.ans.value + = '9' "> input type =" button "value = " *" onClick = "document.calcul ator.ans.value + = ' *' "> type type =" button "value =" / "onClick =" document.calculator.ans.value + = '/' "> type type =" button "value =" 0 "onClick =" document.calculator.ans.value + = '0' "> input type =" reset "value =" Reset "> input type =" button "value =" = "onClick =" document.calculator.ans .value = eval (document.calculator.ans.value) "> br> Отговорът е input type =" textfield "name =" ans "value =" "> / form> / body> / html>

Част 3 от 4: Направете свой собствен калкулатор

Отворете текстов редактор на вашия компютър. Има няколко програми, които да използвате, но за простота ще се придържаме към TextEdit или Notepad.
- На Mac щракнете върху лупата в горния десен ъгъл на екрана, за да отворите Spotlight. Когато стигнете там, напишете TextEdit и кликнете върху програмата TextEdit, която сега трябва да бъде избрана в синьо.
- На компютър отворете менюто "Старт" в долния ляв ъгъл на екрана. В лентата за търсене въведете Notepad и кликнете върху приложението Notepad, което ще се появи в лентата за търсене вдясно.
Поставете HTML документа за калкулатор в документа.
- На Mac кликнете върху тялото на документа и натиснете Command + V. След това кликнете върху Формат в горната част на екрана и след това Направете обикновен текст след поставяне на кода.
- На компютър кликнете върху тялото на документа и след това върху Ctrl + V.
Запазете файла. Правите това чрез "Файл" в главното меню на прозореца и след това с Запази като... на компютър или Запазване ... на Mac от падащото меню.
Добавете HTML разширение към името на файла. В менюто „Запазване като ...“ въведете името на файла, последвано от „.html“, след което щракнете върху „Запазване“. Например, ако искате да наименувате този файл „Моят първи калкулатор“, запазете файла като „Моят първи калкулатор.html“.

Част 4 от 4: Използвайте вашия калкулатор

Намерете току-що създадения файл. За да направите това, въведете името на файла в Spotlight или в лентата за търсене на менюто "Старт", както е обяснено в предишната стъпка. Не е необходимо да въвеждате и разширението "html".
Кликнете върху вашия файл, за да го отворите. Браузърът ви по подразбиране ще отвори вашия калкулатор в нова уеб страница.
Щракнете върху бутоните на калкулатора, за да го използвате. Решенията за вашите уравнения ще се появят в лентата за отговори.