Web front-end development experiment – Web calculator
The project has been uploaded to GitHub for learning and communication only. Please click start. Thank you github.com/zhenggengqi…
Experiment content and requirements:
Design and implement a web front-end program “web calculator”, complete the following contents: 1) design “web calculator”, simulate the physical calculator appearance; 2) Set the id of the page element for JavaScript control; 3) Write external JavaScript scripts to achieve user interaction; 4) Realize the basic four operations. Requirements: 1) Have detailed function description, interface interaction design description; 2) The solution (principle) is described; 3) There are key codes and annotations.
Function description and key code
Addition, subtraction, multiplication, division, the remainder of the calculation, and delete, empty function.
<script>
// Get the value of the key and enter it into the text box
var get = function(x){
var input = document.getElementById('input');
// The default value is 0
if(input.value == 0){
input.value = "";
}
// Enter the text box
input.value += document.getElementById(x.id).value;
}
// Click the decimal point
var Point = function(){
var input = document.getElementById('input');
// Control cannot have more than one decimal point
if(input.value.indexOf('. ') = = -1){
input.value+='. '; }}// Click on the equal sign
var is = function(){
var input = document.getElementById('input');
// Determine whether the input operation is incorrect
try{
var sum = eval(input.value);
// Control cannot have more than one equal sign, and output equal sign
if(input.value.indexOf('=') = = -1){
input.value += '=';
}
// Output the calculated result
input.value += sum;
}catch(e){
// If an ERROR occurs, the value of the text box changes to ERROR
input.value += "=ERROR"; }}// Backspace DEL click operation
var backSpace=function(){
var input = document.getElementById('input');
// The length of the text box is reduced by one to achieve deletion
input.value = input.value.substr(0,input.value.length-1);
}
Document.getElementById( 'AC') =function(){
var input = document.getElementById('input');
// Clear the value of the text box to 0
input.value = "0";
}
// Change the style
var count = 1;
var change = function(){
var button = document.getElementById("css");
if(document.getElementById("change").onclick){
count++;
}
if(count%2= =0){
button.setAttribute("href"."compute2.css");
}else{
button.setAttribute("href"."compute.css");
}
} </script>
Copy the code