简单的在线计算器

最新推荐文章于 2020-07-02 10:19:02 发布

weixin_30715523

最新推荐文章于 2020-07-02 10:19:02 发布

阅读量98

点赞数

原文链接：http://www.cnblogs.com/zjm-html5/p/5987919.html

版权

先来看一下效果图

样式随意，本人是新手，有些地方可能不太完善，写下这个随笔，方便自己以后参考

html代码：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在线计算器</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .whole{
            width: 330px;
            height: 390px;
            background-color: paleturquoise;
            margin: 0px auto;
            padding-left: 20px;
        }
        h4{
            padding: 20px 0px;
        }
        input{
            width: 310px;
            height: 40px;
        }
        #content{
            border: 1px solid white;
            width: 310px;
            height: 250px;
            margin-top: 20px;
            background-color: paleturquoise ;
        }
        ul{
            list-style-type: none;
            width: auto;
            height: 50px;
            margin-top: 10px;
        }
        li{
            float: left;
            width: 50px;
            height: 50px;
            background-color: darkturquoise ;
            margin-left: 10px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
    </style>
    <script src="js.js"></script>
</head>
<body>
   <div class="whole">
       <h4>简单计算器</h4>
       <input type="text" value="" id="text">
       <div id="content">
           <ul>
               <li>7</li>
               <li>8</li>
               <li>9</li>
               <li id="back">←</li>
               <li id="clear">C</li>
           </ul>
           <ul>
               <li>4</li>
               <li>5</li>
               <li>6</li>
               <li>*</li>
               <li>/</li>
           </ul>
           <ul>
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>+</li>
               <li>-</li>
           </ul>
           <ul>
               <li>0</li>
               <li>00</li>
               <li>.</li>
               <li>%</li>
               <li id="btn">=</li>
           </ul>
       </div>
   </div>
</body>
</html>

js代码：

window.onload = function () {
    var li = document.getElementsByTagName("li");
    var text = document.getElementById("text");

    for(var i = 0;i < li.length;i++){
        li[i].onclick = function(){
                text.value =text.value + this.innerHTML;//获取li的值
        }
    }
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        text.value = eval(text.value);
    }
    var clear = document.getElementById("clear");
    clear.onclick = function(){
        text.value = null;
    }
    var back = document.getElementById("back");
    back.onclick = function(){
        text.value = text.value.substring(0, text.value.length - 1);
    }
}

转载于:https://www.cnblogs.com/zjm-html5/p/5987919.html

weixin_30715523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的在线计算器

先来看一下效果图样式随意，本人是新手，有些地方可能不太完善，写下这个随笔，方便自己以后参考html代码：<html><head lang="en"> <meta charset="UTF-8"> <title>在线计算器</title> <style> *{ ...
复制链接

扫一扫