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

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

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>

* { 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制作简易计算器的代码，对于初学者来说可能有一定的难度，不用担心，把基础知识学扎实以后，相信你很容易理解的，希望这篇文章对你有所帮助！
【相关教程推荐】
1. JavaScript中文参考手册
2. CSS3教程
3. bootstrap教程
以上就是如何用HTML+CSS+JavaScript制作简易计算器的详细内容，更多请关注php中文网其它相关文章！				
				
					微信
					分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  关键词：如何用HTML+CSS+JavaScript制作简易计算器