在本教程中，我们将使用 HTML、CSS、JavaScript、Bootstrap 和 jQuery 创建一个名为 CodePlay App 的交互式 Web 应用程序。该应用程序允许用户用 HTML、CSS 和 JavaScript 编写代码，并在嵌入式 iframe 中实时查看输出。
我们将专注于实现流畅的动画、响应式设计和无缝代码编辑功能。
先决条件
要学习本教程，您应该具备 HTML、CSS、JavaScript、Bootstrap 和 jQuery 的基本知识。确保您安装了文本编辑器和现代网络浏览器。
项目设置
-
创建项目结构：
- 为您的项目（codeplay-app）创建一个新目录。
- 在此目录中，为 css 和 javascript 创建子目录。
- 在根目录创建index.html文件。
-
包含所需的库：
- 下载 Bootstrap CSS 并将其包含在 css 目录中。
- 将 CDN 中的 jQuery 库包含在您的 index.html 中。
- 在 javascript 目录中为您的应用程序逻辑创建一个 main.js 文件。
HTML结构
<!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 样式
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 功能
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 应用程序现场演示
-
GitHub 存储库： CodePlay 应用程序 GitHub 存储库
结论
恭喜！您已成功构建了一个 CodePlay 应用程序，该应用程序允许用户通过流畅的动画和响应式设计实时编写和预览 HTML、CSS 和 JavaScript 代码，从而在不同设备上实现最佳可用性。
编码愉快！
以上是如何构建具有实时输出的交互式 CodePlay 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！
