这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了 js 实现简单的计算器功能的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
话不多说,请看示例代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 简单的计算器
- </title>
- <style>
- * { margin: 0 auto; padding: 0px; } html, body { width: 100%; height:
- 100%; } a { text-decoration: none; } .wrap { width: 30%; min-width: 250px;
- margin: 0 auto; border: 1px solid #b1b1b1; } .wrap .screen { width: 100%;
- height: 150px; background-color: #8d8d8d; } .wrap .screen .string { height:
- 100%; user-select: none; font-size: 30px; word-break: break-all; } .wrap
- .button-group { width: 100%; margin-top: 5px; } .wrap .button-group td
- { width: 25%; } .wrap .button-group td a { display: inline-block; height:
- 80px; text-align: center; background-color: #d5d5d5; color: #000; line-height:
- 80px; font-size: 25px; width: 100%; user-select: none; } .wrap .button-group
- td a:hover { background-color: #9d9d9d; color: #002a80; } .wrap .button-group
- td a.active { background-color: red; }
- </style>
- </head>
- <body>
- <div class="wrap">
- <div class="screen">
- <p class="string">
- </p>
- </div>
- <div class="button-group">
- <table cellspacing="5" cellpadding="10" border="0" width="100%">
- <tr>
- <td>
- <a href="javascript:void(0);">
- 7
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- 8
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- 9
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- *
- </a>
- </td>
- </tr>
- <tr>
- <td>
- <a href="javascript:void(0);">
- 4
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- 5
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- 6
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- /
- </a>
- </td>
- </tr>
- <tr>
- <td>
- <a href="javascript:void(0);">
- 1
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- 2
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- 3
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- +
- </a>
- </td>
- </tr>
- <tr>
- <td>
- <a href="javascript:void(0);">
- DEL
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- 0
- </a>
- </td>
- <td>
- <a href="javascript:void(0);" class="active">
- =
- </a>
- </td>
- <td>
- <a href="javascript:void(0);">
- -
- </a>
- </td>
- </tr>
- </table>
- </div>
- </div>
- <script>
- var numString = document.getElementsByClassName("string")[0];
- var buttonGroup = document.getElementsByTagName("a");
- var screen = document.getElementsByClassName("string")[0];
- var num1 = 0;
- var num2 = 0;
- var count = 0;
- var f;
- var flag = true;
- /*控制输入的是数字*/
- var flag2 = true;
- /*控制是否连续点击符号*/
- screen.onclick = function() {
- numString.innerHTML = "";
- };
- for (var i = 0; i < buttonGroup.length; i++) {
- buttonGroup[i].onclick = function() {
- switch (this.innerHTML) {
- case "0":
- case "1":
- case "2":
- case "3":
- case "4":
- case "5":
- case "6":
- case "7":
- case "8":
- case "9":
- if (!flag) {
- numString.innerHTML = "";
- flag2 = true;
- }
- flag = true;
- numString.innerHTML += this.innerHTML;
- break;
- case "DEL":
- numString.innerHTML = numString.innerHTML.substr(0, numString.innerHTML.length - 1);
- break;
- case "+":
- case "-":
- case "*":
- case "/":
- f = this.innerHTML;
- count++;
- if (flag2) {
- flag = false;
- /*控制输入的是符号*/
- if (count == 1) {
- num1 = numString.innerHTML;
- } else {
- flag2 = false;
- num2 = numString.innerHTML;
- numString.innerHTML = eval(num1 + f + num2);
- num1 = numString.innerHTML;
- }
- }
- break;
- case "=":
- num2 = numString.innerHTML;
- numString.innerHTML = eval(num1 + f + num2);
- count = 0;
- flag = !flag;
- break;
- }
- }
- }
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0531/328498.html