在本教程中,我们将使用 HTML、CSS、JavaScript、Bootstrap 和 jQuery 创建一个名为 CodePlay App 的交互式 Web 应用程序。该应用程序允许用户用 HTML、CSS 和 JavaScript 编写代码,并在嵌入式 iframe 中实时查看输出。
我们将专注于实现流畅的动画、响应式设计和无缝代码编辑功能。
要学习本教程,您应该具备 HTML、CSS、JavaScript、Bootstrap 和 jQuery 的基本知识。确保您安装了文本编辑器和现代网络浏览器。
创建项目结构:
包含所需的库:
<!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>
CSS 文件 (style.css) 定义应用程序的样式,包括布局和面板可见性。
*, *::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; }
JavaScript 文件 (main.js) 处理动态行为,包括更新输出面板和根据屏幕尺寸管理面板可见性。
$(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); });
恭喜!您已成功构建了一个 CodePlay 应用程序,该应用程序允许用户通过流畅的动画和响应式设计实时编写和预览 HTML、CSS 和 JavaScript 代码,从而在不同设备上实现最佳可用性。
编码愉快!
以上是如何构建具有实时输出的交互式 CodePlay 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章!