اصدقائي لقد قمت بانشاء مربع داخل واعطيته position:abslute واعطيته left:0 وانشات زران
بالجافا سكربت احدهم عندما اضغط عليه يقوم بتحريك المربع الي اليمين عن طريق زياده القيمه من الصفر بالتدريج والاخر عندما اضغط عليه يتوقف المربع المشكله هي عندما يتوقف المربع اريد اذا ضغط علي الزر الاول يبدا من حيث توقف لاطنه يتوقف نهائيا اتمنى ارسال الكود الصحيح ممن لديه الحل حتى اتفحصه جيدا واتعلم من خطأي واشكركم جميعا مقدما واتمنى لكم دوام التوفيق والنجاح 
3 Likes
مرحبا حسن
أرسل لنا الكود حتى نستطيع معرفة مصدر الخطأ
2 Likes
السلام عليكم ورحمة الله
إليك الحل بفضل من الله:
<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>
أنا أول مره أتعلم أعملها، استفدت منها صراحه 
الحمد لله
2 Likes
اشكرك جزيل الشكر واتمنى لك من الله دوام التوفيق وازادك الله من علمه اختي الكريمه 
2 Likes
واتمنى ان ينال هذا التصميم اعجابك
<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>
2 Likes
ولك بالمثل
عمل رائع ما شاء الله تبارك الله، بالتوفيق
1 Like
إطارات العربه الآن تدور أيضا 
@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>
2 Likes
عليك الإنتباه إلى أنه لا يفضل إعطاء أكثر من عنصر واحد نفس الId،
ال Id يعطى لعنصر واحد فقط ولا يتكرر، أما ال class ، فهو للتكرار
2 Likes
عمل رائع اختي الكريمه جميل جدا 
2 Likes