利用js语言编写简易的计算器！

最新推荐文章于 2023-09-18 09:54:05 发布
最新推荐文章于 2023-09-18 09:54:05 发布
阅读量386 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aybgcc/article/details/79950793
版权

利用js 语言编写简易的计算器，首先讲解一下思路

首先用table标签设计表格，再就是用script标签设计表格的格式

用 rowspan  colspan  向上向下合并单元格  对单元格格式进行编写

   以下是编写简易计算器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易计算器</title>
</head>
<script type="text/javascript">
       function jisuan(jy){
            var num1=document.getElementById('num1').value;
            var num2=document.getElementById('num2').value;
            var result="";
            switch(jy){
               case"+":
                  result=parseInt(num1)+parseInt(num2);
                  break;
               case"-":
                  result=parseInt(num1)-parseInt(num2);
                  break;
               case"*":
                  result=parseInt(num1)*parseInt(num2);
                  break;
               case"/":
                  result=parseInt(num1)/parseInt(num2);
                  break;
            }
           document.getElementById('result').value=result;
       }
</script>
<style type="text/css">
   table{
  width:500px;
  margin:10px auto;
  border:1px solid #CCF;
  border-collapse:collapse;
   }
   td,th{
  border:1px solid #CCF;
  font-size:20px;
 
   }
   tr,td{
   height:40px;
      font-size: 16px;
   }
   input[type=text]{
  height:20px;
  width:220px;
   }
   input[type=button]{
  height:30px;
  width:66px;
  background:blue;
  color:white;
  border:0;
  margin-top:10px;
     margin-left: 10px;
   }
</style>


<body>
<table>
  <tr>
    <th colspan="3">简易计算器</th>
  </tr>
  <tr>
    <td>第一个数</td>
    <td><input type="text" id='num1' /></td>
    <td rowspan="4"><input type="button" value='+' οnclick="jisuan('+')" />
      <br />
      <input type="button" value='-' οnclick="jisuan('-')" />
      <br />
      <input type="button" value='*' οnclick="jisuan('*')" />
      <br />
      <input type="button" value='/' οnclick="jisuan('/')" />
      <br /></td>
  </tr>
  <tr>
    <td>第二个数</td>
    <td><input type="text" id='num2' /></td>
  </tr>
  <tr>
    <td>结果</td>
    <td><input type="text" id='result' /></td>
  </tr>
  <tr>
    <td colspan="2">运算方法：先两个数，在选择算法</td>
</table>
</body>
</html>

aybgcc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用javascript编写的一个简单的计算器
01-09
用于简单的加减乘除运算 运用javascript技术实现简单的加减乘除运算。。。
使用JS编写简单的计算器
weixin_44530087的博客
06-02 405
使用JS编写简单的计算器 HTML写出计算器整体框架 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <link rel="stylesheet" href="css/Calculator.css" /> </head> <body> <div id="calculator"
js编写简易的计算器
12-28
本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下 使用绑定时间触发 加减乘除 加： 减： 乘： 除： 源代码： <body> 第一个数：<input type=text id=num1 /><p></p> <div id=ss> <button type=button >+</button> <button type=button >-</button> <button type=button >*</button> <button type=button >/</button> </div> <p></p> 第
用js编写简易计算器
qq_41908933的博客
04-15 969
用js编写简易计算器；2.设计它的样式以上就是这个简单计算器的实现步骤了；最后经运行如上图所示，先输入第一个数再输入第二个数在选择你要用的运算符，就会出现结果。...
JS编写一个简易计算器
weixin_47672692的博客
08-09 225
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="" method=""> <table border="0" cellspacing="" cellpadding=""> <tr> .
用js编写的简单的计算器代码程序
10-23
标签部分“js编写计算器 js计算器代码”进一步阐明了文档的重点内容，即利用JavaScript编写计算器的代码。这表明文章是面向已经对JavaScript有一定了解的开发者，他们希望通过编写一个实用的程序来加深对JavaScript...
JavaScript制作简易计算器（不用eval）
10-20
这篇文章会详细介绍如何使用JavaScript来制作一个简易计算器，重点是不会使用eval函数，这是一个可以执行字符串表达式的函数，但出于安全考虑，在处理用户输入的情况下，常常避免使用eval，以防止潜在的安全漏洞。...
简易计算器_html_源码
10-04
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它是网页开发的基础，可以与CSS和JavaScript一起使用，以实现视觉和交互效果。本案例是一个简单的HTML计算器的实现，旨在帮助初学者理解HTML的基本...
JS编写的计算器
07-31
"JS编写的计算器"是一个利用JavaScript实现的计算工具，用户可以在浏览器环境中进行基本的数学运算，如加法、减法、乘法、除法以及取余操作。这种计算器的实现原理主要基于HTML结构和CSS样式来构建界面，再通过...
简易计算器（小程序）
12-07
本项目旨在通过制作一个简易计算器小程序，帮助初学者掌握小程序的基本概念、架构和开发流程，进一步了解其特点和编写方式。 一、小程序的特点 1. 轻量化：小程序占用资源少，加载速度快，用户体验流畅。 2. 靠近...
JS简易计算器
07-06
js实现简易计算器
javascript简易计算器
最新发布
a17783481239的博客
09-18 2620
查看历史记录
用js编写一个简单地计算器
m0_57860459的博客
12-31 699
1.使用函数的方式重写电影列表和影院列表页面 2.写一个简单的计算器(eval用来计算) //html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte...
JS编写的简易计算器
slass-mot-odet
03-02 210
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>javascrip</title> <style type="text/css"> div{ width: 400px; height: 520px...
用JS写的一个简易计算器
yuiku008的专栏
05-19 3599
计算器var num1,num2;function  validate(num1,num2){ //判断是否完整填写条件var isCompute = false;if(num1 ==""){alert("请输入第一个数");}else if(isNaN(num1)){alert("请输入数字");}else if(num2 ==""){alert("请输入第二个数");}else if(isNa
用JS写的简单的计算器
etongchina的IT技术文章
09-12 738
 参加某公司的面试后，有一机试题目：用web技术开发一个B/S结构的公式解析器。于是想了想思路，神来一笔想先写个计算器程序做基础，于是便写了这个程序。   1.本页效果图片                                        2.美化后的效果 Array.prototype.remove=functi
利用JS制作简易计算器
weixin_46394746的博客
06-07 6045
目的：利用JS制作一个简易的计算器，能够实现简单四则运算 要求：三个输入框输入值只能是数字，当输入非数字时提示并清空输入框，利用正则表达式；点击按钮实现计算。 话不多说，贴图为上： 看了效果图，下面就是怎么实现的问题了，请看代码： <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title
如何使用JS编写一个简单的计算器
热门推荐
luojiandecsdn的博客
03-09 1万+
使用js实现一个简单地计算器，解决js计算精度问题
JS原生——编写简易计算器
m0_64954687的博客
12-06 9227
计算器
利用JS编写手机计算器的代码
03-26
3. 使用JavaScript语言编写一个计算器对象。此对象应该包括操作函数和用于更新显示区域的函数。 4. 创建事件监听程序，以处理与计算器按钮的交互。 5. 在事件监听程序中，使用计算器对象中定义的函数来计算表达式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值