JavaScript
搜索
分类

javascript实现编写网页版计算器

作者：小白变怪兽 时间：2024-04-23 09:26:25　

本篇主要记录的是利用javscript实现一个网页计算器的效果，供大家参考，具体内容如下

话不多说，代码如下：

首先是html的代码：


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>利用js实现网页版计算器</title>
   <link rel="stylesheet" href="cal.css" >
</head>
<body>
<div id="container" class="container">
   <input id="result" class="result">
   <div id="cal" class="clearfix">
       <div id="num" class="fl">
           <div id="top" class="clearfix">
               <input id="clear" type="button" value="C">
               <input id="antonyms" type="button" value="+/-">
               <input id="remainder" type="button" value="％">
           </div>
           <div id="bonttom" class="clearfix">
               <input type="button" value="7">
               <input type="button" value="8">
               <input type="button" value="9">
               <input type="button" value="4">
               <input type="button" value="5">
               <input type="button" value="6">
               <input type="button" value="1">
               <input type="button" value="2">
               <input type="button" value="3">
               <input class="zero" type="button" value="0">
               <input type="button" value=".">
           </div>
       </div>
       <div id="math" class="fr math">
           <input type="button" value="/" onclick="onclicknum('/')">
           <input type="button" value="＊" onclick="onclicknum('*')">
           <input type="button" value="＋" onclick="onclicknum('+')">
           <input type="button" value="－" onclick="onclicknum('-')">
       </div>
       <input id="res" type="button" value="＝">
   </div>
</div>
</body>
</html>

接下来是css样式代码：


* {
   margin: 0px;
   padding: 0px;
}

.clearfix:before, .clearfix:after {
   content: '';
   display: block;
}

.clearfix:after {
   clear: both;
}

.clearfix {
   _zoom: 1;
}

input {
   display: block;
}

.container {
   width: 240px;
   height: 400px;
   border: 2px solid #eb4509;
   margin: 100px auto;
}

.fl {
   float: left;
}

.fr {
   float: right;
}

input {
   width: 60px;
   height: 60px;
   border: 1px solid #000;
   float: left;
   background: #ddd;
   font-size: 24px;
   color: #eb4509;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.math input {
   float: none;
}

input.zero {
   width: 120px;
}

#num {
   width: 180px;
}

#cal #math {
   width: 60px;
}

.result {
   width: 100％;
   height: 100px;
   line-height: 100px;
   border: none;
   background-color: #dfdfdf;
   font-size: 30px;
   float: none;
   outline: none;
   text-align: right;
   padding-right: 20px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

最后上js代码：


<script type="text/javascript">
   var numresult;
   var str;

var flag;
   var bot = document.getElementById("bonttom");
   var botInputs = bot.getElementsByTagName("input");
   var clear = document.getElementById("clear");
   var res = document.getElementById("res");
   var math = document.getElementById("math");
   var mathInputs = math.getElementsByTagName("input");
   var antonymsBtn = document.getElementById("antonyms");
   var remainderBtn = document.getElementById("remainder");

//点击数字以及加减乘除
   imporIn(botInputs);
//    imporIn(mathInputs);

function imporIn(eles) {
       for (var i = 0; i < eles.length; i++) {
           eles[i].onclick = function () {
               onclicknum(this.value);
           }
       }
   }

//点击清空c按钮
   clear.onclick = function () {
       onclickclear();
   }

//点击＝号得到结果
   res.onclick = function () {
       onclickresult();
   }

//点击＋／－
   antonymsBtn.onclick = function () {
       antonyms();
   }

//点击％
   remainderBtn.onclick = function () {
       remainder();
   }

function onclicknum(nums) {
       if (flag) {
           console.log("num=" + nums);
           if (nums !== "/" && nums !== "+" && nums !== "-" && nums !== "*") {
               str.value = "";

console.log("aa" + nums);
           }
       }
       flag = false;
       str = document.getElementById("result");
       str.value = str.value + nums;
   }

//清空
   function onclickclear() {
       str = document.getElementById("result");
       str.value = "";
   }

//得到结果
   function onclickresult() {
       str = document.getElementById("result");
       numresult = eval(str.value);
       str.value = numresult;
       flag = true;
   }

//正负数
   function antonyms() {
       str = document.getElementById("result");
       str.value = -str.value;
   }

//％
   function remainder() {
       str = document.getElementById("result");
       str.value = str.value / 100;
   }
</script>

来源：https://blog.csdn.net/u013558749/article/details/53003127

标签：js,计算器
0
投稿

猜你喜欢

  • 将pytorch的网络等转移到cuda

    2023-08-10 08:33:46

  • 详解Python中的变量及其命名和打印

    2023-07-23 11:31:45

  • python os.stat()如何获取相关文件的系统状态信息

    2022-06-18 09:28:23

  • python3 深浅copy对比详解

    2023-11-08 11:12:51

  • Pytorch实现简单自定义网络层的方法

    2021-01-13 16:02:55

  • mysql重装后出现乱码设置为utf8可解决

    2024-01-27 04:39:35

  • Tensorflow的梯度异步更新示例

    2022-10-04 15:08:23

  • TensorFlow查看输入节点和输出节点名称方式

    2022-11-27 04:50:11

  • MySql存储过程和游标的使用实例

    2024-01-13 09:50:11

  • Asp中如何快速分页的技巧

    2008-05-17 12:02:00

  • python实现simhash算法实例

    2023-11-02 23:26:30

  • Go语言单链表实现方法

    2024-02-14 15:46:45

  • 如何防止未经注册的用户绕过注册界面直接进入应用系统？

    2009-11-22 19:22:00

  • 用 Python 绘制全国鸿星尔克门店分布图

    2022-03-07 11:26:12

  • 在Python中操作字符串之replace()方法的使用

    2021-03-15 14:10:59

  • php利用反射实现插件机制的方法

    2024-05-13 09:20:48

  • python内打印变量之％和f的实例

    2021-06-19 07:46:46

  • 防盗链接ASP函数

    2011-03-07 11:02:00

  • Python文件时间操作步骤代码详解

    2022-02-17 03:26:25

  • Django利用AJAX技术实现博文实时搜索

    2023-01-02 01:57:50
    • asp之家 网络编程 m.aspxhome.com