API tools faq
paste
Advertisement
winone1208

JS kalkulator

winone1208
Dec 16th, 2015
163
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body onload="checkCookie()">
  6. <style>
  7. table.calc {
  8.     border: 6px solid blue;
  9.     background-color: #6699CC;
  10.     border-radius: 6px;
  11.     padding: 10px;
  12. }
  13.  
  14. input.calc {
  15.      width: 100%;
  16.      margin: 5px;
  17.  
  18. }
  19.  
  20. input.calc1 {
  21.     height: 70px;
  22.     width: 100%;
  23.     margin: 5px;
  24.     font: bold 27px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  25.     border-radius: 6px;
  26.     border: 3px solid blue;
  27. }    
  28.  
  29. input.calc {
  30.  
  31.     /*Podstawowe style*/
  32.     display: block;
  33.     height: 100px;
  34.     width: 100px;
  35.     background: #66CCFF;
  36.     border: 2px solid rgba(33, 68, 72, 0.59);
  37.  
  38.     /*Style tekstu*/
  39.     color: rgba(0, 0, 0, 0.55);
  40.     text-align: center;
  41.     font: bold 50px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  42.  
  43.     /*Ozdobne style CSS3*/
  44.     background: -webkit-linear-gradient(top, #66CCFF, #0066FF);
  45.     background: -moz-linear-gradient(top, #66CCFF, #0066FF);
  46.     background: -o-linear-gradient(top, #66CCFF, #0066FF);
  47.     background: -ms-linear-gradient(top, #66CCFF, #0066FF);
  48.     background: linear-gradient(top, #66CCFF, #0066FF);
  49.  
  50.     -webkit-border-radius: 50px;
  51.     -khtml-border-radius: 50px;
  52.     -moz-border-radius: 50px;
  53.     border-radius: 50px;
  54.  
  55.     -webkit-box-shadow: 0 8px 0 #063c03;
  56.     -moz-box-shadow: 0 8px 0 #063c03;
  57.     box-shadow: 0 8px 0 #063c03;
  58.  
  59.     text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
  60. }
  61.  
  62.  
  63. /*przy najechaniu na button*/
  64. input.calc:hover {
  65.     background: ##0066FF;
  66.     background: -webkit-linear-gradient(top, #0066FF, #66CCFF);
  67.     background: -moz-linear-gradient(top, #0066FF, #66CCFF);
  68.     background: -o-linear-gradient(top, #0066FF, #66CCFF);
  69.     background: -ms-linear-gradient(top, #0066FF, #66CCFF);
  70.     background: linear-gradient(top, #0066FF, #66CCFF);
  71. }
  72. </style>
  73.  
  74. <audio id="audio" style="display:none;">
  75.   <source src="pip3.mp3" type="audio/mpeg">
  76. </audio>
  77.  
  78.  
  79. <table class="calc" cellpadding=4>
  80. <tr><td colspan=3><input class="calc1" id="screen" type="text"></td>
  81. <td><input class="calc" type="button" value='C' onclick="pushButton(this.value);"></td>
  82. </tr>
  83. <tr>
  84. <td><input class="calc" type="button" value=M onclick="pushButton(this.value);"></td>
  85. <td><input class="calc" type="button" value=M+ onclick="pushButton(this.value);"></td>
  86. <td><input class="calc" type="button" value='x&#178' onclick="pushButton(this.value)"></td>
  87. <td><input class="calc" type="button" value='&#9835' onclick="pushButton(this.value);"></td>
  88. </tr>
  89. <tr>
  90. <td><input class="calc" type="button" value=1 onclick="pushButton(this.value);"></td>
  91. <td><input class="calc" type="button" value=2 onclick="pushButton(this.value);"></td>
  92. <td><input class="calc" type="button" value=3 onclick="pushButton(this.value);"></td>
  93. <td><input class="calc" type="button" value='/' onclick="pushButton(this.value);"></td>
  94. </tr>
  95. <tr>
  96. <td><input class="calc" type="button" value=4 onclick="pushButton(this.value);"></td>
  97. <td><input class="calc" type="button" value=5 onclick="pushButton(this.value);"></td>
  98. <td><input class="calc" type="button" value=6 onclick="pushButton(this.value);"></td>
  99. <td><input class="calc" type="button" value='*' onclick="pushButton(this.value);"></td>
  100. </tr>
  101. <tr>
  102. <td><input class="calc" type="button" value=7 onclick="pushButton(this.value);"></td>
  103. <td><input class="calc" type="button" value=8 onclick="pushButton(this.value);"></td>
  104. <td><input class="calc" type="button" value=9 onclick="pushButton(this.value);"></td>
  105. <td><input class="calc" type="button" value='-' onclick="pushButton(this.value);"></td>
  106. </tr>
  107. <tr>
  108. <td><input class="calc" type="button" value=0 onclick="pushButton(this.value);"></td>
  109. <td><input class="calc" type="button" value='.' onclick="pushButton(this.value);"></td>
  110. <td><input class="calc" type="button" value='=' onclick="calculate(document.getElementById('screen').value);"></td>
  111. <td><input class="calc" type="button" value='+' onclick="pushButton(this.value);"></td>
  112. </tr>
  113. </table>
  114.  
  115. <script>
  116. function getCookie(cname) {
  117.     var name = cname + "=";
  118.     var ca = document.cookie.split(';');
  119.     for(var i=0; i<ca.length; i++) {
  120.         var c = ca[i];
  121.         while (c.charAt(0)==' ') c = c.substring(1);
  122.         if (c.indexOf(name) == 0) {
  123.             return c.substring(name.length, c.length);
  124.         }
  125.     }
  126.     return "";
  127. }
  128. var pip=getCookie("pip");
  129.  
  130.     if (pip == '') {
  131.         document.cookie="pip=1";
  132.     }
  133.  
  134. function pushButton(buttonValue) {
  135. var pip=getCookie("pip");
  136.  
  137.     if (buttonValue == '\u266B' && pip == '0') {
  138.         document.cookie="pip=1";
  139.     }
  140.     else if (buttonValue == '\u266B' && pip == '1') {
  141.         document.cookie="pip=0";
  142.     }
  143.    
  144. var pip=getCookie("pip");
  145.     if (buttonValue == 'C') {
  146.           document.getElementById('screen').value = '';
  147.     }
  148.     else if (buttonValue == 'x\u00B2')
  149.         document.getElementById('screen').value *= document.getElementById('screen').value;
  150.     else if (buttonValue == 'M+'){
  151.         document.cookie="memory=" + document.getElementById('screen').value;
  152.     }
  153.     else if (buttonValue == 'M'){
  154.         var memory=getCookie("memory");
  155.         document.getElementById('screen').value = memory;
  156.     }
  157.     else if (pip == 1 && buttonValue == '\u266B'){
  158.           document.getElementById('audio').play();
  159.     }
  160.     else if (pip == 0 && buttonValue == '\u266B'){
  161.     }
  162.     else if (pip == 1){
  163.           document.getElementById('screen').value += buttonValue;
  164.           document.getElementById('audio').play();
  165.     }
  166.     else {
  167.           document.getElementById('screen').value += buttonValue;
  168.     }
  169. }
  170. function calculate(equation) {
  171.      var answer = eval(equation);
  172.      document.getElementById('screen').value = answer;
  173. }
  174. </script>
  175. </body>
  176. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!