Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Time for a new mind-bending project! #QLOCK — A JavaScript Quine Clock It displays the current time in a seven-segment style, embedded within its own JavaScript source code. 🕔 🕝 🕢 🕤 🕑 🕜 (321 bytes)

338,613 görüntüleme • 2 yıl önce •via X (Twitter)

10 Yorum

Martin Kleppe profil fotoğrafı
Martin Kleppe2 yıl önce

Make sure to view the source! Here is a slightly shortened version without the setTimeout for the animation:

Martin Kleppe profil fotoğrafı
Martin Kleppe2 yıl önce

for(j=o="\n",y=5;y--;document.body.innerHTML="<pre>&lt"+(S="script>\n")+o+"\n\n&lt/"+S)for(x=-1;x++<63;o+=`(r=${r})()`[j++].fontcolor(c?'#0F0':"#444"))c=x/2%4<3&&[31599,19812,14479,31207,23524,29411,29679,30866,31727,31719,1040][(D=Date()[16+(x/8|0)])<10?D:10]&1<<(x/2|0)%4+3*y

Martin Kleppe profil fotoğrafı
Martin Kleppe2 yıl önce

The 3x5 bitmap for every digit was encoded into a number. By converting the pixels into binary data and later to an integer we were able to save some space. Here is #7 for example: ⚪️⚪️⚪️ ⚫️⚫️⚪️ ⚫️⚪️⚫️ ⚫️⚪️⚫️ ⚫️⚪️⚫️ => 111 001 010 010 010 => 29330

Martin Kleppe profil fotoğrafı
Martin Kleppe2 yıl önce

Many thanks to Cole ( who was able to cut off the ugly dangling paren in my code. He "ended up going down a golfing rabbit hole" and improved the bitmap encoding by using parseInt with base 36. That shaved ~10 bytes and gave room for the layout fix.

Martin Kleppe profil fotoğrafı
Martin Kleppe2 yıl önce

Proud to see #QLOCK being featured in "JavaScript Weekly": "Martin really captures the joy and expressiveness of JavaScript and the Web with his collection of projects, whether it’s [JSFuck], a spinning globe [...], and many more such experiments." 💌

xem 🔵‏ profil fotoğrafı
xem 🔵‏2 yıl önce

Lovely idea! (reminds me this meme)

Martin Kleppe profil fotoğrafı
Martin Kleppe2 yıl önce

Lol 🤣

Guillermo Rauch profil fotoğrafı
Guillermo Rauch2 yıl önce

too good

Simon Prickett 🇪🇺| simonprickett.dev profil fotoğrafı
Simon Prickett 🇪🇺| simonprickett.dev2 yıl önce

That’s great! I have a flipdot display that’s controlled by node… here it is being a clock (it usually shows details of passing aircraft). Sound up for the mechanical goodness.

Martin Kleppe profil fotoğrafı
Martin Kleppe2 yıl önce

Ohh, I love these mechanical flipdot displays! 🔊 ⚫️⚪️

Benzer Videolar

Create a digital watch using HTML, CSS, and JavaScript. Check✅ my breakdown of its functionality⬇️ •Features: 1. HTML Structure: - A `div` with `id="watch"` acts as the display area for the digital clock. 2. CSS Styling: - Centering: The `body` uses `flexbox` to center the watch both vertically and horizontally. - Aesthetic Design: The watch has a rounded border, a specific background color, and text styling for a modern look. 3. JavaScript Functionality: - The `updateWatch` function gets the current time using the `Date` object, formats the hours, minutes, and seconds with leading zeros (using `padStart`), and updates the `#watch` div's content. - The `setInterval` method ensures the time updates every second. - An initial call to `updateWatch()` ensures the clock doesn't show `00:00:00` for the first second. • How It Works: - When the page loads, the time is immediately displayed and updates every second. This results in a real-time clock that's accurate and visually appealing. • Potential Enhancements: 1. Add a toggle between 12-hour and 24-hour format. 2. Include the date along with the time. 3. Animate or style the time updates for a smoother experience. Remember to repost this💪 to educate others on your timeline. Don't be selfish, share. Follow me Dhanian 🗯️ and turn on notifications🤛 for more tech updates For more tech projects, check link on my profile. Remember to bookmark💪 Here's the full code snippets for the sample ⌚watch ⬇️

Dhanian 🗯️

11,134 görüntüleme • 1 yıl önce