云笔墨 - 代码预览插件 - html、css、js线上运行环境

HTML

CSS

JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>示例页面</title>
</head>
<body>
  <h1>欢迎使用代码预览插件</h1>
  <p>这是一个简单的示例，编辑代码查看实时预览效果。</p>
  <button id="demo-btn">点击我</button>
  <div id="output"></div>
</body>
</html>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  line-height: 1.6;
}

h1 {
  color: #4a6ee0;
  border-bottom: 2px solid #eaeaea;
  padding-bottom: 10px;
}

#demo-btn {
  background-color: #4a6ee0;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

#demo-btn:hover {
  background-color: #3a5ec0;
}

#output {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementById('demo-btn');
  const output = document.getElementById('output');

  button.addEventListener('click', function() {
    const now = new Date();
    output.innerHTML = `<p>按钮点击时间: ${now.toLocaleTimeString()}</p>`;

    // 创建一些动态元素
    const newElement = document.createElement('div');
    newElement.innerHTML = '<p>这是JavaScript动态生成的内容!</p>';
    newElement.style.color = '#4a6ee0';
    newElement.style.marginTop = '10px';
    output.appendChild(newElement);
  });
});

预览