احتاج الي مساعدة 📣😍

اصدقائي لقد قمت بانشاء مربع داخل واعطيته position:abslute واعطيته left:0 وانشات زران
بالجافا سكربت احدهم عندما اضغط عليه يقوم بتحريك المربع الي اليمين عن طريق زياده القيمه من الصفر بالتدريج والاخر عندما اضغط عليه يتوقف المربع المشكله هي عندما يتوقف المربع اريد اذا ضغط علي الزر الاول يبدا من حيث توقف لاطنه يتوقف نهائيا اتمنى ارسال الكود الصحيح ممن لديه الحل حتى اتفحصه جيدا واتعلم من خطأي واشكركم جميعا مقدما واتمنى لكم دوام التوفيق والنجاح :blush::innocent:

2 Likes

مرحبا حسن
أرسل لنا الكود حتى نستطيع معرفة مصدر الخطأ

1 Like

Uploading: ٢٠٢٠٠٣١٧_٢١٠٧١٢.jpg…

السلام عليكم ورحمة الله
إليك الحل بفضل من الله:

<html>
<head></head>
<body>
    <style>
        *{
            margin: 0;
        }
        html,body{
            width: 100vw;
        }
        #square{
            background-color: red;
            width: 90px;
            height: 90px;
            position: absolute;
            left: 0;
            top: 40%;
            transition: 2s;
        }
        .horizTranslate {
        -webkit-transition: 3s;
        -moz-transition: 3s;
        -ms-transition: 3s;
        -o-transition: 3s;
        transition: 3s;
        left: 50% !important;
        }
    </style>
<div style="width: 100%; height: 100vh; position:relative;">
    <div id="square">
    </div> 
    <button id='toggleButton' value='play'>Play</button>
</div>
<script>
var square = document.getElementById('square');

document.getElementById('toggleButton').onclick = function() {
  if(this.innerHTML === 'Play') 
  { 
    this.innerHTML = 'Stop';
    square.classList.add('horizTranslate');
  } else {
    this.innerHTML = 'Play';
    let computedStyle = window.getComputedStyle(square),
    left = computedStyle.getPropertyValue('left');
    square.style.left = left;
    square.classList.remove('horizTranslate');    
  }  
}

</script>

</body>
</html>

أنا أول مره أتعلم أعملها، استفدت منها صراحه :+1:
الحمد لله

1 Like

اشكرك جزيل الشكر واتمنى لك من الله دوام التوفيق وازادك الله من علمه اختي الكريمه :slightly_smiling_face:

1 Like

واتمنى ان ينال هذا التصميم اعجابك :innocent:

myCare
<style>
    body{
        margin: 0;
        padding: 0;
    }
    #button{
        margin:auto ;
        width: fit-content;
    }
    button{
        margin: 5px 10px;
    }
    /* style of the street*/
    #area{
        width: 100%;
        height: 260px;
        background-color: #B75C2D;
    }
    #Sidewalk{
        width: 100%;
        height: 16px;
        background-color: honeydew;
    }
    #brick{
        width: 40px;
        height: 14px;
        background-color: black;
        display: inline-block;
        margin: 0px 18px;
    }

    #streetC{
        width: 100%;
        height: 150px;
        background-color: #817B6F;
    }
    .lineStreet{
        background-color: lavenderblush;
        width: 70px;
        height: 12px;
        display: inline-block;
        margin: 63px 30px;
    }

    /* the desgin of car */

    #car{
        position: absolute;
        width: 123px;
        height: 80px;
        top: 35px;
        left: 0px;
        transition: 12s;
    }
   
    #bagOfCar{
        width:25px;
        height: 18px;
        border-top-left-radius: 50%;
        background-color: red;
        position: absolute;
        top: 20px;
        
    }
    #middOfCar{
        width:60px;
        height: 35px;
        border-top-left-radius: 25%;
        border-top-right-radius: 55%;
        background-color: red;
        position: absolute;
        top: 3px;
        left:25px;
    }

    #frontOfCar{
        width:30px;
        height: 18px;
        
        border-top-right-radius: 65%;
        background-color: red;
        position: absolute;
        top: 20px;
        left:85px;
    }

    #accedentOfCar{
        width: 13px;
        height: 5px;
        background-color: black;
        position: absolute;
        right: 0px;
        top: 13px;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25%;
    }

    #flashFront{
        border-radius: 50%;
        width: 7px;
        height: 7px;
        background-color: #e0d6c4;
        position:absolute;
        top: 6px;
        right: 2px;
    }

    #lineOfBag{
        width: 24px;
        height: .3px;
        position: absolute;
        top: 5px;
        right: 0px;
        background-color: black;
        border-top-left-radius: 25%;
        transform: rotate(-5deg);
    }

    #lineOfFrontBag{
        width: 0.3px;
        height: 4px;
        background-color: black;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    #doorOne{
        width: 48%;
        background-color: red;
        height: 95%;
        display: inline-block;
        position: absolute;
        right:1px;
        top: 1px;
        box-sizing: border-box;
        border: .5px solid black;
        border-top-right-radius:90% ;
    }
    #doorTwo{
        width: 48%;
        background-color: red;
        height: 95%;
        display: inline-block;
        position: absolute;
        left: 1px;
        top: 1px;
        box-sizing: border-box;
        border: .5px solid black;
        border-top-left-radius:40% ;
    }

    #keyOfDoor{
        width: 8px;
        height: 4px;
        background-color: gray;
        border-radius: 10%;
        position: absolute;
        top: 20px;
        left: 1px;
        border: .2px solid black;
    }

    #lineOfkey{
        width: 7px;
        height: .2px;
        margin: 2px auto;
        background-color: black;

    }

    #glassOfDoorOne{
        height: 50%;
        width: 80%;
        background-color:rgb(155, 203, 247);
        border-top-right-radius: 100%;
    }

    #glassOfDoorTwo{
        height: 50%;
        width: 97%;
        background-color:rgb(155, 203, 247);
        border-top-left-radius: 50%;   
        margin-left: 1px;   
    }

    #shockman{
        width: 10px;
        height: 4px;
        background-color: #906524d1;
        position:absolute;
        top: 17px;
        left: 2px;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        border: .2px solid black;
    }

    #circleOfShockman{
        background-color:#906524d1 ;
        height: 4px;
        width: 4px;
        border-radius: 50%;
        border: .2px solid black;
    }

    #frontlegOfCar{
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: black;
        border-radius: 50%;
        top:31px;
        left: 79px;
    }

    #backlegOfCar{
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: black;
        border-radius: 50%;
        top:31px;
        left:16px;
    }

    #dotedOfleg{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border:1px dashed whitesmoke;
        margin:2.5px auto;
    }

    #backAccedent{
        width: 3px;
        height: 4px;
        background-color: black;
        position: absolute;
        top: 14px;
    }

    #flashBackOfCar{
        margin-top:9px ;
        width: 6px;
        height: 4px;
        background-color: rgb(249, 153, 33);
    }

    .horizTranslate {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    left: 60% !important;
    }



</style>
        <div id="bagOfCar">
            <div id="lineOfBag"></div>
            <div id="lineOfFrontBag"></div>
            <div id="shockman">
                <div id="circleOfShockman"></div>
            </div>
            <div id="backAccedent"></div>
            <div id="flashBackOfCar"></div>
        </div>

        <div id="middOfCar">
            <div id="doorOne">
                <div id="glassOfDoorOne"></div>
                <div id="keyOfDoor">
                    <div id="lineOfkey">
                        
                    </div>
                </div>
            </div>
            <div id="doorTwo">
                <div id="glassOfDoorTwo"></div>
                <div id="keyOfDoor">
                    <div id="lineOfkey">
                        
                    </div>
                </div>
            </div>

        </div>

        <div id="frontOfCar">
            <div id="flashFront"></div>
            <div id="accedentOfCar"></div>
        </div>
        <div id="frontlegOfCar">
            <div id="dotedOfleg"></div>
        </div>
        <div id="backlegOfCar">
            <div id="dotedOfleg"></div>
        </div>
    </div>
    <div id="Sidewalk">
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
      
    </div>

    <div id="streetC">
        <div class="lineStreet">

        </div>
        <div class="lineStreet">

        </div>
        <div class="lineStreet">

        </div>
    </div>
    <div id="Sidewalk">
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
     
    </div>
  
    <div id="button">
        <!--<button id="btnStart" onclick="start()">Front</button>
        <button id="btnStop" onclick="stop()">Stop</button>
        <button id="btnBack" onclick="back()">Back</button>-->
        <button id="toggleButton" value="Play">Play</button>
    </div>
  
</div>


<script>
  /*  var btnStart=document.getElementById("btnStart");
    var btnStop=document.getElementById("btnStop");
    var car=document.getElementById("car");
    var movOfCar = {step:0};
    Object.defineProperty(movOfCar,"go",{get:function(){
   
            this.step+=3;
             
            
 
    
    }});
    Object.defineProperty(movOfCar,"stop",{get:function(){
        this.step-=3;
    }});

    btnStart.addEventListener("mousedown",function(){
        movOfCar.go;
        car.style.left=movOfCar.step+"px";
    });
    btnStop.addEventListener("mousedown",function back(){
        movOfCar.stop;
        car.style.left=movOfCar.step+"px";
        setTimeout("back()",10000);
    }
    ); */

   /* var car = document.getElementById("car");
    var stop = car.style.left.value;
    var lft = 0;
    function start(){
        car.style.left=lft+"px";
        if(lft<280){
            lft++;
        }
        setTimeout("start()",50);
    }

    function back(){
        car.style.left=lft+"px";
        if(lft>0){
            lft--;
        }
        setTimeout("back()",50);
    }


    function stop(){
        var x=lft;
        car.style.left=stop;
    }*/

    var car = document.getElementById('car');

document.getElementById(‘toggleButton’).onclick = function() {
if(this.innerHTML === ‘Play’)
{
this.innerHTML = ‘Stop’;
car.classList.add(‘horizTranslate’);
} else {
this.innerHTML = ‘Play’;
let computedStyle = window.getComputedStyle(car),
left = computedStyle.getPropertyValue(‘left’);
car.style.left = left;
car.classList.remove(‘horizTranslate’);
}
}

</script>
1 Like

ولك بالمثل

عمل رائع ما شاء الله تبارك الله، بالتوفيق

إطارات العربه الآن تدور أيضا :slight_smile:

@Hassan.pro1 

<html>
<head></head>
<body>
    <style>
        
    body{
        margin: 0;
        padding: 0;
    }
    #button{
        margin:auto ;
        width: fit-content;
    }
    button{
        margin: 5px 10px;
    }
    /* style of the street*/
    #area{
        width: 100%;
        height: 260px;
        background-color: #B75C2D;
    }
    #Sidewalk{
        width: 100%;
        height: 16px;
        background-color: honeydew;
    }
    #brick{
        width: 40px;
        height: 14px;
        background-color: black;
        display: inline-block;
        margin: 0px 18px;
    }

    #streetC{
        width: 100%;
        height: 150px;
        background-color: #817B6F;
    }
    .lineStreet{
        background-color: lavenderblush;
        width: 70px;
        height: 12px;
        display: inline-block;
        margin: 63px 30px;
    }

    /* the desgin of car */

    #car{
        position: absolute;
        width: 123px;
        height: 80px;
        top: 35px;
        left: 0px;
        transition: 12s;
    }
   
    #bagOfCar{
        width:25px;
        height: 18px;
        border-top-left-radius: 50%;
        background-color: red;
        position: absolute;
        top: 20px;
        
    }
    #middOfCar{
        width:60px;
        height: 35px;
        border-top-left-radius: 25%;
        border-top-right-radius: 55%;
        background-color: red;
        position: absolute;
        top: 3px;
        left:25px;
    }

    #frontOfCar{
        width:30px;
        height: 18px;
        
        border-top-right-radius: 65%;
        background-color: red;
        position: absolute;
        top: 20px;
        left:85px;
    }

    #accedentOfCar{
        width: 13px;
        height: 5px;
        background-color: black;
        position: absolute;
        right: 0px;
        top: 13px;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25%;
    }

    #flashFront{
        border-radius: 50%;
        width: 7px;
        height: 7px;
        background-color: #e0d6c4;
        position:absolute;
        top: 6px;
        right: 2px;
    }

    #lineOfBag{
        width: 24px;
        height: .3px;
        position: absolute;
        top: 5px;
        right: 0px;
        background-color: black;
        border-top-left-radius: 25%;
        transform: rotate(-5deg);
    }

    #lineOfFrontBag{
        width: 0.3px;
        height: 4px;
        background-color: black;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    #doorOne{
        width: 48%;
        background-color: red;
        height: 95%;
        display: inline-block;
        position: absolute;
        right:1px;
        top: 1px;
        box-sizing: border-box;
        border: .5px solid black;
        border-top-right-radius:90% ;
    }
    #doorTwo{
        width: 48%;
        background-color: red;
        height: 95%;
        display: inline-block;
        position: absolute;
        left: 1px;
        top: 1px;
        box-sizing: border-box;
        border: .5px solid black;
        border-top-left-radius:40% ;
    }

    #keyOfDoor{
        width: 8px;
        height: 4px;
        background-color: gray;
        border-radius: 10%;
        position: absolute;
        top: 20px;
        left: 1px;
        border: .2px solid black;
    }

    #lineOfkey{
        width: 7px;
        height: .2px;
        margin: 2px auto;
        background-color: black;

    }

    #glassOfDoorOne{
        height: 50%;
        width: 80%;
        background-color:rgb(155, 203, 247);
        border-top-right-radius: 100%;
    }

    #glassOfDoorTwo{
        height: 50%;
        width: 97%;
        background-color:rgb(155, 203, 247);
        border-top-left-radius: 50%;   
        margin-left: 1px;   
    }

    #shockman{
        width: 10px;
        height: 4px;
        background-color: #906524d1;
        position:absolute;
        top: 17px;
        left: 2px;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        border: .2px solid black;
    }

    #circleOfShockman{
        background-color:#906524d1 ;
        height: 4px;
        width: 4px;
        border-radius: 50%;
        border: .2px solid black;
    }

    #frontlegOfCar{
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: black;
        border-radius: 50%;
        top:31px;
        left: 79px;
    }

    #backlegOfCar{
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: black;
        border-radius: 50%;
        top:31px;
        left:16px;
    }

    #dotedOfleg1, #dotedOfleg2{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border:1px dashed whitesmoke;
        margin:2.5px auto;
    }

    #backAccedent{
        width: 3px;
        height: 4px;
        background-color: black;
        position: absolute;
        top: 14px;
    }

    #flashBackOfCar{
        margin-top:9px ;
        width: 6px;
        height: 4px;
        background-color: rgb(249, 153, 33);
    }

    .horizTranslate {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    left: 60% !important;
    }
	.dotedOfleg{
		animation: rotatecar 3s infinite;
	}
	@keyframes rotatecar {
		0% {
		  transform: rotate(0deg);
		}
		25% {
		  transform: rotate(45deg);
		}
		50% {
		  transform: rotate(90deg);
		}
		75% {
		  transform: rotate(135deg);
		}
		100% {
		  transform: rotate(180deg);
		}
	}

    </style>
		<div id="car">
	   <div id="bagOfCar">
            <div id="lineOfBag"></div>
            <div id="lineOfFrontBag"></div>
            <div id="shockman">
                <div id="circleOfShockman"></div>
            </div>
            <div id="backAccedent"></div>
            <div id="flashBackOfCar"></div>
        </div>

        <div id="middOfCar">
            <div id="doorOne">
                <div id="glassOfDoorOne"></div>
                <div id="keyOfDoor">
                    <div id="lineOfkey">
                        
                    </div>
                </div>
            </div>
            <div id="doorTwo">
                <div id="glassOfDoorTwo"></div>
                <div id="keyOfDoor">
                    <div id="lineOfkey">
                        
                    </div>
                </div>
            </div>

        </div>

        <div id="frontOfCar">
            <div id="flashFront"></div>
            <div id="accedentOfCar"></div>
        </div>
        <div id="frontlegOfCar">
            <div id="dotedOfleg1"></div>
        </div>
        <div id="backlegOfCar" >
            <div id="dotedOfleg2"></div>
        </div>
    </div>
    <div id="Sidewalk">
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
      
    </div>

    <div id="streetC">
        <div class="lineStreet">

        </div>
        <div class="lineStreet">

        </div>
        <div class="lineStreet">

        </div>
    </div>
    <div id="Sidewalk">
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
        <div id="brick">
        </div>
     
    </div>
  
    <div id="button"> 
        <button id="toggleButton" value="Play">Play</button>
    </div>
  
</div>


<script>
    var car = document.getElementById('car');
		document.getElementById('toggleButton').onclick = function() {
		if(this.innerHTML === 'Play')
		{
		this.innerHTML = 'Stop';
		car.classList.add('horizTranslate');
		dotedOfleg1.classList.toggle('dotedOfleg');
		dotedOfleg2.classList.toggle('dotedOfleg');
		} else {
		this.innerHTML = 'Play';
		let computedStyle = window.getComputedStyle(car),
		left = computedStyle.getPropertyValue('left');
		car.style.left = left;
		car.classList.remove('horizTranslate');
		dotedOfleg1.classList.toggle('dotedOfleg');
		dotedOfleg2.classList.toggle('dotedOfleg');
		}
	}
</script>

</body>
</html>
1 Like

عليك الإنتباه إلى أنه لا يفضل إعطاء أكثر من عنصر واحد نفس الId،
ال Id يعطى لعنصر واحد فقط ولا يتكرر، أما ال class ، فهو للتكرار

1 Like

عمل رائع اختي الكريمه جميل جدا :smiling_face_with_three_hearts:

1 Like