样式部分很随意,做的大概像一个计算器就好了,主要是写自己做的js部分,目前还很简陋,没有写小数点的功能,只有做18位以下的计算,目前只有加减乘除的功能。首先线声明几个变量。

var set=0;
 var www=['+','-','*','/'];
 var kk='';
 var q='';

我的思路是,每次输入一个运算符,也就是www的子集,就在set里面加一个1,并且将此时输入的运算符存储到q里面,等set等于2的时候,讲前面set为1的时候的运算结果计算出来,然后再用一个判断函数将set值调整为1,并且将新的输入的运算符给q。而kk是用来储存目前屏幕上显示的结果的。

第一个部分是实现数字的输入的功能。

$('.importnum').on('click','.num',function() {
       /*


这边还缺少一个判断 现在并没有做小数点,运算符后面不能连续输入两个0.

*/
	   k=$(this).html();
     //判断屏幕上的数字是否是刚刚做完运算的数值型 如果是数值型的,再按数字键应该显示为该数字。若是字符型的则是在输入数字,则让他们字符相加。
	if (typeof(kk)=='string') {
	if ($('.screen').html()==='0') {
        if (k!=="+") {
		    $('.screen').html(k);
        }else{
            $('.screen').html(0)   
        }        }else{
		var n=$('.screen').html();       
		kk=n+k;
		n=kk;
		$('.screen').html(n);	

	    }
    }else{
        $('.screen').html(k);
        kk=k;
    }

});

 

然后是清除键位的功能

//清零让屏幕上显示0,并且将kk也显示为0
$('.clearall').click(function(){
	$('.screen').html('0');
    kk=0;
    set=0;
});

这边以后可以做一个功能,首先得有个等于号的功能,然后如果kk中没有运算符,即按下等于号之后得出了结果,并没有再输入运算符就直接按了清除键位,这时候则把kk的值赋值为0,这个东西可以用字符型和数值型的区别来写判定。

还有清零键位的功能

$('.dislodge').click(function(){
    var a1=$('.screen').html();     var aaa=a1.substr(a1.length-1);
    var rr=kk.substring(0,kk.length-1) 

    if (kk.length>1&&www.indexOf(aaa)=='-1') {                 /*第一种情况 字符串长度>1的时候,并且结尾字母不为运算符*/
	    kk=rr;   
	    $('.screen').html(rr);

    }else if (kk.length>1&&www.indexOf(aaa)!=='-1') {          /*第二种情况 字符串长度>1的时候,并且结尾字母为运算符*/
        set-=1;
        kk=rr;   
        $('.screen').html(rr);    }else{                                                     /*第三种情况 字符串长度=1的时候,直接变0*/
        kk=0;
        $('.screen').html(kk);    } 
});

接下来是一个函数,这个函数和set有关,//这个函数的功能是在屏幕上只有一个运算符的时候把该运算符记录下来

function p(w){
        if (set==1) {
            q=w;
        }
     }

最后是运算符的部分

$('.weapon').click(function(){
    var w=$(this).attr('data-w');
    var a1=$('.screen').html();        
    var aaa=a1.substr(a1.length-1);


    //最后一位是运算符的时候不能输入运算符
    if (www.indexOf(aaa)=='-1') {
        a1=a1+w;
        kk=a1;
        $('.screen').html(a1);
        set=1+set;
        var a2=a1.substr(0,a1.length-1);       
        p(w);                                                      

        /*用set的数值来确定什么时候计算,我设定在set等于2的时候 也就是第二次按动运算符输入的时候,就把之前的计算完成,再把结果和输入的运算符显示在屏幕上*/

   if(set==2){
        var getnum=a2.indexOf(q);
        var mynum1=a2.substr(0,getnum)*1;
        var mynum2=a2.substr(getnum+1)*1;
        var mynum='';
            switch(q){
                case '+':
                mynum=mynum2+mynum1;           
                break;
                case '-':
                mynum=mynum1-mynum2;
                break;
                case '*':
                mynum=mynum1*mynum2;
                break;
                case'/':
                mynum=mynum1/mynum2;
                break;
            };
            set-=1;
            p(w);
            a2=mynum+q;
            kk=a2;
            $('.screen').html(kk);
        } 
    }
})

然后一个简单的计算器就完成了,以后再改进把