efaraj.ir

برنامه نویسی

دفعات بازدید ۱۸۵

بهبود ظاهر ماشین حساب با استفاده از دستورات css

۱

در این جلسه می خواهیم ظاهر ماشین حساب خود را مانند ماشین حساب های سیستم عامل مک کنیم.
نتیجه صد در صد مشابه نخواهد بود ولی تا جایی که بتوانیم این کار را انجام میدهیم.
برای این کار ابتدا به تمام دکمه ها را با span عوض می کنیم تا بتوانیم راحت تر به آن استایل دهیم.
سپس دکمه ها را به کلاس های مختلفی تقسیم می کنیم.
یک سری اعداد هستند که کلاس number به آن می دهیم. یک سری عملگر ها هستند مثل به علاوه و ... که به آن ها کلاس operand می دهیم. و دکمه های بالایی که کار ریست کردن و تغییر علامت را دارن کلاس action را تخصیص می دهیم. این کار صرفا برای این است که بتوانیم به این کلاس ها یک استایل خاص بدهیم و شکل هم باشند.

<!DOCTYPE html>
<html >
<head>
<title>ماشین حساب</title>
<style>
   .operand, .action, .number{
       cursor:pointer;
        width: 100%;
        padding-top:10px;
        min-width:55px;
        min-height:40px;
        margin:0px;
        text-align:center;
        margin:auto;
        vertical-align:middle;
        color:white;
          font-size:25px;
    }
      table{
        background-color:black;
        border-radius:px;
        border:1px solid black;
    }
    #result{
        background-color: #2f2926;
        color: white;
        padding: 10px;
        min-height: 20px;
        text-align:right;
        min-width:200px;
        font-size:30px;
        display: block;
    }
    .operand{
        background-color:#ff9e0b;
    }
    .action{
        background-color:#443d38;
    }
    .number{
        background-color:#625c5c;
    }
    .number>div{
        margin:auto;
    }
</style>
</head>
<body>

    <table>
        <tr>
            <td colspan="4">
                <span id="result">0</span>
            </td>
        </tr>
        <tr>
            <td>
                <div class="action" onClick="reset()">AC</div>
            </td>
            <td>
                <div class="action" onClick="changeSign()">+/-</div>
            </td>
            <td>
                <div class="action" onClick="calc('%')">%</div>
            </td>
            <td>
                <div class="operand" onClick="calc('/')">/</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="number" onClick="addChar('7')">7</div>
            </td>
            <td>
            <div class="number" onClick="addChar('8')">8</div>
            </td>
            <td>
            <div class="number" onClick="addChar('9')">9</div>
            </td>
            <td>
            <div   class="operand" onClick="calc('*')">*</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="number" onClick="addChar('4')">4</div>
            </td>
            <td>
                <div class="number" onClick="addChar('5')">5</div>
            </td>
            <td>
                <div class="number" onClick="addChar('6')">6</div>
            </td>
            <td>
                <div  class="operand" onClick="calc('-')">-</div>
            </td>
        </tr>
        <tr>
            <td>
              
                <div class="number" onClick="addChar('1')">1</div>
               
            </td>
            <td>
                <div class="number" onClick="addChar('2')">2</div>
            </td>
            <td>
                <div class="number" onClick="addChar('3')">3</div>
            </td>
            <td>
                <div  class="operand" onClick="calc('+')">+</div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="number" onClick="addChar('0')">0</div>
            </td>
            <td>
                <div  class="number" onClick="addChar('.')">.</div>
            </td>
            <td>
                <div  class="operand" onClick="calc('=')">=</div>
            </td>
        </tr>
    </table>


</body>
</html>

خروجی به صورت زیر خواهد بود.

ماشین حساب

0
AC	+/-	%	/
7	8	9	*
4	5	6	-
1	2	3	+
0		.	=

در ادامه موارد توضیحی ذکر خواهد شد.
تمام نکات در قسمت استایل وجود دارد.
ابتدا استایل یکسانی به همه دکمه های ماشین حساب می دهیم.
برای این کار کافی است اسم کلاس های آن ها را با ویرگول از هم جدا کنیم و دستورات css را به همه آن ها اختصاص دهیم. به صورت زیر

   .operand, .action, .number{
}

پس هر وقت خواستیم دستورات ثابتی را به کلاس های مختلف بدهیم می توانیم از عملگر , استفاده کنیم و نام کلاس یا سایر اشاره گر ها را بیاوریم.

cursor:pointer;

این دستور باعث می شود تا نشان گر موس با حرکت بر روی دکمه ها شکل دست بگیرد و کاربر بفهمد که این دکمه ها قابل کلیک هستند. غیر از مقدار pointer که به معنی اشاره گر دست هست سایر مقدار ها نیز وجود دارد که می توانید امتحان کنید. برای این کار به قسمت استایل از بخش element بروید و سایر مقدار ها را امتحان کنید. شما با زدن کلید f12 به پنل برنامه نویسی دسترسی خواهید داشت.

  width: 100%;

این دستور باعث می شود طول دکمه ها بیشتر حد ممکن از والد خود را اشغال کنند.
می توان مقدار دقیق تری نیز داد مثلا ۴۰px اما وقتی با درصد بیان کنیم نسبت به صفحه کاربر این محاسبات انجام میشود.

 padding-top:10px;

این دستور باعث میشود نوشته از بالای دکمه ۱۰ پیکسل فاصله داشته باشد تا در مرکز دکمه قرار بگیرد. البته راه های بهتری هم برای این کار وجود دارد اما این هم یک راه است.

        min-width:55px;
        min-height:40px;

این دستورات حداقل طول و عرض دکمه ها را مشخص می کند.

margin:0px;

این دستور فاصله هر دکمه از دکمه مجاور را مشخص می کند.

text-align:center;

این دستور نوشته های دکمه ها را به صورت طول در مرکز قرار میدهد.

 color:white;
          font-size:25px;

این دو دستور نیز رنگ نوشته را سفید کرده و اندازه متن آن را نیز ۲۵ پیکسل قرار میدهد.