สร้างเครื่องคิดเลขอย่างง่ายด้วย CSS และ jQuery

18 March 2009 เขียนเมื่อ 16 ปีก่อน โดย Ninenik Narkdee

css jquery เครื่องคิดเลข

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css jquery เครื่องคิดเลข

ดูแล้ว 18,086 ครั้ง

CSS Code

<style type="text/css">
.iCalc{
    width:100px;
    display:block;
    background-color:#666666;
    font-size:12px;
    color:#FFFFFF;
    height:115px;
}
.iResult{
    width:95px;
    margin-left:2px;
    margin-top:2px;
    float:left;
    height:20px;
    background-color:#CCCCCC;
    text-align:left;
    color:#000000;
    line-height:20px;
    text-indent:3px;
    overflow:hidden;
}
div.iDigit > div{
    display:block;
    float:left;
    height:20px;
    width:20px;
    text-align:center;
    margin-left:4px;
    margin-top:2px;
    background-color:#000000;
    cursor:pointer;
}
</style>

HTML Code

<div class="iCalc">
<div class="iResult">0</div>
<div class="iDigit">
<div>1</div><div>2</div><div>3</div><div>/</div>
<div>4</div><div>5</div><div>6</div><div>*</div>
<div>7</div><div>8</div><div>9</div><div>-</div>
<div>0</div><div>C</div><div>=</div><div>+</div>
</div>
</div>

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
    var cal_result=0;
    var resultD="";     
    $("div.iDigit > div").click(function(){
        var pressD=$(this).text();
        var pressID_C=encodeURIComponent(pressD);           
        if(pressD=="C"){
            resultD=0;          
        }else{
            if(cal_result==1){
                resultD=pressD;             
                cal_result=0;   
            }else{
                if($("div.iResult").text()=="0"){
                    resultD=pressD;                 
                }else{
                    resultD+=pressD;                        
                }
            }           
        }
        if(pressID_C=="%3D"){
            resultD=eval($("div.iResult").text());
            cal_result=1;
        }
        $("div.iResult").text(resultD);
    });
});
</script>

ตัวอย่าง