Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container d-block">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dimaslanjaka/Web-Manajemen@master/AGC/css/responsive.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Euphoria+Script">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/summernote/summernote@develop/dist/summernote-bs4.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/material.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/show-hint.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/dialog/dialog.css">
  <h2 style="text-align: center;">Membuat Jam Analog dan Digital Dengan Javascript</h2>
  <p><strong>Membuat Jam Analog dan Digital Dengan Javascript</strong> – Seperti yang sudah kita pelajari dan dijelaskan
    sebelumnya pada tutorial Javascript dasar di malasngoding.com.</p>
  <p>Bahwa javascript bisa kita gunakan untuk membuat halaman website menjadi lebih interaktif. contohnya seperti
    tutorial&nbsp;<strong>Membuat Jam Analog dan Digital Dengan Javascript</strong> ini.</p>
  <p>Kita bisa <strong>membuat jam digital dengan javascript</strong>. dan kita juga bisa <strong>membuat jam analog
      dengan javascript</strong>. dan caranya pun sangat mudah. karena kita hanya menggunakan syntax dan fungsi-fungsi
    dasar yang sudah kita pelajari bersama-sama pada <a
      href="https://www.malasngoding.com/belajar-javascript-pengertian-dan-pengenalan-javascript/" target="_blank"
      rel="noopener noreferrer">tutorial dasar javascript</a>.</p>
  <p>BACA JUGA : <a href="https://www.malasngoding.com/category/javascript-dasar/" target="_blank"
      rel="noopener noreferrer">Tutorial javascript dasar untuk pemula</a></p>
  <p>Langsung saja kita masuk ke bagian materi. silahkan teman-teman perhatikan dan ikuti secara teliti dan seksama.</p>
  <h3>Membuat Jam Analog dan Digital Dengan Javascript</h3>
  <p>Saya asumsikan kepada teman-teman untuk membaca terlebih dulu tutorial-tutorial javascript dasar di
    www.malasngoding.com. agar lebih mudah memahami syntax atau coding jam dengan javascript yang sebentar lagi akan
    kita buat.</p>
  <div id="attachment_3201" style="width: 660px" class="wp-caption aligncenter"><img
      aria-describedby="caption-attachment-3201" class="wp-image-3201"
      src="https://www.malasngoding.com/wp-content/uploads/2018/10/membuat-jam-analog-dan-digital-dengan-javascript.png"
      alt="membuat jam analog dan digital dengan javascript" width="650" height="422"
      srcset="https://www.malasngoding.com/wp-content/uploads/2018/10/membuat-jam-analog-dan-digital-dengan-javascript.png 912w, https://www.malasngoding.com/wp-content/uploads/2018/10/membuat-jam-analog-dan-digital-dengan-javascript-600x389.png 600w, https://www.malasngoding.com/wp-content/uploads/2018/10/membuat-jam-analog-dan-digital-dengan-javascript-300x195.png 300w, https://www.malasngoding.com/wp-content/uploads/2018/10/membuat-jam-analog-dan-digital-dengan-javascript-768x499.png 768w"
      sizes="(max-width: 650px) 100vw, 650px">
    <p id="caption-attachment-3201" class="wp-caption-text">membuat jam analog dan digital dengan javascript</p>
  </div>
  <p>Di tutorial ini kita akan belajar membuat jam digital dengan javascript. dan belajar membuat jam analog sederhana
    dengan javascript. dimana nantinya jam yang kita buat ini bisa teman-teman terapkan codingnya ke blog atau website
    teman-teman sebagai <strong>widget jam</strong>.</p>
  <p>Kita mulai dengan belajar membuat jam digital.</p>
  <h3>Membuat Jam Digital Dengan Javascript</h3>
  <p>Untuk cara membuat jam digital dengan javascript silahkan teman-teman ketik&nbsp;coding berikut. dan menyimpannya
    di dalam file HTML atau PHP. di sini saya menyimpannya dalam file dengan nama jam_digital.html</p>
  <p><strong>jam_digital.html</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
  <div id="crayon-5df25ffdec029464390559"
    class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate"
    data-settings=" minimize scroll-mouseover"
    style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 22px !important;">
    <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay"
      style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span
        class="crayon-title"></span>
      <div class="crayon-tools"
        style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span
          class="crayon-mixed-highlight" title="Contains Mixed Languages"></span>
        <div class="crayon-button crayon-nums-button" title="Toggle Line Numbers">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-plain-button" title="Toggle Plain Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-expand-button" title="Expand Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-copy-button" title="Copy">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-popup-button" title="Open Code In New Window">
          <div class="crayon-button-icon"></div>
        </div>
      </div>
    </div>
    <div class="crayon-info" style="min-height: 18.2px !important; line-height: 18.2px !important;"></div> <textarea
      id="CodeMirror"> &lt;!DOCTYPE html&gt;  &lt;html&gt;  &lt;head&gt;  	&lt;title&gt;Membuat Jam Digital Dengan Javascript - www.malasngoding.com&lt;/title&gt;  &lt;/head&gt;  &lt;body&gt;    	&lt;style&gt;  	h1,h2,p,a{  		font-family: sans-serif;  		font-weight: normal;  	}    	.jam-digital-malasngoding {  		overflow: hidden;  		width: 330px;  		margin: 20px auto;  		border: 5px solid #efefef;  	}  	.kotak{  		float: left;  		width: 110px;  		height: 100px;  		background-color: #189fff;  	}  	.jam-digital-malasngoding p {  		color: #fff;  		font-size: 36px;  		text-align: center;  		margin-top: 30px;  	}      &lt;/style&gt;    &lt;center&gt;  	&lt;h1&gt;Tutorial Membuat Jam Digital Dengan Javascript&lt;/h1&gt;  	&lt;h2&gt;www.malasngoding.com&lt;/h2&gt;  &lt;/center&gt;    &lt;div class="jam-digital-malasngoding"&gt;  	&lt;div class="kotak"&gt;  		&lt;p id="jam"&gt;&lt;/p&gt;  	&lt;/div&gt;  	&lt;div class="kotak"&gt;  		&lt;p id="menit"&gt;&lt;/p&gt;  	&lt;/div&gt;  	&lt;div class="kotak"&gt;  		&lt;p id="detik"&gt;&lt;/p&gt;  	&lt;/div&gt;  &lt;/div&gt;    &lt;center&gt;  	&lt;a href="https://www.malasngoding.com/membuat-jam-analog-dan-digital-dengan-javascript"&gt;TUTORIAL&lt;/a&gt;  &lt;/center&gt;    &lt;script&gt;  	window.setTimeout("waktu()", 1000);    	function waktu() {  		var waktu = new Date();  		setTimeout("waktu()", 1000);  		document.getElementById("jam").innerHTML = waktu.getHours();  		document.getElementById("menit").innerHTML = waktu.getMinutes();  		document.getElementById("detik").innerHTML = waktu.getSeconds();  	}  &lt;/script&gt;  &lt;/body&gt;  &lt;/html&gt;</textarea>
  </div> <!-- [Format Time: 0.0071 seconds] -->
  <p>Dan jika di jalankan maka hasilnya akan seperti berikut.</p>
  <div id="attachment_3199" style="width: 650px" class="wp-caption aligncenter"><img
      aria-describedby="caption-attachment-3199" class="size-full wp-image-3199"
      src="https://www.malasngoding.com/wp-content/uploads/2018/10/membuat-jam-digital-dengan-javascript.gif"
      alt="membuat jam digital dengan javascript" width="640" height="249">
    <p id="caption-attachment-3199" class="wp-caption-text">membuat jam digital dengan javascript</p>
  </div>
  <p>Seperti yang terlihat pada gambar jam digital di atas. jam, menit, detiknya pun muncul dengan <span
      style="color: #339966;"><em>real time</em></span>.</p>
  <p>Sesuai dengan jam pada saat ini, yaitu jam 15:17 WIB.</p>
  <h4>Penjelasan Jam Digital Javascript</h4>
  <p>Perhatikan pada syntax di atas tadi. kita membuat beberapa element HTML yang kita beri penamaan <a
      href="https://www.malasngoding.com/belajar-html-mengenal-class-dan-id-pada-html/" target="_blank"
      rel="noopener noreferrer">class dan id</a> masing-masing.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
  <div id="crayon-5df25ffdec035191137192"
    class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate"
    data-settings=" minimize scroll-mouseover"
    style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 22px !important;">
    <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay"
      style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span
        class="crayon-title"></span>
      <div class="crayon-tools"
        style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;">
        <div class="crayon-button crayon-nums-button" title="Toggle Line Numbers">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-plain-button" title="Toggle Plain Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-expand-button" title="Expand Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-copy-button" title="Copy">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-popup-button" title="Open Code In New Window">
          <div class="crayon-button-icon"></div>
        </div>
      </div>
    </div>
    <div class="crayon-info" style="min-height: 18.2px !important; line-height: 18.2px !important;"></div> <textarea
      id="CodeMirror"> &lt;div class="jam-digital-malasngoding"&gt;  	&lt;div class="kotak"&gt;  		&lt;p id="jam"&gt;&lt;/p&gt;  	&lt;/div&gt;  	&lt;div class="kotak"&gt;  		&lt;p id="menit"&gt;&lt;/p&gt;  	&lt;/div&gt;  	&lt;div class="kotak"&gt;  		&lt;p id="detik"&gt;&lt;/p&gt;  	&lt;/div&gt;  &lt;/div&gt;</textarea>
  </div> <!-- [Format Time: 0.0005 seconds] -->
  <p>ada 3 element penting di sana, yang kita beri id jam, id menit, dan id detik. pada masing-masing id tersebut akan
    kita tampilkan sesuai dengan nama id nya masing-masing dengan <a href="https://www.javascript.com/" target="_blank"
      rel="noopener noreferrer">javascript</a>. misalnya pada id jam kita tampilkan jam sekarang, pada id menit kita
    tampilkan menit sekarang, dan pada id detik kita tampikan detik yang berjalan sekarang secara <em>real-time</em>.
  </p>
  <p>perhatikan pada bagian javascript.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
  <div id="crayon-5df25ffdec03a429156823"
    class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate"
    data-settings=" minimize scroll-mouseover"
    style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 22px !important;">
    <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay"
      style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span
        class="crayon-title"></span>
      <div class="crayon-tools"
        style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span
          class="crayon-mixed-highlight" title="Contains Mixed Languages"></span>
        <div class="crayon-button crayon-nums-button" title="Toggle Line Numbers">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-plain-button" title="Toggle Plain Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-expand-button" title="Expand Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-copy-button" title="Copy">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-popup-button" title="Open Code In New Window">
          <div class="crayon-button-icon"></div>
        </div>
      </div>
    </div>
    <div class="crayon-info" style="min-height: 18.2px !important; line-height: 18.2px !important;"></div> <textarea
      id="CodeMirror"> &lt;script&gt;  	window.setTimeout("waktu()", 1000);    	function waktu() {  		var waktu = new Date();  		setTimeout("waktu()", 1000);  		document.getElementById("jam").innerHTML = waktu.getHours();  		document.getElementById("menit").innerHTML = waktu.getMinutes();  		document.getElementById("detik").innerHTML = waktu.getSeconds();  	}  &lt;/script&gt;</textarea>
  </div> <!-- [Format Time: 0.0006 seconds] -->
  <p>di sini kita memerintahkan menjalankan <em><span style="color: #339966;">function</span> <span
        style="color: #ff00ff;">waktu()</span></em> saat 1 detik pertama halaman ini di jalankan.</p>
  <p>dan perhatikan pada&nbsp;<em><span style="color: #339966;">function</span>&nbsp;<span
        style="color: #ff00ff;">waktu()</span></em>. di sana kita membuat sebuah variabel dengan nama “waktu”. dan
    menimpan data waktu atau tanggal sekarang.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
  <div id="crayon-5df25ffdec03c620701657"
    class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate"
    data-settings=" minimize scroll-mouseover"
    style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 22px !important;">
    <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay"
      style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span
        class="crayon-title"></span>
      <div class="crayon-tools"
        style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;">
        <div class="crayon-button crayon-nums-button" title="Toggle Line Numbers">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-plain-button" title="Toggle Plain Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-expand-button" title="Expand Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-copy-button" title="Copy">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-popup-button" title="Open Code In New Window">
          <div class="crayon-button-icon"></div>
        </div>
      </div>
    </div>
    <div class="crayon-info" style="min-height: 18.2px !important; line-height: 18.2px !important;"></div> <textarea
      id="CodeMirror"> var waktu = new Date();</textarea>
  </div> <!-- [Format Time: 0.0001 seconds] -->
  <p>kemudian menjalankan lagi function waktu() setelah 1 detik. ini untuk membuat perintah agar fungsi ini di jalankan
    setiap detik. sesuai dengan jam digital yang menampikan perubahan detiknya setiap 1 detik sekali.</p>
  <p>dan terakhir, data waktu atau tanggal yang terlah tersimpan dalam variabel waktu tadi kita pecah-pecah isinya
    dengan cara menampilkan jam ( <span style="color: #00ccff;">waktu.getHours()</span> ) pada <span
      style="color: #339966;">id jam</span>. menampilkan menit ( <span style="color: #00ccff;">waktu.getMinutes()</span>
    ) pada <span style="color: #339966;">id menit</span>. serta menampilkan detik (<span
      style="color: #00ccff;">waktu.getSeconds()</span> ) pada <span style="color: #339966;">id detik</span>.</p>
  <!-- Crayon Syntax Highlighter v_2.7.2_beta -->
  <div id="crayon-5df25ffdec03e081094687"
    class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate"
    data-settings=" minimize scroll-mouseover"
    style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 22px !important;">
    <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay"
      style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span
        class="crayon-title"></span>
      <div class="crayon-tools"
        style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;">
        <div class="crayon-button crayon-nums-button" title="Toggle Line Numbers">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-plain-button" title="Toggle Plain Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-expand-button" title="Expand Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-copy-button" title="Copy">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-popup-button" title="Open Code In New Window">
          <div class="crayon-button-icon"></div>
        </div>
      </div>
    </div>
    <div class="crayon-info" style="min-height: 18.2px !important; line-height: 18.2px !important;"></div> <textarea
      id="CodeMirror"> document.getElementById("jam").innerHTML = waktu.getHours();  document.getElementById("menit").innerHTML = waktu.getMinutes();  document.getElementById("detik").innerHTML = waktu.getSeconds();</textarea>
  </div> <!-- [Format Time: 0.0003 seconds] -->
  <p>Oke selesai, diharapakan teman-teman bisa mudah memahami penjelasan ini. jika teman-teman masih kurang mengerti,
    silahkan untuk meninggalkan komentar di akhir tutorial ini. insyallah jika ada kemudahan waktu akan saya balas.</p>
  <p>Selanjutnya kita akan belajar membuat <em>jam analog sederhana</em> tapi keren dengan javascript.</p>
  <h3>Membuat Jam Analog Dengan Javascript</h3>
  <p>Kita lanjutkan dengan belajar membuat jam analog dengan javascript.</p>
  <p>Perhatikan syntax berikut.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
  <div id="crayon-5df25ffdec040299027492"
    class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate"
    data-settings=" minimize scroll-mouseover"
    style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 22px !important;">
    <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay"
      style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span
        class="crayon-title"></span>
      <div class="crayon-tools"
        style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span
          class="crayon-mixed-highlight" title="Contains Mixed Languages"></span>
        <div class="crayon-button crayon-nums-button" title="Toggle Line Numbers">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-plain-button" title="Toggle Plain Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-expand-button" title="Expand Code">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-copy-button" title="Copy">
          <div class="crayon-button-icon"></div>
        </div>
        <div class="crayon-button crayon-popup-button" title="Open Code In New Window">
          <div class="crayon-button-icon"></div>
        </div>
      </div>
    </div>
    <div class="crayon-info" style="min-height: 18.2px !important; line-height: 18.2px !important;"></div> <textarea
      id="CodeMirror"> &lt;!DOCTYPE html&gt;  &lt;html&gt;  &lt;head&gt;  	&lt;title&gt;Membuat Jam Digital Dengan Javascript - www.malasngoding.com&lt;/title&gt;  	&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;  &lt;/head&gt;  &lt;body&gt;  	&lt;style type="text/css"&gt;    	h1,h2,p,a{  		font-family: sans-serif;  		font-weight: normal;  	}    	.jam_analog_malasngoding {  		background: #e7f2f7;  		position: relative;  		width: 240px;  		height: 240px;  		border: 16px solid #52b6f0;  		border-radius: 50%;  		padding: 20px;  		margin:20px auto;  	}    	.xxx {  		height: 100%;  		width: 100%;  		position: relative;  	}    	.jarum {  		position: absolute;  		width: 50%;  		background: #232323;  		top: 50%;  		transform: rotate(90deg);  		transform-origin: 100%;  		transition: all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);  	}    	.lingkaran_tengah {  		width: 24px;  		height: 24px;  		background: #232323;  		border: 4px solid #52b6f0;  		position: absolute;  		top: 50%;  		left: 50%;  		margin-left: -14px;  		margin-top: -14px;  		border-radius: 50%;  	}    	.jarum_detik {  		height: 2px;  		border-radius: 1px;  		background: #F0C952;  	}    	.jarum_menit {  		height: 4px;  		border-radius: 4px;  	}    	.jarum_jam {  		height: 8px;  		border-radius: 4px;  		width: 35%;  		left: 15%;  	}  &lt;/style&gt;      &lt;center&gt;  	&lt;h1&gt;Tutorial Membuat Jam Digital Dengan Javascript&lt;/h1&gt;  	&lt;h2&gt;www.malasngoding.com&lt;/h2&gt;  &lt;/center&gt;    &lt;div class="jam_analog_malasngoding"&gt;  	&lt;div class="xxx"&gt;  		&lt;div class="jarum jarum_detik"&gt;&lt;/div&gt;  		&lt;div class="jarum jarum_menit"&gt;&lt;/div&gt;  		&lt;div class="jarum jarum_jam"&gt;&lt;/div&gt;  		&lt;div class="lingkaran_tengah"&gt;&lt;/div&gt;  	&lt;/div&gt;  &lt;/div&gt;    &lt;center&gt;  	&lt;a href="https://www.malasngoding.com/membuat-jam-analog-dan-digital-dengan-javascript"&gt;TUTORIAL&lt;/a&gt;  &lt;/center&gt;          &lt;script type="text/javascript"&gt;  	const secondHand = document.querySelector('.jarum_detik');  	const minuteHand = document.querySelector('.jarum_menit');  	const jarum_jam = document.querySelector('.jarum_jam');    	function setDate(){  		const now = new Date();    		const seconds = now.getSeconds();  		const secondsDegrees = ((seconds / 60) * 360) + 90;  		secondHand.style.transform = `rotate(${secondsDegrees}deg)`;  		if (secondsDegrees === 90) {  			secondHand.style.transition = 'none';  		} else if (secondsDegrees &gt;= 91) {  			secondHand.style.transition = 'all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)'  		}    		const minutes = now.getMinutes();  		const minutesDegrees = ((minutes / 60) * 360) + 90;  		minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;    		const hours = now.getHours();  		const hoursDegrees = ((hours / 12) * 360) + 90;  		jarum_jam.style.transform = `rotate(${hoursDegrees}deg)`;  	}    	setInterval(setDate, 1000)  &lt;/script&gt;  &lt;/body&gt;  &lt;/html&gt;</textarea>
  </div> <!-- [Format Time: 0.0036 seconds] -->
  <p>Coba jalankan pada browser dan hasilnya seperti berikut.</p>
  <div id="attachment_3200" style="width: 650px" class="wp-caption aligncenter"><img
      aria-describedby="caption-attachment-3200" class="size-full wp-image-3200"
      src="https://www.malasngoding.com/wp-content/uploads/2018/10/membuat-jam-analog-dengan-javascript.gif"
      alt="membuat jam analog dengan javascript" width="640" height="373">
    <p id="caption-attachment-3200" class="wp-caption-text">membuat jam analog dengan javascript</p>
  </div>
  <p>Dan selesai. caranya tidak jauh berbeda dengan penjelasan sebelumnya.</p>
  <p>Teman-teman bisa menerapkan syntax jam analog atau jam digital dengan javascript ini langsung pada website atau
    blog teman-teman. dan bisa mengubah css nya agar tampilan jam nya bisa sesuai dengan keinginan teman-teman.</p>
  <p>&nbsp;</p>
  <p>Terima kasih sudah mengikuti tutorial&nbsp;Membuat Jam Analog dan Digital Dengan Javascript. semoga contoh coding
    javascript ini dapat bermanfaat.</p>
  <p style="text-align: center;"><a href="https://github.com/malasngoding/jam-analog-dan-digital-javascript"
      target="_blank" rel="noopener noreferrer">DOWNLOAD</a></p>
  <h4>Incoming search terms:</h4>
  <ul>
    <li>menampilkan jam berjalan di php</li>
    <li>contoh aplikasi javascript</li>
    <li>studi kasus javascript</li>
    <li>membuat web dengan javascript malas ngoding</li>
    <li>tutorial java script malasngoding</li>
    <li>membuat jam dengan javascript</li>
    <li>script untuk jam</li>
    <li>script jam</li>
    <li>script coding javascript</li>
    <li>desain tanggal menggunakan javascrip dilayout web</li>
  </ul>
  <p></p>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/javascript/javascript.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/xml/xml.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/htmlmixed/htmlmixed.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/css/css.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/show-hint.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/css-hint.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/html-hint.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/javascript-hint.js"></script>
  <script src="https://codemirror.net/2/lib/util/formatting.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/display/autorefresh.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/search/search.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/search/searchcursor.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/search/jump-to-line.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/search/match-highlighter.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/dialog/dialog.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dimaslanjaka/Web-Manajemen@master/AGC/css/responsive.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Euphoria+Script">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/summernote/summernote@develop/dist/summernote-bs4.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/material.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/show-hint.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/dialog/dialog.css">
</div>
              
            
!

CSS

              
                /**
 *
 * In this pen:
 * added stylesheets with CDN:
 *   -  //cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.css
 *   -  //cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/theme/material.css
 *
 */

*, *:after, *:before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
html {
	background: #fff;
	text-rendering: optimizeLegibility;
	line-height: 1.5em;
	letter-spacing: .3px;
	font-family: 'Poppins', sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body {
	color: #151515;
}
html {
	font-family: 'Geneva', sans-serif;
}


/* ----------
	WRAPPERS & CONTAINERS
---------- */
section {
	position: relative;
	padding: 2.5rem 0;
}
.container {
	position: relative;
	margin: auto;
	padding: 0 20px;
	width: 100%;
	max-width: 970px;
}
section:after, .container:after, .row:after {
	display: table;
	content: '';
	clear: both;
}


/* ----------
	ANHOR TAG
---------- */
a {
	cursor: pointer;
	outline: 0;
}
h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a,
p  > a {
	color: #ed9d0a;
	text-decoration: none;
}
h1 > a:hover,
h2 > a:hover,
h3 > a:hover,
h4 > a:hover,
h5 > a:hover,
h6 > a:hover,
p  > a:hover {
	text-decoration: underline;
}


/* ----------
	TYPOGRAPHY
---------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
ul {
	margin-bottom: 1rem;
	-ms-word-break: break-word;
	-ms-word-wrap: break-word;
	-webkit-word-break: break-word;
	-webkit-word-wrap: break-word;
	word-break: break-word;
	word-wrap: break-word;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
blockquote:last-child,
ul:last-child {
	margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.25em;
	letter-spacing: 1px;
	font-weight: 600;
}
h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child),
h5:not(:first-child),
h6:not(:first-child) {
	margin-top: 1.5em;
}
h1 {
	letter-spacing: 2px;
	font-size: 1.75rem;
}
h2 {
	font-size: 1.5rem;
}
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
	font-weight: 700;
}
p {
	line-height: 1.5em;
}
ul {
	padding-left: 1.5rem;
}
hr {
	border: 0;
	border-top: 1px solid #e1e1e1;
}


/* ----------
	CODE BLOCK
---------- */
.code-container {
	position: relative;
	margin-bottom: 1.5rem;
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
}
.code-container:last-child {
	margin-bottom: 0;
}

.btn {
	background-color: #ed9d0a;
	color: #fff;
	padding: 4px 10px;
	text-decoration: none;
	border-radius: 3px;
	box-shadow: 0 8px 6px -6px rgba(0, 0, 0, .15);
	-webkit-backface-visibility: hidden;
	-webkit-transition: 200ms -webkit-transform ease, 200ms transform ease, 200ms box-shadow ease;
			transition: 200ms -webkit-transform ease, 200ms transform ease, 200ms box-shadow ease;
}
.btn:hover {
	box-shadow: 0 6px 6px -4px rgba(0, 0, 0, .2);
	-webkit-transform: translateY(-2px);
			transform: translateY(-2px);
}
.btn.btn-left {
	float: left;
}
.btn.btn-right {
	float: right;
}


.row {
	margin-bottom: 1.5rem;
	width: 100%;
}
.row:last-child {
	margin-bottom: 0;
}

textarea {
  width: 100%;
}
              
            
!

JS

              
                if (location.host == 'cdpn.io') {
  console.clear();
}
editorId = document.querySelectorAll("textarea#CodeMirror");
for (var i in editorId) {
  id = editorId[i];
  if (typeof id.id != 'undefined') {
    //CodeMirrorInit(id, i);
  }
}

function CodeMirrorInit(editorId, index) {
  if (editorId) {
    myCodeMirror = CodeMirror.fromTextArea(editorId, {
      lineNumbers: true,
      lineWrapping: true,
      extraKeys: {
        "Ctrl-Q": function(cm) {
          cm.foldCode(cm.getCursor());
        },
        "Ctrl-Space": "autocomplete",
      },
      foldGutter: true,
      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
      mode: 'htmlmixed',
      //mode: "text/html",
      readOnly: false,
      theme: 'material',
      autoRefresh: true,
    });
    myCodeMirror.setSelection({
      'line': myCodeMirror.firstLine(),
      'ch': 0,
      'sticky': null
    }, {
      'line': myCodeMirror.lastLine(),
      'ch': 0,
      'sticky': null
    }, {
      scroll: false
    });
    myCodeMirror.indentSelection("smart");
    CodeMirror.commands["selectAll"](myCodeMirror);
    var range = {
      from: myCodeMirror.getCursor(true),
      to: myCodeMirror.getCursor(false)
    };
    myCodeMirror.indentSelection("smart");
    //myCodeMirror.autoFormatRange(range.from, range.to);
    /*
    myCodeMirror.on('keyup', function (cMirror) {
      $('#live-preview').html(cMirror.getValue());
      $("#summernote").summernote("code", cMirror.getValue());
    });

    myCodeMirror.setValue($('#source').html());
    $('#source').remove();
    myCodeMirror.refresh();
    CodeMirror.commands["selectAll"](myCodeMirror);
    $('#autoFormatSelection').click(function (e) {
      e.preventDefault();
      CodeMirror.commands["selectAll"](myCodeMirror);
      var range = {
        from: myCodeMirror.getCursor(true),
        to: myCodeMirror.getCursor(false)
      };
      myCodeMirror.autoFormatRange(range.from, range.to);
    });
    $('#commentSelection-true').click(function (e) {
      e.preventDefault();

      var range = {
        from: myCodeMirror.getCursor(true),
        to: myCodeMirror.getCursor(false)
      };
      myCodeMirror.commentRange(true, range.from, range.to);
    });
    $('#commentSelection-false').click(function (e) {
      e.preventDefault();

      var range = {
        from: myCodeMirror.getCursor(true),
        to: myCodeMirror.getCursor(false)
      };
      myCodeMirror.commentRange(false, range.from, range.to);
    });
    */
  }
}
              
            
!
999px

Console