在本教學中，我們將使用 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中文網其他相關文章！
