Clincher #319
Description
<title>تمرین هماهنگ کردن جهت</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 10px; background: #f0f0f0; }
h1 { margin-top: 10px; }
#timer { font-size: 24px; margin: 10px; }
#images { display: flex; justify-content: space-around; margin-top: 20px; }
.img-container { position: relative; width: 45%; }
img { width: 100%; max-width: 200px; transition: transform 0.3s; }
.btn { margin-top: 10px; padding: 10px; font-size: 18px; width: 90%; border-radius: 10px; border: none; color: white; cursor: pointer; }
#rotate { background-color: #4CAF50; }
#check { background-color: #2196F3; }
#result { font-size: 22px; margin-top: 20px; color: green; }
</style>
چرخش تصویر راست
بررسی جهت
<script>
let angle = 0;
let time = 120; // 2 دقیقه
let timerInterval = setInterval(() => {
if(time > 0){
time--;
let m = String(Math.floor(time/60)).padStart(2,'0');
let s = String(time%60).padStart(2,'0');
document.getElementById('timer').innerText = `زمان باقی مانده: ${m}:${s}`;
} else {
clearInterval(timerInterval);
document.getElementById('result').innerText = "زمان تمام شد! 🔔";
document.getElementById('rotate').disabled = true;
document.getElementById('check').disabled = true;
}
}, 1000);
document.getElementById('rotate').addEventListener('click', () => {
angle = (angle + 90) % 360;
document.getElementById('right').style.transform = `rotate(${angle}deg)`;
});
document.getElementById('check').addEventListener('click', () => {
if(angle % 360 === 0){
document.getElementById('result').innerText = "درست است! 🎉";
} else {
document.getElementById('result').innerText = "نادرست است! 🔄 دوباره امتحان کن";
}
});
</script>
تمرین هماهنگ کردن جهت
زمان باقی مانده: 02:00
تصویر ثابت
چرخش تصویر راست
بررسی جهت