很抱歉，Thimble 不适用您的浏览器

Thimble 可以在下列浏览器中正常运行：Firefox、Chrome、Internet Explorer 11, Microsoft Edge、Safari (8+) 及 Opera。

但我还想试试！
Thimble 已更新 - 请刷新页面查看最新的版本。

正在载入项目

您的项目似乎加载了很久。
如果它无法加载，请重新加载以重试。

Thimble 无法启动。

请重新载入 Thimble 以重试。

有关错误的详细信息，请打开浏览器的开发者工具 - 控制台。

注意，如果您在使用隐私浏览模式，请试试在普通模式中载入。

文件
  • 添加 HTML 文件
  • 添加 CSS 文件
  • 添加 JavaScript 文件
  • 添加教程
  • 添加文件夹
  • 上传文件...
  • 下载文件 (.zip)
编辑器
撤销

插入代码片段

HTML CSS JS
  • 注释
  • 表格
  • 有序列表
  • 无序列表
  • 表单
  • 包含一个 JavaScript 文件
  • 包含一个 CSS 文件
  • 视频播放器
  • 音频播放器
  • 注释
  • 元素类型选择器
  • 类选择器
  • ID 选择器
  • 关键帧动画
  • 链接样式
  • 媒体查询
  • 字体
  • 添加伪元素
  • 注释
  • 基本函数
  • 数组
  • 对象
  • For 循环
  • While 循环
  • If...Else 语句
  • Switch 语句
  • 添加一个点击事件
  • 更改 CSS 属性
<!-- 在这里添加您的注释 -->
<table>
  <tr>
    <th>标题</th>
    <th>标题</th>
  </tr>
  <tr>
    <td>值</td>
    <td>值</td>
  </tr>
</table>

<ol>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

<form action="" method="get">
  <label for="first-name">名</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">姓</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="提交">
</form>

<script src="script.js"></script>
<!-- 添加 <link> 标签到你的 HTML 文件。这些通常位于 <head> 标签内 -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 标签。
</audio>

/* 在这里添加您的注释 */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* 要应用动画的元素 */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* 动画代码 */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

/* 基本样式 */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

/* 已访问 */
a:visited {
  color: Orchid;
}

/* 活动 */
a:active {
  color: OrangeRed;
}

/* 被悬停 */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* 屏幕宽度达 320px 时的规则 */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* 屏幕宽度在 321px 至 768px 时的规则 */
}

@media screen and (min-width: 769px) {
 /* 屏幕宽度超过 768px 时的规则 */
}

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

/* 在每个 class='arrow' 的元素前面添加一个箭头 */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// 在这里添加您的注释

function sayHello(name) {
  console.log("Hello, " + name);
}

sayHello("大卫");

var names = ["大卫", "鲍勃", "凯特"];

var person = {
  name: "鲍勃",
  skills: ["JS", "HTML"]
};

var names = ["大卫", "鲍勃", "凯特"];
var name;

for (var i = 0; i < names.length; i++) {
  name = names[i];
  console.log(name);
}

var count = 5;

while (count > 0) {
  console.log(count);
  count = count - 1;
}

var name = "鲍勃";

if (name === "鲍勃") {
  console.log("Hello, " + name);
} else if (name === "凯特") {
  console.log("Hello, " + name);
} else {
  console.log("Hello, stranger!");
}

var name = "鲍勃";

switch(name) {
  case "鲍勃":
    console.log("Hello, " + name);
    break;
  case "凯特":
    console.log("Hello, " + name);
    break;
  default:
    // 没有满足条件的情况下执行的动作
    console.log("Hello, stranger!");
}
  
// 选择 id="button" 的一个元素
var element = document.querySelector('#button');

element.addEventListener("click", function() {
  console.log("Click!");
});

// 选择 id='alert' 的元素
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • 文字大小  ()
  • 颜色主题
  • 自动换行
  • 允许 JavaScript
  • 显示空白
  • 自动关闭标签
  • 自动完成代码
  • 用代码编辑 SVG 图像
预览 教程
自动

发布你的项目

在您上次发布此项目后，您进行了更改。

更新已发布的版本

您可以分享这个链接...

删除已发布版本
发布的项目需要一个 "index.html" 页面，请添加它并重试。详细了解
取消
发布
发布的项目需要一个 "index.html" 页面，请添加它并重试。详细了解