Maaf, Thimble tidak dapat berfungsi dalam pelayar anda

Thimble berfungsi dalam semua pelayar berikut: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+), dan Opera.

Biar saya cuba dulu!
Thimble ada Kemaskini - Sila muat semula pelayar anda untuk mendapatkan perubahan terkini.

Memuatkan Projek

Projek anda mengambil masa yang panjang untuk dimuatkan.
Jika tidak dimuatkan, sila muat semula halaman dan cuba lagi.

Thimble tidak dapat dimulakan.

Sila muat semula pelayar anda untuk cuba memuatkan Thimble sekali lagi.

Untuk butiran ralat, buka konsol Alatan Pembangun pelayar anda.

NOTE: Jika anda menggunakan mod Pelayaran Peribadi, sila muat semula dalam mod normal.

FILES
  • Tambah fail HTML
  • Tambah fail CSS
  • Tambah fail JavaScript
  • Tambah Tutorial
  • Tambah Folder
  • Muat naik fail…
  • Muat turun fail (.zip)
Editor
Batal

Sisip Snippet Kod

HTML CSS JS
  • Komen
  • Jadual
  • Senarai Susunan
  • Senarai Tanpa-susunan
  • Borang
  • Sertakan fail JavaScript
  • Sertakan fail CSS
  • Pemain Video
  • Pemain Audio
  • Komen
  • Pemilih Gaya Elemen
  • Pemilih Kelas
  • Pemilih ID
  • Animasi Bingkai Kekunci
  • Gaya Pautan
  • Media Query
  • Fon
  • Tambah Elemen Pseudo
  • Komen
  • Fungsi Asas
  • Tatasusunan
  • Objek
  • Gelung Untuk
  • Gelung Semasa
  • Jika...Penyataan Lain
  • Kenyataan Tukar
  • Tambah Acara Klik
  • Tukar Sifat CSS
<!-- Beri komen di sini -->
<table>
  <tr>
    <th>Tajuk</th>
    <th>Tajuk</th>
  </tr>
  <tr>
    <td>Nilai</td>
    <td>Nilai</td>
  </tr>
</table>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<form action="" method="get">
  <label for="first-name">Nama pertama</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Nama akhir</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Hantar">
</form>

<script src="script.js"></script>
<!-- Tambah tag <link> ke fail HTML anda. Ini biasanya dalam tag <head> -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Pelayar anda tidak menyokong tag video ini.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Pelayar anda tidak menyokong tag audio ini.
</audio>

/* Beri komen di sini */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* Elemen untuk melaksanakan animasi */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* Kod animasi */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

/* Gaya Asas */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

/* Dilawati */
a:visited {
  color: Orchid;
}

/* Aktif */
a:active {
  color: OrangeRed;
}

/* Diserlahkan */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* Peraturan apabila lebar skrin mencapai 320px */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Peraturan apabila lebar skrin antara 321px dan 768px */
}

@media screen and (min-width: 769px) {
 /* Peraturan apabila lebar skrin melebihi 768px */
}

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

/* Tambah anak panah sebelum setiap elemen dengan class='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Beri komen di sini

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

sayHello("Norman");

var names = ["Norman", "Syafiq", "Yatt"];

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

var names = ["Norman", "Syafiq", "Yatt"];
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 = "Syafiq";

if (name === "Syafiq") {
  console.log("Helo, " + name);
} else if (name === "Yatt") {
  console.log("Helo, " + name);
} else {
  console.log("Helo, anda hebat!");
}

var name = "Syafiq";

switch(name) {
  case "Syafiq":
    console.log("Helo, " + name);
    break;
  case "Yatt":
    console.log("Helo, " + name);
    break;
  default:
    // Buat sesuatu jika tiada syarat dipatuhi
    console.log("Helo, anda hebat!");
}
  
// Pilih satu elemen dengan id="button"
var element = document.querySelector('#button');

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

// Pilih elemen dengan id='alert'
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Saiz teks  ()
  • Tema warna
  • Balut baris panjang
  • Izinkan JavaScript
  • Papar Ruang Putih
  • Tag auto-tutup
  • Kod autolengkap
  • Edit imej SVG sebagai kod
PREVIEW TUTORIAL
Auto

Terbitkan Projek anda

Anda ada membuat perubahan selepas projek ini diterbitkan sebelum ini.

Kemaskini versi penerbitan

Ini pautan yang anda boleh kongsi…

Buang Versi Penerbitan
Projek yang diterbitkan memerlukan halaman "index.html", sila tambahkannya dan cuba lagi. Ketahui selanjutnya
Batal
Terbitkan
Projek yang diterbitkan memerlukan halaman "index.html", sila tambahkannya dan cuba lagi. Ketahui selanjutnya