Rumah > Artikel > hujung hadapan web > Cara Membina Apl CodePlay Interaktif dengan Output Masa Nyata
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.
Untuk mengikuti tutorial ini, anda harus mempunyai pengetahuan asas tentang HTML, CSS, JavaScript, Bootstrap dan jQuery. Pastikan anda memasang editor teks dan penyemak imbas web moden.
Buat Struktur Projek:
Sertakan Perpustakaan yang Diperlukan:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>CodePlay App</title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script> <script src="javascript/main.js" type="text/javascript" defer></script> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">CodePlayer</a> <div class="ml-lg-5 btn-group btn-group-sm" role="group"> <button type="button" id="html" class="btn btn-secondary active">HTML</button> <button type="button" id="css" class="btn btn-secondary">CSS</button> <button type="button" id="javascript" class="btn btn-secondary">JavaScript</button> <button type="button" id="output" class="btn btn-secondary active">Output</button> </div> <button class="navbar-toggler mt-sm-0 mt-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item mr-2"> <a class="nav-link" href="https://www.linkedin.com/in/daslaw26/">About Me</a> </li> <li class="nav-item mr-2"> <a class="nav-link" href="https://github.com/Daslaw/codePlayer.git">DaslawCodePlayer</a> </li> </ul> </div> </nav> </header> <main class="container-fluid"> <div class="row" id="bodyContainer"> <textarea id="htmlPanel" class="col panel"><p>Hello world!</p></textarea> <textarea id="cssPanel" class="col panel hidden">/* Enter your css code here! */</textarea> <textarea id="javascriptPanel" class="col panel hidden">/* Enter your JS code here! */</textarea> <iframe id="outputPanel" class="col panel">Hello world!</iframe> </div> </main> <!-- Optional JavaScript; choose one of the two! --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>
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; }
Fail JavaScript (main.js) mengendalikan gelagat 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("<html><head><style type='text/css'>" + $("#cssPanel").val() + "</style></head></body>" + $("#htmlPanel").val() + "</body></html>"); 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); });
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!