计算器-时间冒泡--事件源

最新推荐文章于 2024-09-23 22:59:29 发布

荒--

最新推荐文章于 2024-09-23 22:59:29 发布

阅读量617

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB基础

本文链接：https://blog.youkuaiyun.com/wangqing84411433/article/details/70665882

WEB基础专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript创建的简易计算器项目。该计算器具备基本的数学运算功能，包括加、减、乘、除及清屏操作。通过简单的用户界面，用户可以输入数值并进行计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>计算器</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .panel {
        border: 4px solid #ddd;
        width: 192px;
        margin: 100px auto;
        /*border-radius: 6px;*/
      }
      .panel p, .panel input {
        font-family: "微软雅黑";
        font-size: 20px;
        margin: 4px;
        float: left;
        /*border-radius: 4px;*/
      }
      .panel p {
        width: 122px;
        height: 26px;
        border: 1px solid #ddd;
        padding: 6px;
        overflow: hidden;
      }
      .panel input {
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
    	var div = document.getElementById("d1");
    	//获取事件源(input\p\div)
    	div.onclick = function(e){
    	  var ele = e.srcElement || e.target;//(input div p)
    	  //获取事件源中的input,节点名都是大写,类型都为string
    	  if(ele.nodeName == "INPUT"){
    		//获取事件源的值value
    		var v = ele.value;
    		var p = document.getElementById("screen");
   		    if(v == "C"){
   		      //清空
       		  p.innerHTML = "";
       	    }else if(v == "="){
       	     //计算	
       		  try{
       			var n = eval("("+p.innerHTML+")"); 
       			p.innerHTML = n;
       		  }catch(Execption){
       			p.innerHTML = "ERROR";  
       		  }
       	    }else{//+、-、/、*
       		  //累加
       	      p.innerHTML += v;
       	    }  
    	  }
    	} 
      }
    </script>
  </head>
  <body>
    <div class="panel" id="d1">
      <div>
        <p id="screen"></p>
        <input type="button" value="C">
        <div style="clear:both"></div>
      </div>
      <div>
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="/">
        
        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="*">
        
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="-">
        
        <input type="button" value="0">
        <input type="button" value=".">
        <input type="button" value="=">
        <input type="button" value="+">
        
        <div style="clear:both"></div>
      </div>
    </div>    
  </body>
</html>