PHP和JavaScript交互：动态数据显示教程

我们先简单设计一个演示页面，展示如何使用PHP和JavaScript协同工作，在iframe中实现实时终端输出的效果。

设计思路

创建一个模拟终端风格的界面

使用PHP生成实时输出内容

利用JavaScript实现动态加载效果

通过iframe嵌入实时输出

下面是完整的实现代码：

<!DOCTYPE html>

<head>

<title>实时终端输出演示</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', 'Roboto', monospace;

}

body {

background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

color: #fff;

min-height: 100vh;

padding: 20px;

}

.container {

max-width: 1200px;

margin: 0 auto;

}

header {

text-align: center;

margin-bottom: 30px;

padding: 20px;

background: rgba(0, 0, 0, 0.3);

border-radius: 10px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);

}

h1 {

font-size: 2.5rem;

margin-bottom: 10px;

color: #0eb1d2;

text-shadow: 0 0 10px rgba(14, 177, 210, 0.5);

}

.subtitle {

font-size: 1.2rem;

color: #64eeb7;

margin-bottom: 20px;

}

.content {

display: flex;

flex-wrap: wrap;

gap: 20px;

margin-bottom: 30px;

}

.explanation {

flex: 1;

min-width: 300px;

background: rgba(0, 0, 0, 0.3);

padding: 20px;

border-radius: 10px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);

}

h2 {

color: #0eb1d2;

margin-bottom: 15px;

border-bottom: 2px solid #64eeb7;

padding-bottom: 5px;

}

p {

line-height: 1.6;

margin-bottom: 15px;

}

ul {

padding-left: 20px;

margin-bottom: 15px;

}

li {

margin-bottom: 8px;

}

.code {

background: #1e1e1e;

padding: 15px;

border-radius: 5px;

overflow-x: auto;

margin: 15px 0;

font-family: monospace;

border-left: 4px solid #64eeb7;

}

.terminal-container {

flex: 1;

min-width: 300px;

}

.terminal {

background: #1e1e1e;

border-radius: 8px;

overflow: hidden;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);

}

.terminal-header {

background: #323233;

padding: 10px 15px;

display: flex;

align-items: center;

}

.terminal-buttons {

display: flex;

gap: 8px;

}

.terminal-button {

width: 12px;

height: 12px;

border-radius: 50%;

}

.button-close {

background: #ff5f56;

}

.button-minimize {

background: #ffbd2e;

}

.button-maximize {

background: #27c93f;

}

.terminal-title {

flex: 1;

text-align: center;

color: #aaa;

font-size: 0.9rem;

}

.terminal-content {

padding: 20px;

height: 400px;

overflow-y: auto;

font-family: monospace;

font-size: 14px;

line-height: 1.5;

}

.terminal-content iframe {

width: 100%;

height: 100%;

border: none;

background: #1e1e1e;

color: #64eeb7;

}

.command-line {

display: flex;

margin-top: 10px;

}

.prompt {

color: #64eeb7;

padding: 5px 10px;

background: #2d2d2d;

border-radius: 5px 0 0 5px;

}

#command-input {

flex: 1;

padding: 5px 10px;

background: #2d2d2d;

color: #fff;

border: none;

border-radius: 0 5px 5px 0;

outline: none;

}

.controls {

display: flex;

justify-content: center;

gap: 15px;

margin-top: 20px;

}

button {

padding: 10px 20px;

background: #0eb1d2;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background 0.3s, transform 0.2s;

font-weight: bold;

}

button:hover {

background: #0c9bb8;

transform: translateY(-2px);

}

button:active {

transform: translateY(0);

}

.footer {

text-align: center;

margin-top: 40px;

padding: 20px;

color: #aaa;

font-size: 0.9rem;

}

@media (max-width: 768px) {

.content {

flex-direction: column;

}

/* 终端文本样式 */

.command {

color: #64eeb7;

}

.response {

color: #f8f8f2;

margin-bottom: 10px;

}

.error {

color: #ff5555;

}

.success {

color: #50fa7b;

}

</style>

</head>

<body>

<h1>PHP与JavaScript协同：实时终端输出</h1>

<p class="subtitle">在Iframe中动态加载实时终端输出的实现演示</p>

</header>

<p>这个演示展示了如何使用PHP和JavaScript协同工作，在iframe中实现实时终端输出的效果。</p>

<ul>

<li>使用PHP生成实时输出内容</li>

<li>利用JavaScript控制iframe的动态加载</li>

<li>通过AJAX轮询或Server-Sent Events实现实时更新</li>

<li>使用CSS创建终端风格的界面</li>

</ul>

// PHP示例代码片段<br>

while (true) {<br>

  echo "数据: " . date('Y-m-d H:i:s') . "\n";<br>

  flush();<br>

  ob_flush();<br>

  sleep(1);<br>

}

</div>

// JavaScript示例代码片段<br>

let iframe = document.getElementById('terminal-iframe');<br>

function updateTerminal() {<br>

  iframe.contentWindow.location.reload();<br>

  setTimeout(updateTerminal, 2000);<br>

}<br>

updateTerminal();

</div>

<h2>实时终端演示</h2>

</div>

<div class="terminal-title">terminal@demo: ~/实时输出</div>

</div>

</div>

</div>

</div>

<p>PHP与JavaScript协同实现实时终端输出演示 | 设计用于教学目的</p>

</div>

document.addEventListener('DOMContentLoaded', function() {

const iframe = document.getElementById('terminal-iframe');

const startBtn = document.getElementById('start-btn');

const stopBtn = document.getElementById('stop-btn');

const clearBtn = document.getElementById('clear-btn');

const commandInput = document.getElementById('command-input');

let updateInterval;

// 模拟终端命令输入

commandInput.addEventListener('keypress', function(e) {

if (e.key === 'Enter') {

const command = this.value;

this.value = '';

// 在实际应用中，这里会发送命令到服务器

// 并显示在终端中

console.log('执行命令:', command);

}

});

// 开始实时输出

startBtn.addEventListener('click', function() {

iframe.src = 'terminal-output.php?action=start';

startBtn.disabled = true;

stopBtn.disabled = false;

// 每2秒刷新一次iframe以模拟实时输出

updateInterval = setInterval(function() {

iframe.contentWindow.location.reload();

}, 2000);

});

// 停止实时输出

stopBtn.addEventListener('click', function() {

clearInterval(updateInterval);

iframe.src = 'about:blank';

startBtn.disabled = false;

stopBtn.disabled = true;

});

// 清除终端

clearBtn.addEventListener('click', function() {

iframe.src = 'terminal-output.php?action=clear';

});

// 初始状态

stopBtn.disabled = true;

});

</script>

</body>

</html>

实现说明

1. 界面设计：

创建了终端风格的界面，包括终端窗口、命令输入行和控制按钮

使用了深色背景和霓虹蓝色调，模拟真实终端环境

2. 功能实现：

使用JavaScript控制iframe的刷新来实现实时输出效果

通过按钮控制开始、停止和清除终端输出

命令输入行可以接收用户输入（演示功能）

3. PHP后端：

需要一个名为`terminal-output.php`的PHP文件来生成实时输出

PHP文件应该能够持续输出内容，并使用`flush()`和`ob_flush()`确保实时输出

使用说明

1. 将HTML代码保存为index.html

2. 创建terminal-output.php文件，用于生成实时终端输出

3. 在浏览器中打开index.html

4. 点击"开始输出"按钮开始实时输出演示

这个设计展示了如何使用PHP和JavaScript协同工作，在iframe中实现实时终端输出的效果。实际应用中，可以使用更高级的技术如WebSocket或Server-Sent Events来实现真正的实时通信。

PHP和JavaScript交互：动态数据显示教程

评论

分类列表

标签云