Cara Membina Apl CodePlay Interaktif dengan Output Masa Nyata-tutorial css-php.cn

How to Build Interactive CodePlay App with Real-time Output

Dalam tutorial ini, kami akan mencipta aplikasi web interaktif yang dipanggil CodePlay App menggunakan HTML, CSS, JavaScript, Bootstrap dan jQuery. Aplikasi ini membolehkan pengguna menulis kod dalam HTML, CSS dan JavaScript dan melihat output dalam masa nyata dalam iframe terbenam.

Kami akan menumpukan pada melaksanakan animasi yang lancar, reka bentuk responsif dan keupayaan penyuntingan kod yang lancar.

Prasyarat

Untuk mengikuti tutorial ini, anda harus mempunyai pengetahuan asas tentang HTML, CSS, JavaScript, Bootstrap dan jQuery. Pastikan anda mempunyai editor teks dan pelayar web moden dipasang.

Persediaan Projek

Buat Struktur Projek:
- Buat direktori baharu untuk projek anda (aplikasi codeplay).
- Di dalam direktori ini, buat subdirektori untuk css dan javascript.
- Buat fail index.html dalam direktori akar.
Sertakan Perpustakaan Diperlukan:
- Muat turun Bootstrap CSS dan masukkannya dalam direktori css.
- Sertakan perpustakaan jQuery daripada CDN dalam index.html anda.
- Buat fail main.js dalam direktori javascript untuk logik aplikasi anda.

Struktur HTML

      CodePlay App     
    CodePlayer      
     About Me 
  DaslawCodePlayer 
 
 
 
 
   <p>Hello world!</p> /* Enter your css code here! */ /* Enter your JS code here! */ Hello world!

Salin selepas log masuk

Penggayaan CSS

Fail CSS (style.css) mentakrifkan gaya untuk aplikasi, termasuk reka letak dan keterlihatan panel.

*, *::before, *::after { margin: 0; padding: 0; } .inlineMenu { display: inline; } .active { background-color: green !important; } .hidden { display: none; } .panel { resize: none; border: none; outline: none; border-top: 1.3px solid grey; transition: opacity 0.5s ease-in-out; } .panel:not(:last-child) { border-right: 1.3px solid grey; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation: fadeIn 0.5s; }

Salin selepas log masuk

Fungsi JavaScript

Fail JavaScript (main.js) mengendalikan tingkah laku dinamik, termasuk mengemas kini panel output dan mengurus keterlihatan panel berdasarkan saiz skrin.

$(document).ready(function () { $(".panel").height($(window).height() - $("header").height() - 10); function updateOutput() { $("iframe").contents().find("html").html("
" + $("#htmlPanel").val() + ""); document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val()); } updateOutput(); $("textarea").on('change keyup paste', function () { updateOutput(); }); function hideAllPanel() { $(".btn-group").children().removeClass("active"); $("#bodyContainer").children().addClass("hidden"); } function mediaChange() { if (mobileScreen.matches) { //for small screen devices (max-width: 500px) hideAllPanel(); $(".btn-group").children(":first-child").addClass("active"); $("#bodyContainer").children(":first-child").removeClass("hidden"); $(".btn-group").children().off("click"); $(".btn-group").children().click(function () { hideAllPanel(); $(this).toggleClass("active"); let panelId = $(this).attr("id") + "Panel"; $("#" + panelId).toggleClass("hidden"); }); } else if (tabScreen.matches) { //for medium screen devices (max-width: 800px) hideAllPanel(); $(".btn-group").children(":first-child").addClass("active"); $("#bodyContainer").children(":first-child").removeClass("hidden"); $(".btn-group").children(":last-child").addClass("active"); $("#bodyContainer").children(":last-child").removeClass("hidden"); let activePanel = ["html", "output"]; $(".btn-group").children().off("click"); $(".btn-group").children().click(function () { let thisID = $(this).attr("id"); if (this.matches(".active")) { //when user clicks on active panel button... $(this).toggleClass("active"); let panelId = $(this).attr("id") + "Panel"; $("#" + panelId).toggleClass("hidden"); if (thisID != activePanel[0]) activePanel[1] = activePanel[0]; activePanel[0] = null; } else { //when user clicks on inactive(hidden) panel button... let selectPanel = activePanel.shift(); $("#" + selectPanel + "Panel").toggleClass("hidden"); $("#" + selectPanel).toggleClass("active"); $(this).toggleClass("active"); let panelId = $(this).attr("id") + "Panel"; $("#" + panelId).toggleClass("hidden"); activePanel.push(thisID); } }); } else { //for other screens... $(".btn-group").children().off("click"); $(".btn-group").children().click(function () { $(this).toggleClass("active"); let panelId = $(this).attr("id") + "Panel"; $("#" + panelId).toggleClass("hidden"); }); } } //media queries; on Screen change. var mobileScreen = window.matchMedia("(max-width: 500px)"); var tabScreen = window.matchMedia("(max-width: 800px)"); mediaChange(); tabScreen.addEventListener("change", mediaChange); mobileScreen.addEventListener("change", mediaChange); });

Salin selepas log masuk

Demo dan Repositori Langsung

Demo Langsung:Demo Langsung Apl CodePlay
Repositori GitHub:Repositori GitHub Apl CodePlay

Kesimpulan

Tahniah! Anda telah berjaya membina Apl CodePlay yang membolehkan pengguna menulis dan pratonton kod HTML, CSS dan JavaScript dalam masa nyata dengan animasi lancar dan reka bentuk responsif untuk kebolehgunaan optimum merentas peranti yang berbeza.

Selamat mengekod!

Atas ialah kandungan terperinci Cara Membina Apl CodePlay Interaktif dengan Output Masa Nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!