Загрузка видео...

Не удалось загрузить видео

На главную

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,641 просмотров • 2 лет назад •via X (Twitter)

Комментарии: 10

Фото профиля Martin Kleppe
Martin Kleppe2 лет назад

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

Фото профиля Martin Kleppe
Martin Kleppe2 лет назад

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
Martin Kleppe2 лет назад

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
Martin Kleppe2 лет назад

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
Martin Kleppe2 лет назад

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 🔵‏
xem 🔵‏2 лет назад

Lovely idea! (reminds me this meme)

Фото профиля Martin Kleppe
Martin Kleppe2 лет назад

Lol 🤣

Фото профиля Guillermo Rauch
Guillermo Rauch2 лет назад

too good

Фото профиля Simon Prickett 🇪🇺| simonprickett.dev
Simon Prickett 🇪🇺| simonprickett.dev2 лет назад

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
Martin Kleppe2 лет назад

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

Похожие видео

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 просмотров • 1 год назад