Makkah

محمد الحربي · 5 أبريل 2020

اطلب من المستخدم ادخال قيمةx و y
لما انقر على زر العمليات يكتب لي من تحت
اسفل الصفحه
مجموع القيمتين
ضرب القيمتين
طرح القيمتين
5
3
3+5=8
5-3=2
5*3=15

Mohamd Imran · 5 أبريل 2020

بتاريخ 32 دقائق مضت قال محمد الحربي13:

اطلب من المستخدم ادخال قيمةx و y
لما انقر على زر العمليات يكتب لي من تحت
اسفل الصفحه
مجموع القيمتين
ضرب القيمتين
طرح القيمتين
5
3
3+5=8
5-3=2
5*3=15

السلام عليكم اخي @محمد الحربي13

لو سمحت ذكر لغة البرمجة التي تريد ان يتم تنفيذ الكود بها لمساعدتك

تحياتي
شكرا لك

محمد الحربي · 5 أبريل 2020

بتاريخ 1 دقيقة مضت قال Mohamd Imran:

السلام عليكم اخي @محمد الحربي13

لو سمحت ذكر لغة البرمجة التي تريد ان يتم تنفيذ الكود بها لمساعدتك

تحياتي
شكرا لك

html

Mohamd Imran · 5 أبريل 2020

بتاريخ 43 دقائق مضت قال محمد الحربي13:

html

لعمل الية حسابية تحتاج الى لغة اخرى مع ال HTML تفضل هنا استخدمت HTML + Javascript

السكربت التالي لاخذ قيمة x,y من المستخدم للقيام بالعمليات الحسابية

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset=utf-8 />
<title>حساب قيمة المدخل </title>
<style type="text/css">
body {margin: 30px;

}

</style>
</head>
<body>
  <center>
<form>
X : <input type="text" id="firstNumber" /><br>
Y: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="multiplyBy()" Value="ضرب" />
<input type="button" onClick="divideBy()" Value="تقسيم" />
<input type="button" onClick="minusBy()" Value="طرح" />
</form>
<p>النتيجة : <br>
<span id = "result"></span>
</p>
</center>
</body>

<script type="text/javascript">
      function multiplyBy()
      {
          num1 = document.getElementById("firstNumber").value;
          num2 = document.getElementById("secondNumber").value;
          document.getElementById("result").innerHTML = num1 * num2;
      }

      function divideBy()
      {
          num1 = document.getElementById("firstNumber").value;
          num2 = document.getElementById("secondNumber").value;
      document.getElementById("result").innerHTML = num1 / num2;
      }

      function minusBy()
      {
          num1 = document.getElementById("firstNumber").value;
          num2 = document.getElementById("secondNumber").value;
      document.getElementById("result").innerHTML = num1 - num2;
      }
</script>
</html>

وهنا سكربت لعرض قيمة x=5 ,y=3 على حسب العملية(ضرب,طرح,تقسيم) بشكل الي

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset=utf-8 />
<title>حساب قيمة المدخل </title>
<style type="text/css">
body {margin: 30px;

}

</style>
</head>
<body onload="javascript:multiplyBy();divideBy();minusBy()">>
  <center>


<p>حاصل ضرب X ,Y : <br>
</br>

<span id = "multiply"></span>
</br>
<p>حاصل قسمة X ,Y : <br>
</br>

<span id = "divide"></span>
</br>
<p>حاصل طرح X ,Y : <br>
</br>

<span id = "minus"></span>
</p>
</center>
</body>

<script type="text/javascript">

    x = 5;
    y = 3;
      function multiplyBy()
      {

          document.getElementById("multiply").innerHTML = x * y;
      }

      function divideBy()
      {

      document.getElementById("divide").innerHTML = x / y;
      }

      function minusBy()
      {

      document.getElementById("minus").innerHTML = x - y;
      }
</script>
</html>

اتمنى ان اكون قد افدتك

تحياتي
شكرا لك

تم التعديل في 5 أبريل 2020 بواسطة Mohamd Imran

Othmane Othwsav · 5 أبريل 2020

السلام عليكم,

في هذا الكود استخدمت HTML+CSS+JavaScript+Jquery, و قد أرفقت الملف حتى لا تضطر للنسخ واللصق, و شكرا.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- page style -->
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        body>div, .form{
            display: flex;
            flex-direction: column;
            width: 50%;
            align-items: center;
        }
        .form > *:not(:last-child){
            margin-bottom: 10px;
        }
        
        .oper span{
            display: block;
        }
        .oper{
            align-self: end;
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div class="form">
            <label>أدخل قيمة X:</label>
            <input class="value x" type="number" value="0">
            <label>أدخل قيمة Y:</label>
            <input class="value y" type="number" value="0">
            <input type="submit" value="العمليات">
        </div>
        <div class="oper">
            <div class="values">
                <span></span>
                <span></span>
            </div>
            <div class="results">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    
    <!-- page script -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script defer>

        $(".form input[type=submit]").click(function (){
            if($(".oper").is(":hidden"))
                $(".oper").slideDown().css("display", "block")

            let vals = [Number($(".x").val()), Number($(".y").val())],
                res = [vals[0] + vals[1], vals[0] - vals[1], vals[0] * vals[1]],
                i

            const valText = ["X هو", "Y هو"], resText = ["X+Y يساوي", "X-Y يساوي", "X*Y يساوي"]

            $(".values span").each(function (){
                i = $(this).index()
                $(this).text(`${valText[i]} ${vals[i]}`)
            })

            $(".results span").each(function (){
                i = $(this).index()
                $(this).text(`${resText[i]} ${vals[0]} ${["+", "-", "*"][i]} ${vals[1]} = ${res[i]}`)
            })
        })

    </script>
</body>
</html>