แหล่งเรียนรู้เพิ่มเติม

📢นวัตกรรมกสรศึกษา 4 ชิ้น / เทคนิค วิธีการสอน 4 เทคนิค

เทคนิควิธีการสอน

นวัตกรรมการศึกษา

คลิก! อ่านรายเอียดเพิ่มเติม

📢Workshop

Workshop ที่ 1

การทำตัวหนังสือวิ่ง คลิก! vrisad.blogspot.com/p/blog-page_30.html

ครั้งที่ 1

ครั้งที่ 2

ครั้งที่ 3

pormp จากโค้ดดังกล่าวข้างต้น ปรับแต่ง แก้ไข เพิ่มการแสดงผลให้ <marquee direct="right">โปรแกรมการประถมศึกษา </marquee>

จากโค้ดที่ปรับแต่งและเพิ่มความสามารถในการให้ตัวอักษรมีแดง, ส้ม, เขียว, น้ำเงิน, และม่วง ในส่วนของตัวอักษร 40 สามารถเปลี่ยนสีได้ เวลาของสี2 วินาที มีผลไม้ แอปเปิ้ล กล้วย ส้ม องุ่น ตามตัวอักษรด้านหลังโดยผลไม้ สามารถเปลี่ยนรูปได้ เวลาของรูปผลไม้2วินาที โดยยังคงรูปแบบโค้ดเดิม

<!DOCTYPE html>

<html>

<head>

<title>Marquee เปลี่ยนสีและรูปภาพ</title>

</head>

<body>

<span id="text-to-change" style="font-size: 40px; font-weight: bold;">โปรแกรมวิชาการประถมศึกษา</span>

</marquee>

// 1. กำหนดค่าที่ต้องการ

const textElement = document.getElementById('text-to-change');

const fruitElement = document.getElementById('fruit-to-change');

// ลำดับสี (Red, Orange, Green, Blue, Violet)

const colors = ['Red', 'Orange', 'Green', 'Blue', 'Violet'];

let colorIndex = 0;

// ลำดับผลไม้ (ใช้ Emoji แทนรูปภาพเพื่อความง่าย)

const fruits = ['🍎', '🍌', '🍊', '🍇'];

let fruitIndex = 0;

// 2. ฟังก์ชันสำหรับเปลี่ยนสี

function changeColor() {

textElement.style.color = colors[colorIndex];

colorIndex = (colorIndex + 1) % colors.length;

}

// 3. ฟังก์ชันสำหรับเปลี่ยนผลไม้

function changeFruit() {

fruitElement.textContent = fruits[fruitIndex];

fruitIndex = (fruitIndex + 1) % fruits.length;

}

// 4. เริ่มการทำงานครั้งแรก

changeColor();

changeFruit();

// 5. ตั้งค่าให้ฟังก์ชันทำงานซ้ำทุก 2000 มิลลิวินาที (2 วินาที)

setInterval(changeColor, 2000);

setInterval(changeFruit, 2000);

</script>

</body>

</html>

Workshop ที่ 2

การสร้างข้อสอบออนไลน์ (แบบปรนัย) คลิก!

Workshop ที่ 2

การสร้างข้อสอบออนไลน์ (แบบปรนัย) คลิก!

Workshop ที่ 3

การสร้างข้อสอบออนไลน์ (แบบปรนัย) คลิก!

Page updated

Google Sites

Report abuse