很抱歉，Thimble 無法在您的瀏覽器中使用

Thimble 可在下列瀏覽器中使用: Firefox、Chrome、Internet Explorer 11、Microsoft Edge、Safari (8+) 以及 Opera。

還是讓我試試看！
Thimble 已有更新，請重新整理頁面，套用更新內容。

正在載入專案

看來您的專案花了不少時間載入。
若還是無法載入，請重新整理頁面後再試一次。

無法啟動 Thimble。

請重新整理頁面，再次載入 Thimble。

若需詳細錯誤資訊，請開啟您瀏覽器開發者工具當中的主控台。

註: 若您使用隱私瀏覽模式的話，請先回到一般模式再重新載入網站。

檔案
  • 新增 HTML 檔案
  • 新增 CSS 檔案
  • 新增 JavaScript 檔案
  • 新增教學
  • 新增資料夾
  • 上傳檔案…
  • 下載檔案（.zip）
編輯器
還原

插入一段程式碼

HTML CSS JS
  • 留言
  • 表格
  • 有序清單
  • 無序清單
  • 表單
  • 引入 JavaScript 檔案
  • 引入 CSS 檔案
  • 影片播放器
  • 音訊播放器
  • 註解
  • 元素類型選擇器
  • Class 選擇器
  • 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">
  您的瀏覽器不支援 &lt;video&gt; 標籤。
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的瀏覽器不支援 &lt;audio&gt; 標籤。
</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("哈囉" + name + "！");
}

sayHello("David");

var names = ["David", "Bob", "Kate"];

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

var names = ["David", "Bob", "Kate"];
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 = "Bob";

if (name === "Bob") {
  console.log("哈囉" + name + "！");
} else if (name === "Kate") {
  console.log("哈囉" + name + "！");
} else {
  console.log("&quot;哈囉陌生人！&quot;");
}

var name = "Bob";

switch(name) {
  case "Bob":
    console.log("哈囉" + name + "！");
    break;
  case "Kate":
    console.log("哈囉" + name + "！");
    break;
  default:
    // 如果不符合任何條件就做這些事
    console.log("&quot;哈囉陌生人！&quot;");
}
  
// 選擇 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 檔案。了解更多
取消
發布