码迷,mamicode.com
首页 > Web开发 > 详细

利用事件冒泡实现简单的网页计算器

时间:2017-04-21 20:25:17      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:script   cas   resize   var   key   计算   case   利用   innerhtml   

 

 效果:

技术分享

代码:

 

<!DOCTYPE HTML>
<html>
    <head>
        <title>取消与利用冒泡</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        <div id="keys">
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button><br>
            <button>C</button>
            <button>+</button>
            <button>-</button>
            <button>=</button>
        </div>
        <textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea>
    <script>
      var sc=
        document.getElementById("sc");
            document.getElementById("keys")
                .addEventListener("click",
                function(e){
          if(e.target.nodeName=="BUTTON"){
            switch(e.target.innerHTML){
              case "C":
                sc.value="";
                break;
              case "=":
                sc.value=eval(sc.value);
                break;
              default:
                sc.value+=
                  e.target.innerHTML;
            }
          }

                }
            );
        </script>
    </body>
</html>

 

利用事件冒泡实现简单的网页计算器

标签:script   cas   resize   var   key   计算   case   利用   innerhtml   

原文地址:http://www.cnblogs.com/web-fusheng/p/6745143.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!