Playground สำหรับ HTML, CSS และ JavaScript

วิธีใช้งาน

1. สลับระหว่างตัวแก้ไข HTML, CSS และ JavaScript ด้วยปุ่มด้านบน แล้วเขียนโค้ดของคุณ
2. ตัวอย่างจะอัปเดตโดยอัตโนมัติเมื่อคุณหยุดพิมพ์ หรือปิดการทำงานนี้แล้วคลิกปุ่ม รัน
3. ตรวจสอบผลลัพธ์และข้อผิดพลาดในคอนโซล แล้วคลิกปุ่ม ดาวน์โหลด HTML เพื่อบันทึกหน้าเว็บของคุณ

คำอธิบายตัวเลือก

แซนด์บ็อกซ์

ตัวอย่างทำงานใน sandbox แบบแยกส่วน โดยไม่สามารถอ่านคุกกี้หรือพื้นที่จัดเก็บของเว็บไซต์นี้ และไม่สามารถเปิดกล่องโต้ตอบได้

คอนโซล

แสดงผลจาก console.log, warn และ error รวมถึงข้อผิดพลาดที่ไม่ได้ดักจับพร้อมหมายเลขบรรทัด และเก็บรายการล่าสุดไว้ 200 รายการ

ดาวน์โหลด

รวมทั้งสามส่วนเป็นไฟล์ HTML เดียว โดยใส่สไตล์ไว้ในแท็ก style และวางสคริปต์ไว้ท้าย body

หน้าเว็บถูกประกอบอย่างไร

ตัวแก้ไขทั้งสามถูกรวมเป็นเอกสารเดียวตามลำดับนี้ เลย์เอาต์เดียวกันคือสิ่งที่คุณได้เมื่อคลิก ดาวน์โหลด HTML ยกเว้นสคริปต์เล็กๆ ที่ส่งเอาต์พุตของคอนโซลไปยังหน้าใต้ตัวอย่างจะไม่รวมอยู่ในไฟล์ที่ดาวน์โหลด

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>

เนื่องจากสคริปต์อยู่หลัง HTML ของคุณ คุณจึงใช้ document.getElementById ได้ทันทีโดยไม่ต้องรอให้หน้าโหลดเสร็จ ในตัวแก้ไข HTML ให้เขียนเฉพาะสิ่งที่อยู่ภายใน body ไม่ต้องเขียนแท็ก html, head หรือ body เอง ตัวอย่างเป็น iframe ที่ได้รับสิทธิ์เพียงการรันสคริปต์ จึงเป็นเหตุผลที่กล่องข้อความ alert และการเข้าถึงคุกกี้ของไซต์นี้ถูกบล็อก

คำถามที่พบบ่อย

ความเป็นส่วนตัว

เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไฟล์และข้อความของคุณได้รับการประมวลผลบนอุปกรณ์ของคุณ และจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ของเรา