分类目录

链接

友情链接

统计信息

  • 日志总数:114篇
  • 评论总数:185条
  • 分类总数:11个
  • 标签总数:391个
  • 友情链接:0个
  • 网站运行:3177天

2019年八月
« 3月    
 1234
567891011
12131415161718
19202122232425
262728293031  
>
现在位置:    首页 > javascript > 正文

javascript/js 计算器

javascript 暂无评论

用js(源生javascript)写一个计算器,效果如下图:

代码如下:

<script type="text/javascript">
    function calcutor(){
        var showX='';
        this.curentStr='';
        this.init();
        }
        
    calcutor.prototype={
        init:function(){
        //creat container
           var container = document.createElement('div');
           container.id='container';
           container.style.width='200px';
           container.style.height='300px';
           container.style.backgroundColor='#333';
           container.style.padding='5px';
           container.style.position='relative';
           document.body.appendChild(container);
        //create led show zon;
            var showX = document.createElement('div');
            showX.style.backgroundColor='#FFF';
            showX.style.width='200px';
            showX.style.textAlign='right';
            showX.style.overflow='hidden';
            showX.style.position='relative';
            showX.style.top='5px';
            showX.style.height='30px';
            showX.style.lineHeight='30px';
            this.showX=showX;
            container.appendChild(showX);
        //生成数字键容器
            var numberZoon = document.createElement('div');
            //numberZoon.style.position='absolute';
            numberZoon.style.top='50px';
            numberZoon.style.width='145px';
            numberZoon.style.marginTop='20px';
            numberZoon.style.height='188px';
            numberZoon.style.marginLeft='3px';
            numberZoon.style.backgroundColor='#f1f1f1';
            container.appendChild(numberZoon);
        //生成数字键
            var j=1;
            for(var i=0;i<10;i++){
                var span = document.createElement('span');
                span.style.lineHeight='35px';
                span.setAttribute('onclick','c.clickBtn(this)');
                span.style.cursor='pointer';
                span.style.display='inline-block';
                span.style.width='45px';
                span.style.height='45px';
                span.style.textAlign='center';
                span.innerHTML=i;
                //span.style.margin='10px';
                span.style.marginLeft='0px';
                span.style.border='solid 1px #FFF';
                numberZoon.appendChild(span);
                if((j%3)==0){
                  //换行
                 var br= document.createElement('br');
                 numberZoon.appendChild(br);
                }
                j++;
                if(i==9){
                var span = document.createElement('span');
                span.innerHTML='0';
                span.style.cursor='pointer';
                span.style.lineHeight='35px';
                span.setAttribute('onclick','c.clickBtn(this)');
                span.style.border='solid 1px #FFF';
                span.style.display='inline-block';
                span.style.textAlign='center';
                span.style.width='45px';
                span.style.height='45px';
                numberZoon.appendChild(span);
                
                var span = document.createElement('span');
                span.innerHTML='.';
                span.style.cursor='pointer';
                span.style.lineHeight='35px';
                span.style.textAlign='center';
                span.setAttribute('onclick','c.clickBtn(this)');
                span.style.border='solid 1px #FFF';
                span.style.display='inline-block';
                span.style.width='45px';
                span.style.height='45px';
                numberZoon.appendChild(span);
                
                var br= document.createElement('br');
                numberZoon.appendChild(br);
                
                var span = document.createElement('span');
                span.innerHTML='C';
                span.style.cursor='pointer';
                
                span.style.lineHeight='35px';
                span.style.textAlign='center';
                span.setAttribute('onclick','c.clear()');
                span.style.border='solid 1px #FFF';
                span.style.display='inline-block';
                span.style.width='45px';
                span.style.height='45px';
                span.style.backgroundColor='#f1f1f1';
                numberZoon.appendChild(span);
                
                }
                
            }
            //生成 操作运算符
                var ysArea=document.createElement('div');
                ysArea.style.width='41px';
                ysArea.style.backgroundColor='#f1f1f1';
                ysArea.style.height='196px';
                ysArea.style.position='absolute';
                ysArea.style.top='55px';
                ysArea.style.padding='2px';
                ysArea.style.left='158px';
                numberZoon.appendChild(ysArea);    
                var jia=document.createElement('div');
                jia.innerHTML='+';
                jia.style.textAlign='center';
                jia.style.lineHeight='35px';
                jia.style.cursor='pointer';
                jia.setAttribute('onclick','c.clickBtn(this)');
                jia.style.border='solid 1px #f1f1f1';
                ysArea.appendChild(jia);
                var jia=document.createElement('div');
                jia.innerHTML='-';
                jia.style.textAlign='center';
                jia.style.lineHeight='35px';
                jia.style.cursor='pointer';
                jia.setAttribute('onclick','c.clickBtn(this)');
                jia.style.border='solid 1px #f1f1f1';
                ysArea.appendChild(jia);
                var jia=document.createElement('div');
                jia.innerHTML='*';
                jia.style.textAlign='center';
                jia.style.lineHeight='35px';
                jia.style.cursor='pointer';
                jia.setAttribute('onclick','c.clickBtn(this)');
                jia.style.border='solid 1px #f1f1f1';
                ysArea.appendChild(jia);
                var jia=document.createElement('div');
                jia.innerHTML='/';
                jia.style.textAlign='center';
                jia.style.lineHeight='35px';
                jia.style.cursor='pointer';
                jia.setAttribute('onclick','c.clickBtn(this)');
                jia.style.border='solid 1px #f1f1f1';
                ysArea.appendChild(jia);
                
                var jia=document.createElement('div');
                jia.innerHTML='=';
                jia.style.textAlign='center';
                jia.style.lineHeight='35px';
                jia.style.cursor='pointer';
                jia.setAttribute('onclick','c.cal()');
                jia.style.border='solid 1px #f1f1f1';
                ysArea.appendChild(jia);
            
        },
        cal:function(str){
          //开始计算
          var result=eval(this.curentStr);
         this.showX.innerHTML=this.curentStr+'='+result;
        },
        clear:function(){
        this.curentStr='';
        this.showX.innerHTML='';
        
        },
        clickBtn:function(str){

          this.curentStr+=str.innerHTML;
          this.showX.innerHTML=this.curentStr;
        }
        
    
    }
    
    
    //生成计算机对象
    window.onload=function(){
       c  = new calcutor();
    }

    

</script>

本文版权归企业网站建设,做网站,网站建设,php网站建设,dedecms建站,ecshop二次开发,html空间,网站修改所有,转载引用请完整注明以下信息:
本文作者:admin
本文地址:javascript/js 计算器 | 企业网站建设,做网站,网站建设,php网站建设,dedecms建站,ecshop二次开发,html空间,网站修改

抱歉!评论已关闭.