Web clock implementation of clock interface design in a game TrymenT ―今を変えたいと願うあなたへ―. A digital clock with a special visual style is provided.
I like this game very much. When will RASK release OmegaA? We agreed to split the commercial law, and don't be unfinished!
With the leftmost pointer as the indication, the pointer does not move, instead, the inner and outer disks keep moving. The inner disk represents hours and the outer disk represents minutes.
- Unique double-loop clock design
- Special fonts and symbol marks
- Customize the date display format
- Responsive design, adaptive to different screen sizes
- Semi-transparent background picture effect
Only three files need to be imported to use the clock:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrymenT ClocK</title>
<!-- the loading code is here. min.css/js and css/js have the same content, which is automatically updated -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/TrymenT-ClocK/TrymenT-ClocK.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/TrymenT-ClocK/TrymenT-ClocK.min.js"></script>
</head>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrymenT ClocK</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/TrymenT-ClocK/TrymenT-ClocK.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/TrymenT-ClocK/TrymenT-ClocK.min.js"></script>
</head>
<body>
<!-- Here -->
<div class="clock-container">
<div class="clock">
</div>
<div class="clock-date-display">
<div class="clock-date-label">What'S ThE DatE</div>
<div class="clock-date-value" id="current-date"></div>
</div>
</div>
</body>
</html>TrymenT-ClocK.css- clock style sheetTrymenT-ClocK.js- realization of clock functionimg.png- Background picture resources
You can adjust the appearance of the clock by modifying CSS files, or adjust the behavior of the clock by modifying JS files.
Compatible with all modern browsers (Chrome, Firefox, Safari, Edge, etc).
Please refer to the LICENSE file in the project for details.
Inspired by the clock interface design in TrymenT ―今を変えたいと願うあなたへ―.