如何用HTML+CSS+JavaScript制作简易计算器

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

JavaScript是前端开发中必不可少的一部分,因为页面功能的实现离不开JS,作为一个前端开发人员,你会用JavaScript制作一个简易计算器吗?这篇文章就给大家讲讲如何用HTML、CSS、JavaScript制作一个简易计算器,并且能够实现加减乘除的功能,有一定的参考价值,感兴趣的朋友可以看看。

制作一个简单的计算器需要用到很多CSS属性、HTML标签和JavaScript知识,如有不清楚的同学可以参考PHP中文网的相关文章,或者访问 JavaScript视频教程 ,希望对你有所帮助。

实例描述:用HTML和CSS搭建页面,用JavaScript实现加减乘除的功能,当点击清零时,输入框没有值,当点击“=”时,显示计算结果,具体代码如下:

HTML部分:

<div class="center">    <h1>计算器</h1>       <form name="calculator">     <input type="button" id="clear" class="btn other" value="C">     <input type="text" id="display">      <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 operator" value="." onclick="get(this.value);">     <input type="button" class="btn operator" value="/" onclick="get(this.value);">        <input type="button" class="btn other" value="=" onclick="calculates();">    </form>   </div>

CSS部分:

* {     border: none;     font-family: 'Open Sans', sans-serif;     margin: 0;     padding: 0;    }       .center {     background-color: #fff;     border-radius: 50%;     height: 600px;     margin: auto;     width: 600px;    }    h1 {     color: #495678;     font-size: 30px;      margin-top: 20px;     padding-top: 50px;     display: block;     text-align: center;    }       form {     background-color: #495678;     margin: 40px auto;     padding: 40px 0 30px 40px;      width: 280px;    }    .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;    }    .btn, #display, form {     border-radius: 25px;    }    #display {     outline: none;     background-color: #98d1dc;     color: #dededc;     font-size: 20px;     height: 47px;     text-align: right;     width: 165px;     padding-right: 10px;     margin-left: 10px;    }    .number {     background-color: #72778b;     color: #dededc;    }    .number:active {       -webkit-transform: translateY(2px);       -ms-transform: translateY(2px);       -moz-tranform: translateY(2px);       transform: translateY(2px);    }    .operator {     background-color: #dededc;     color: #72778b;    }    .operator:active {       -webkit-transform: translateY(2px);       -ms-transform: translateY(2px);       -moz-tranform: translateY(2px);       transform: translateY(2px);    }    .other {     background-color: #e3844c;     color: #dededc;    }    .other:active {       -webkit-transform: translateY(2px);       -ms-transform: translateY(2px);       -moz-tranform: translateY(2px);       transform: translateY(2px);    }

JavaScript部分:

/* limpa o display */    document.getElementById("clear").addEventListener("click", function() {    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);   };

效果如图所示:

如何用HTML+CSS+JavaScript制作简易计算器

以上给大家分享了HTML、CSS和JavaScript制作简易计算器的代码,对于初学者来说可能有一定的难度,不用担心,把基础知识学扎实以后,相信你很容易理解的,希望这篇文章对你有所帮助!

【相关教程推荐】

1. JavaScript中文参考手册
2. CSS3教程
3. bootstrap教程

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 如何用HTML+CSS+JavaScript制作简易计算器

发表评论

提供最优质的资源集合

立即查看 了解详情