当前位置: 首页 > 编程笔记 >

基于html+css+js实现简易计算器代码实例

王扬
2023-03-14
本文向大家介绍基于html+css+js实现简易计算器代码实例,包括了基于html+css+js实现简易计算器代码实例的使用技巧和注意事项,需要的朋友参考一下

使用html+css+js实现简易计算器,

效果图如下:

html代码如下

<!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-UA-Compatible" content="ie=edge">
  <title>calculator</title>
  <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
  <script type="text/javascript" src="contain.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="calculator">
  <form name="calculator">
    <input type="text" id="display" value="">
      <br>
    <input type="button" class="btn number txt" value="TYNAM">
    <input type="button" id="clear" class="btn number" value="AC" onclick="cleardisplay();">
    <input type="button" class="btn number" value="<-" onclick="del();">
    <input type="button" class="btn operator" value="/" onclick="get(this.value);">
      <br>
    <input type="button" class="btn number" value="7" onclick="get(this.value);">
    <input type="button" class="btn number" value="8" onclick="get(this.value);">
    <input type="button" class="btn number" value="9" onclick="get(this.value);">
    <input type="button" class="btn operator" value="*" onclick="get(this.value);">
      <br>
    <input type="button" class="btn number" value="4" onclick="get(this.value);">
    <input type="button" class="btn number" value="5" onclick="get(this.value);">
    <input type="button" class="btn number" value="6" onclick="get(this.value);">
    <input type="button" class="btn operator" value="+" onclick="get(this.value);">
      <br>
    <input type="button" class="btn number" value="1" onclick="get(this.value);">
    <input type="button" class="btn number" value="2" onclick="get(this.value);">
    <input type="button" class="btn number" value="3" onclick="get(this.value);">
    <input type="button" class="btn operator" value="-" onclick="get(this.value);">
      <br>
    <input type="button" class="btn number" value="0" onclick="get(this.value);">
    <input type="button" class="btn number" value="." onclick="get(this.value);">
    <input type="button" class="btn operator equal" value="=" onclick="calculates();">
  </form>
  </div> 
</body>
</html>

CSS代码如下:

* {
  border: none;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

.calculator {
  background-color: #fff;
  height: 600px;
  margin: 50px auto;
  width: 600px;
}

form {
  background-color: rgb(75, 70, 71);
  padding: 5px 1px auto;  
  width: 245px;
}
.btn {
  outline: none;
  cursor: pointer;
  font-size: 20px;
  height: 45px;
  margin: 5px 0 5px 10px;
  width: 45px;
  
}
.btn:first-child {
  margin: 5px 0 5px 10px;
}

#display {
  outline: none;
  background-color: #dededc;
  color: rgb(75, 70, 71);
  font-size: 40px;
  height: 47px;
  text-align: right;
  width: 224px;
  margin: 10px 10px auto;
}
.number {
  background-color: rgb(143, 140, 140);
  color: #dededc;
}

.operator {
  background-color: rgb(239, 141, 49);
  color: #ffffff;
}

.equal{
  width: 105px;
}

.txt{
  font-size:12px;
  background: none;
}

JS代码如下:

/* display clear */ 
function cleardisplay() {
  document.getElementById("display").value = "";
}

/* del */
function del() {
  var numb = "";
  numb = document.getElementById("display").value;
  for(i=0;i<numb.length;i++)
  {
    document.getElementById("display").value = numb.substring(0,numb.length-1);
    if(numb == '')
    {
      document.getElementById("display").value = '';
    }
  }
} 

/* recebe os valores */
function get(value) {
  document.getElementById("display").value += value; 
} 

/* calcula */
function calculates() {
  var result = 0;
  result = document.getElementById("display").value;
  document.getElementById("display").value = "";
  document.getElementById("display").value = eval(result);
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍简易的JS计算器实现代码,包括了简易的JS计算器实现代码的使用技巧和注意事项,需要的朋友参考一下 看看手机中的计算器,分为普通计算器和科学计算器  自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能) 看看图示效果: 一、知识准备 1+1 = ? 正常来说,我们看到这个表达式都知道怎么运算,知道运算结果 但计算机不一样,计算机无法识别出这串表达

  • 本文向大家介绍JS实现简易计算器,包括了JS实现简易计算器的使用技巧和注意事项,需要的朋友参考一下 用JS实现简易计算器,供大家参考,具体内容如下 首先创建结构和样式 然后添加Java script 代码的优化: 循环实现绑定 给一个外部接口,用于新增运算 这样就圆满完成咯 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍javascript实现简易计算器的代码,包括了javascript实现简易计算器的代码的使用技巧和注意事项,需要的朋友参考一下 今天闲来无聊,想写点什么,突然想到用javascript写一个计算器。程序还存在很多的Bug,先在这里记录一下,以后慢慢更正。 代码如下: 以上这篇javascript实现简易计算器的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多

  • 本文向大家介绍纯js代码实现简单计算器,包括了纯js代码实现简单计算器的使用技巧和注意事项,需要的朋友参考一下 本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢。具体如下: 运行效果截图如下: 具体代码如下: 复制粘贴上方代码即可实现简单的计算器功能,希望本文所述对大家学习javascript程序设计有所帮助。

  • 本文向大家介绍Vue实现简易计算器,包括了Vue实现简易计算器的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Vue实现简易计算器的具体代码,供大家参考,具体内容如下 效果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Javascript 实现简单计算器实例代码,包括了Javascript 实现简单计算器实例代码的使用技巧和注意事项,需要的朋友参考一下 效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵。 代码: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!