JS计算器

最新推荐文章于 2023-09-18 09:54:05 发布
最新推荐文章于 2023-09-18 09:54:05 发布
阅读量99 收藏
点赞数
分类专栏： JS 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43012796/article/details/120003483
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Calculator</title>
   <style>
      .title {
         font-size: 15px;
         width: 210px;
         color: green;
         border: 2px solid black;
         text-align: center;
         margin-bottom: 10px;
      }
      input[type="text"] {
         color: black;
         border: 2px solid black;
         width: 95%;
      }

      input[type="button"] {
         background-color: green;
         border: 2px solid black;
         width: 100%;
      }
   </style>
</head>
<body>
   <div class="title">My Calculator</div>
   <table border="1">
      <tr>
         <th colspan="3"><input type="text" id="display"></th>
         <th><input type="button" value="c" onclick="clr()"></th>
      </tr>
      <tr>
         <td><input type="button" value="1" onclick="dis(value)"></td>
         <td><input type="button" value="2" onclick="dis(value)"></td>
         <td><input type="button" value="3" onclick="dis(value)"></td>
         <td><input type="button" value="/" onclick="dis(value)"></td>
      </tr>
      <tr>
         <td><input type="button" value="4" onclick="dis(value)"></td>
         <td><input type="button" value="5" onclick="dis(value)"></td>
         <td><input type="button" value="6" onclick="dis(value)"></td>
         <td><input type="button" value="+" onclick="dis(value)"></td>
      </tr>
      <tr>
         <td><input type="button" value="7" onclick="dis(value)"></td>
         <td><input type="button" value="8" onclick="dis(value)"></td>
         <td><input type="button" value="9" onclick="dis(value)"></td>
         <td><input type="button" value="-" onclick="dis(value)"></td>
      </tr>
      <tr>
         <td><input type="button" value="." onclick="dis(value)"></td>
         <td><input type="button" value="0" onclick="dis(value)"></td>
         <td><input type="button" value="=" onclick="res()"></td>
         <td><input type="button" value="*" onclick="dis(value)"></td>
      </tr>
      
   </table>
   <script>
      function clr() {
         document.getElementById("display").value = "";
      }

      function dis(val) {
         document.getElementById("display").value += val;
      }

      function res() {
         let val = document.getElementById("display").value;
         let y = eval(val);
         document.getElementById("display").value = y;
      }
   </script>
</body>
</html>
JasonDecode
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript计算器
风起叶落，若是不知，岂会心动！
08-23 2642
小型JavaScript计算器自己寻思出的解决方案，比较笨拙的方法，虽然完成了但是还有不少bug，用的方法也不是最有效的，基本功能算是完成了，一些小的细节地方也考虑到了，但是还有其他的细节需要处理。总体设计思路是，先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码；面板(main-board) 面板整体尺寸设计标题栏(board-title)字体： font: 3
JS 计算
qq_30962007的博客
12-24 105
//加 function floatAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} try{r2=arg2.toString().split(".")[1].length...
JavaScript 计算器
allway2的博客
06-02 7249
在本教程中，我们将创建一个简单的JavaScript 计算器。该计算器能够对 2 个或 2 个以上的数字进行加减乘除。计算器可以成为日常生活中非常有用的应用程序。您可以使用计算器来计算您的购物账单、计算您的贷款、执行简单的数学计算等。一般来说，我们有两种类型的计算器，一种是科学计算器，另一种是简单计算器。科学计算器用于执行复杂的数学计算，如平方根、平方、立方、对数、三角函数等。而简单的计算器用于执行简单的数学计算，如加法、减法、乘法和除法。我们将在本文中使用 HTML、CSS 和 JavaScript 逐步
javascript计算器
王者生辉的博客
08-10 468
代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var strs = ""; function OnClick(obj) { var str = obj.innerText; var numInput = docume
javascript简易计算器
最新发布
a17783481239的博客
09-18 2406
查看历史记录
js计算器_js计算器_
10-02
JavaScript计算器是一种常见的网页交互元素，它使用JavaScript编程语言来实现基本的算术运算。这个项目包含HTML、CSS和JS三个主要部分，分别负责计算器的结构、样式和功能逻辑。 首先，我们从HTML文件开始。HTML...
JavaScript计算器
12-06
在JavaScript计算器项目中，CSS可以用来设置计算器的外观，包括按钮的大小、颜色、边框、间距，以及显示屏的样式等。通过选择器（如ID选择器、类选择器）和盒模型属性（如margin、padding、border），可以精确地调整...
HTML+JAVAScript计算器
12-01
HTML+JavaScript计算器是一种基于网页的计算工具，利用HTML（超文本标记语言）构建用户界面，JavaScript处理用户交互和计算逻辑。在这个项目中，HTML用于创建计算器的布局和按钮，而JavaScript则赋予这些按钮功能，...
js计算器插件
06-01
【标题】"js计算器插件"所指的是一款基于JavaScript编程语言开发的计算器应用程序，它通常被设计为网页上的一个交互式组件，用于执行基本的数学运算。这种计算器插件可以使网页更加动态和用户友好，尤其适用于教育、...
JavaScript - new Map()基本用法
热门推荐
deep learning
12-09 1万+
// 1 variables var a = 5; var b = 10; var c = "I am a"; a = a + 1; b = b + 5; c = c + " String!"; console.log(c); console.log(a); console.log(b); //2 Adding numbers var sum = 10 + 10; console.log(sum); //3 subtraction var difference = 45 - 0; console.
Javascript入门学习
deep learning
12-17 1424
Javascript for beginners 1 print Hello world! console.log("Hello world!"); 2 comment your code 2.1 in-line comment console.log("Hello world!"); // in-line comment 2.2 multi-line comment /* console.log("Hello\n"); console.log("world!\n"); */ 3 dat
js arr.every()
deep learning
09-26 730
ispositive is a callback function need to check every element // JavaScript code for every() method function ispositive(element, index, array) { return element > 0; } function func() { var arr = [11, 89, 23, 7, 98]; // Check for positive n
JS function 四种写法
deep learning
09-01 586
function area(length, width) { return length * width; } console.log(area(2, 3)); const area1 = function(length, weight) { return length * weight; } console.log(area1(2, 3)); const area2 = (length, weight) => { return length * weight; } console.l
HTML quiz1
deep learning
09-04 457
HTML Quiz Results Score: 33 of 40 82% Correct: Question 1: What does HTML stand for? Hyper Text Markup Language Your answer Hyperlinks and Text Markup Language Home Tool Markup Language Question 2: Who is making the Web standards? The World Wide Web
JS - string 十种用法
deep learning
12-12 372
string 1 string format let name = 'Jason'; let age = 20; let str = 'My name is ' + name + ', I am ' + age + ' years old!' console.log(str); console.log(My name is ${name}, I am ${age} years old!); 2 string many lines and length let text = 'This is very lon
js arr.entries()
deep learning
09-26 345
for (const [idx, val] of arr.entries()) { console.log(idx, val); }
HTML pre tag保留原输入格式
deep learning
09-04 330
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title&
2. Add Two Numbers
deep learning
12-11 227
/** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next) * } */ /** * @param {ListNode} l1 * @param {ListNode} l2 * @return {ListNode.
css quiz1
deep learning
09-05 213
CSS Quiz Results Score: 24 of 25 96% Correct: Question 1: What does CSS stand for? Cascading Style Sheets Your answer Creative Style Sheets Computer Style Sheets Colorful Style Sheets Question 2: What is the correct HTML for referring to an external
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值