脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → html css js计算器

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

 更新时间：2020年02月28日 15:14:58   作者：Tynam.Yang  
这篇文章主要介绍了基于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);
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript实现前端网页版倒计时

    JavaScript实现前端网页版倒计时

    这篇文章主要为大家详细介绍了JavaScript实现前端网页版倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 关于JS中一维数组和二维数组互转问题

    关于JS中一维数组和二维数组互转问题

    这篇文章主要介绍了js中一维数组和二维数组互转,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04
  • js类中的公有变量和私有变量

    js类中的公有变量和私有变量

    实例分析js类中的公有和私有变量
    2008-07-07
  • 使用webpack和rollup打包组件库的方法

    使用webpack和rollup打包组件库的方法

    这篇文章主要介绍了使用webpack和rollup打包组件库的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • 详解JS实现系统登录页的登录和验证

    详解JS实现系统登录页的登录和验证

    这篇文章主要介绍了JS实现系统登录页的登录和验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 浅谈es6语法 (Proxy和Reflect的对比)

    浅谈es6语法 (Proxy和Reflect的对比)

    下面小编就为大家带来一篇浅谈es6语法 (Proxy和Reflect的对比)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • javascript中如何处理引号编码&#034;

    javascript中如何处理引号编码&#034;

    本文为大家介绍下javascript中如何处理引号编码，具体如下，感兴趣的朋友可以参考下
    2013-08-08
  • JS装饰者模式和TypeScript装饰器

    JS装饰者模式和TypeScript装饰器

    学习的目的是对装饰者模式模式有进一步的理解，并运用在自己的项目中；对TypeScript装饰器的理解，更好的使用装饰器，例如在nodejsweb框架中、vue-property-decorator中，或者是自定义装饰器，能熟练运用并掌握其基本的实现原理。
    2021-04-04
  • webpack中的热刷新与热加载的区别

    webpack中的热刷新与热加载的区别

    本篇文章主要介绍了webpack中的热刷新与热加载的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • JS实现远程控制的基本原理和实现方法

    JS实现远程控制的基本原理和实现方法

    远程控制是指通过网络等远距离通讯手段控制另一设备的操作行为，在现实生活中，随着物联网技术的不断发展，远程控制技术越来越重要，本文将详细介绍 JS 实现远程控制的基本原理、开发流程和实现方法,需要的朋友可以参考下
    2023-06-06

最新评论