JS制作计算器上

最新推荐文章于 2023-04-02 14:42:37 发布
最新推荐文章于 2023-04-02 14:42:37 发布
阅读量471 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lamenw/article/details/71478308
版权
<!DOCTYPE html>
< html lang = " en " >
< head >
< title ></ title >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 " >
< style >
body , table , tr , td , input {margin: 0 ;padding: 0px ;}
table {border-collapse: collapse; border: 1px solid #343537 ;}
</ style >
</ head >
< body >
< table border = " 1 " align = " center " style = " height:100px;width:100% " />
< tr style = " width:100%; " >
< td colspan = " 4 " >
< div type = " text " value = "" style = " height:170px;width:100%;background:#000;
border:1px solid #000;position:relative; " >
< div id = " display_num " style = " color:#fff;width:390px;height:100px;
position:absolute;top:4rem;font-size:7rem;text-align:right;padding-right:5px; " >0</ div ></ div >
</ td >
</ tr >
< tr >
< td >
< input type = " button " value = " AC " id = " AC " onclick = " changeText() "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >

</ td >
< td >
< input type = " button " id = " add " value = " +/- " onclick = " onclicknum(+/-) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >
</ td >
< td >
< input type = " button " id = " percentum " value = " % " onclick = " onclicknum(%) "
style = " height:100px;width:100px;font-size:50px;border:0px;color:#646466; " >
</ td >
< td >
< input type = " button " id = " division " value = " ÷ " onclick = " onclicknum(÷) "
style = " height:100px;width:100px;;font-size:50px;border:1px;background:#ff9200;color:#fff; " >
</ td >
</ tr >

< tr style = " width:100%; " >
< td >
< input type = " button " value = " 7 " id = " num7 " onclick = " onclicknum(7) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >

</ td >
< td >
< input type = " button " id = " num8 " value = " 8 " onclick = " onclicknum(8) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >
</ td >
< td >
< input type = " button " id = " num9 " value = " 9 " onclick = " onclicknum(9) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >
</ td >
< td >
< input type = " button " id = " multiplication " value = " × " onclick = " onclicknum(x) "
style = " height:100px;width:100px;font-size:50px;border:1px;background:#ff9200;color:#fff; " >
</ td >
</ tr >
< tr >
< td >
< input type = " button " value = " 4 " id = " num4 " onclick = " onclicknum(4) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >

</ td >
< td >
< input type = " button " id = " num5 " value = " 5 " onclick = " onclicknum(5) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >
</ td >
< td >
< input type = " button " id = " num6 " value = " 6 " onclick = " onclicknum(6) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >
</ td >
< td >
< input type = " button " id = " minus " value = " - " onclick = " onclicknum(-) "
style = " height:100px;width:100px;font-size:50px;border:1px;background:#ff9200;color:#fff; " >
</ td >
</ tr >
< tr >
< td >
< input type = " button " id = " num1 " value = " 1 " onclick = " onclicknum(1) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >

</ td >
< td >
< input type = " button " id = " num2 " value = " 2 " onclick = " onclicknum(2) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >
</ td >
< td >
< input type = " button " id = " num3 " value = " 3 " onclick = " onclicknum(3) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >
</ td >
< td >
< input type = " button " id = " plus—sign " value = " + " onclick = " onclicknum(+) "
style = " height:100px;width:100px;font-size:50px;border:1px;background:#ff9200;color:#fff; " >
</ td >
</ tr >
< tr >
< td colspan = " 2 " >
< input type = " button " value = " 0 " id = " num0 " onclick = " onclicknum(0) "
style = " height:100px;width:200px;font-size:50px;border:1px;color:#646466; " >

</ td >
< td >
< input type = " button " id = " dot " value = " . " onclick = " onclicknum(dot) "
style = " height:100px;width:100px;font-size:50px;border:1px;color:#646466; " >
</ td >
< td >
< input type = " button " id = " equal " value = " = " onclick = " onclicknum(=) "
style = " height:100px;width:100px;font-size:50px;border:1px;background:#ff9200;color:#fff;
" >
</ td >
</ tr >
</ table >

< script >

function onclicknum ( num ){
var display = document. getElementById ( ' display_num ' );
var dot =document. getElementById ( ' dot ' );
if ( num == 0 ){
// 如果num 等于0；
if ( display . innerHTML == 0 ){
//如果文本框中输出值为0；
display . innerHTML = 0 ;
}
else {
//如果输出不为0时，那么显示的就是文本框的内容+所选中的数字相结合；
var a = display . innerHTML + num ;
display . innerHTML = a ;
}
} //否则如果num大于零
else if ( num > 0 ){
//如果文本框输出内容等于零，输出的内容为0；
if ( display . innerHTML == 0 )
{
var a = num ;
}
else
{
//如果num大于零 。文本框输出为数字跟数字想结合
var a = ( display . innerHTML + num );
}
//输出我们设定好a的显示模式
display . innerHTML = a ;
}
};
function changeText (){
//点击按钮AC，清楚文本框的内容，最终显示为0
document. getElementById ( ' display_num ' ). innerHTML = 0
};
</ script >
</ body >
</ html >
Ailsa-show
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS制作计算器
04-25
关于用于JS的如何制作计算器，这里面有关于制作计算器的代码！
js代码做计算器
Anansoul的博客
01-07 2139
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;script type="text/javascript"&gt; window.on
js制作简单的计算器
weixin_44189739的博客
01-25 1133
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 语法： eval(string)； &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;
js制作简易计算器
wwwwwwzzz的博客
06-13 265
js简易计算器
原生JavaScript制作计算器
10-21
原生JavaScript制作计算器知识点解析： JavaScript是一种高级的、解释执行的编程语言，被广泛用于网页开发中，提供用户与网页内容之间的动态交互。使用原生JavaScript，开发者可以实现无需依赖任何外部库或框架即可...
用javascript制作简单计算器.html
05-12
学习了javascript ，这个代码是使用javascript来做一个简单的计算器，可以实现简单的额加减乘除的计算
JavaScript简易计算器制作
10-15
JavaScript简易计算器制作是一个基础的前端开发实践项目，它涉及到HTML、CSS和JavaScript的结合使用，以实现简单的数学运算。在这个项目中，我们将学习如何利用JavaScript处理用户交互，并进行基本的算术运算。 ...
纯javascript制作的简单js计算器效果.zip
11-20
【标题】"纯javascript制作的简单js计算器效果.zip"是一个包含使用JavaScript编程语言实现的简易计算器项目的压缩包。这个项目可能是一个教学资源或者一个初学者的实践作品，它展示了如何利用JavaScript的基本语法和...
js制作简单计算器
08-19
用的时候还需要下载个jqury框架，里面不但有计算器实现的js方法，js的一些字符验证方法！挺实用的！
js制作的简单小计算器
08-15
这是js制作的一个简单小计算器，希望js的亲们会喜欢
一个用JS做的简易计算器
05-06
一个用JS做的简易计算器,不是很完整，有兴趣的朋友可扩展一下
JavaScript: 制作简单计算器
linwh8的博客
10-05 1443
效果图如下：下面来讲讲我的思路： 简单的说就是利用HTML与CSS制作出一个计算器的外观，然后通过js来实现用户与计算器之间的交互，进而实现简单的计算。对于HTML： According to semantic HTML, I use <bottom>to represent every button, using <input> to display the result.对于CSS: I
今天我教大家用js制作一个简单的计算器
m0_74848535的博客
11-10 235
简单利用js实现计算器效果
js做一个简单的计算器
2201_75705263的博客
04-02 1023
js；css； html
js做一个简单计算器
yuanerma的博客
04-08 3183
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=\, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib...
JavaScript实现一个计算器
Char_n的博客
08-02 5264
JavaScript写一个计算器 Happy coding. 废话不多说直接上代码。 JavaScript写一个计算器 效果：传送门 HTML代码 CSS代码 JS代码 效果：传送门 HTML代码 html代码并没有什么好讲的；其中比较重要的点就是根据每个button的name中的值来区别一些特别的操作，比如平方、开根号等等，然后为了更好的用户体验，...
Js实现计算器
Venus_cai的博客
10-31 454
js实现网页简单计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
js实现计算器
PointerIsSoul的博客
07-09 198
使用js写的计算器 代码如下： <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .panel { border: 4px solid #ddd; width: 192px; margin: 100px auto; /*border-radius: 6px;*/ } .panel p, .panel in
HTML和js制作计算器
最新发布
04-27
可以使用HTML和JavaScript来制作一个简单的计算器。以下是一个示例代码： HTML代码： ``` <!DOCTYPE html> 计算器 <script src="calculator.js"> 计算器 <br> ('1')">1 ('2')">2 ('3')">3 ('+')...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值