Shulou(Shulou.com)06/02 Report--

This article mainly shows you "JavaScript how to achieve calculators", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve calculators in JavaScript" this article.

I. example code

HTML:

Document / * Basic Reset * / Calculator

CSS:

* {border: none;/* remove the default border * / font-family: 'Open Sans', sans-serif;/* change font * / margin: 0 role * remove the default margin * / padding: 0 position * remove the default inner margin * /} .center {background-color: # fff; border-radius: 50% fff; border-radius * fillet * / height: 600px * calculator height * / margin: auto / * horizontal center * / width: 600px center * width * / H2 {/ * modify title style * / color: # 495678 * font color * / font-size: 30px; / * font size * / margin-top: 20px * top outer margin * / padding-top: 50px leading * top inner margin * / display: modify to block-level element, exclusive line * / text-align: / * text centered * / text-decoration: none;/* removes the default text style * /} a {/ * this is the location under the title, click to jump to the github warehouse address * / color: # 495678; font-size: 30px; display: block; text-align: center; text-decoration: none; padding-top: 20px } form {/ * define the style of the form area * / background-color: # 495678 30px * background color * / box-shadow: 4px 4px # 3d4a65 * shadow * / margin: 40px auto;/* defines the outer margin * / padding: 40px 0 30px 40px; / * define the inner margin * / width: 280px / * width * / / * height is supported by content * /}. Btn {/ * defines the format of each numeric button * / outline: none;/* clears the default border style * / cursor: pointer;/* defines the pattern of the hand when the mouse is moved over, so that the user knows that it can be clicked * / font-size: 20pxcontrol * font size * / height: 45pxscape * button height * / margin: 5px 0 5px 10px / * margin * / width: 45px 5px * button width * /}. Btn:first-child {margin: 5px 0 5px 10px * first button special * /} .btn, # display, form {/ * button, text input box and the entire form area * / border-radius: 25px outline * fillet * /} / * define the input box * / # display {outline: none / * clear the default border style * / background-color: # 98d1dcspur * background color * / box-shadow: inset 6px 6px 0px # 3facc0 * width * Shadow * / color: # dededc;/* internal text color * / font-size: 20pxash * text size * / height: 47pxash * input box height * / text-align: right;/* text right alignment * / width: 165px / * define the width * / padding-right: 10pxash * right inside margin * / margin-left: 10pxram * left outer margin * /}. Number {/ * Button for defining numbers * / background-color: # 72778b dededc * background color * / box-shadow: 0 5px # 5f6680 * Shadow * / color: # dededc / * numeric color * /}. Number:active {/ * selecting the numeric style is the dynamic effect of clicking on the number * / box-shadow: 0 2px # 5f6680;-webkit-transform: translateY (2px);-ms-transform: translateY (2px);-moz-tranform: translateY (2px); transform: translateY (2px) / * these four are actually the same. This is to be compatible with different browsers. The effect is to move the 2px distance upward with js. Click active, then erase * /}. Operator {/ * define operator button * / background-color: # dededc;/* background color * / box-shadow: 0 5px # bebebe;/* shadow * / color: # 72778b / * operator color * /}. Operator:active {/ * defines the operator click * / / * this is one more than the number click, which reduces the following shadow a little bit * / box-shadow: 0 2px # bebebe;-webkit-transform: translateY (2px);-ms-transform: translateY (2px);-moz-tranform: translateY (2px); transform: translateY (2px) }. Other {/ * define zeroing key and = key * / background-color: # e3844c * background color * / box-shadow: 0 5px # e76a3d * background color * / color: # dededc;/* symbol color * /}. Other:active {/ * the click effect is the same as the click operator * / box-shadow: 0 2px # e76a3d;-webkit-transform: translateY (2px);-ms-transform: translateY (2px) -moz-tranform: translateY (2px); transform: translateY (2px);}

JavaScript:

/ * limpa o display * / document.getElementById ("clear") .addEventListener ("click", function () {document.getElementById ("display"). Value = "";}); / * recebe os valores * / function get (value) {document.getElementById ("display"). Value + = value;} / * calcula * / function calculates () {var result = 0 Result = document.getElementById ("display"). Value; document.getElementById ("display"). Value = ""; document.getElementById ("display"). Value = eval (result);}; example demonstration

After the page is loaded, the page of a calculator is displayed, which can perform four normal operations.

Calculation result:

You can also return to zero, add decimals, and so on.

III. Case analysis

Method analysis

Document.getElementById ("display") .value = eval (result)

The eval () function evaluates the JavaScript string and executes it as script code.

If the parameter is an expression, the eval () function executes the expression. If the argument is a Javascript statement, eval () executes the Javascript statement.

Analyze the principle of the instance:

Document.getElementById ("clear") .addEventListener ("click", function () {document.getElementById ("display") .value = "";})

Monitor the click operation of the Zero key, and click the Zero key to execute the code to clear the display input box.

Function get (value) {document.getElementById ("display") .value + = value;}

Onclick attribute binding function get () on each key. Click the corresponding key to add the value of the corresponding key to the display input box and append the string directly.

Function calculates () {var result = 0; result = document.getElementById ("display"). Value; document.getElementById ("display"). Value = "; document.getElementById (" display "). Value = eval (result);}

The core calculation function is to first get the string of the input box display, then empty the input box, call the eval () function to calculate the value of the expression, and then assign it to the input box display to realize the simple function of the calculator.

These are all the contents of the article "how to implement calculators in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.