机试html+js简易计算器

最新推荐文章于 2023-08-31 15:17:42 发布

__Daniel

最新推荐文章于 2023-08-31 15:17:42 发布

阅读量804

点赞数 1

分类专栏：练习文章标签： javascript html function web

本文链接：https://blog.csdn.net/u013291076/article/details/40090069

版权

练习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>demo-cal</title>
	<meta name="author" content="lenovo" />
	<style>
    * {
      margin:0;padding:0;
    }
    #txtContains {
      width:500px;
      height:80px;
      margin:0 auto;
    }
	  #txt {
	    width:475px;
	    height:60px;
	    font-size:35px;  
	  }
	  #btnContains {
	    width:500px;
	    margin:0 auto;
	  }
	  input[type=button] {
	    width:100px;
	    height:60px;
	    font-size:35px;
	    margin:0 auto;
	  }
	</style>
	<!-- Date: 2014-10-15 -->
</head>
<body>
  <div id="txtContains"><input id="txt" type="text" placeholder="cal"></div>
  <table id="btnContains">
    <tr>
      <td><input id="btn1" type="button" value="1" οnclick="showValue(this);"></td>
      <td><input id="btn2" type="button" value="2" οnclick="showValue(this);"></td>
      <td><input id="btn3" type="button" value="3" οnclick="showValue(this);"></td>
      <td><input id="btn+" type="button" value="+" οnclick="showValue(this);"></td>
    </tr>
    <tr>
      <td><input id="btn4" type="button" value="4" οnclick="showValue(this);"></td>
      <td><input id="btn5" type="button" value="5" οnclick="showValue(this);"></td>
      <td><input id="btn6" type="button" value="6" οnclick="showValue(this);"></td>
      <td><input id="btn-" type="button" value="-" οnclick="showValue(this);"></td>
    </tr>
    <tr>
      <td><input id="btn7" type="button" value="7" οnclick="showValue(this);"></td>
      <td><input id="btn8" type="button" value="8" οnclick="showValue(this);"></td>
      <td><input id="btn9" type="button" value="9" οnclick="showValue(this);"></td>
      <td><input id="btn*" type="button" value="*" οnclick="showValue(this);"></td>
    </tr>
    <tr>
      <td><input id="btnClear" type="button" value="c" οnclick="valueClear();"></td>
      <td><input id="btn0" type="button" value="0" οnclick="showValue(this);"></td>
      <td><input id="btnResult" type="button" value="=" οnclick="valueResult();"></td>
      <td><input id="btn/" type="button" value="/" οnclick="showValue(this);"></td>
    </tr>
  </table>
  <script>
    function showValue(obj){
      document.getElementById("txt").value+=obj.value;
    }
    
    function valueResult(){
      var obj=document.getElementById("txt").value;
      if(obj.indexOf("=")<0){
        document.getElementById("txt").value+="="+eval(obj);
      }
    }
    
    function valueClear(){
      document.getElementById("txt").value="";
    }
  </script>
</body>
</html>

__Daniel

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
机试html+js简易计算器

"http://www.w3.org/TR/html4/strict.dtd"> demo-cal * { margin:0; padding:0; } table { width:500px; margin:0 aut
复制链接

扫一扫