js实现创意字母组合显示时间代码
代码语言：html
所属分类：其他
代码描述：js实现创意字母组合显示时间代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
/*
global
*/
@import url(//fonts.googleapis.com/css2?family=Roboto+Mono&display=swap);
*, *::before, *::after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
*:focus {
outline: none;
}
html {
font-size: 16px;
}
@media (max-width: 1200px), (max-height: 1200px) {
html {
font-size: 14px;
}
}
@media (max-width: 992px), (max-height: 992px) {
html {
font-size: 12px;
}
}
@media (max-width: 768px), (max-height: 768px) {
html {
font-size: 10px;
}
}
@media (max-width: 576px), (max-height: 576px) {
html {
font-size: 8px;
}
}
@media (max-width: 480px), (max-height: 480px) {
html {
font-size: 6px;
}
}
@media (max-width: 384px), (max-height: 384px) {
html {
font-size: 4px;
}
}
@media (max-width: 288px), (max-height: 288px) {
html {
font-size: 2px;
}
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #111;
overflow: hidden;
font-family: 'Roboto Mono', monospace;
}
body.background-1 {
background-image: url('//repo.bfw.wiki/bfwrepo/image/671b19689e40c.png');
}
body.background-2 {
background-image: url('//repo.bfw.wiki/bfwrepo/image/60b626c1468ea.png');
}
body.background-3 {
background-image: url('//repo.bfw.wiki/bfwrepo/image/643a9a10cad39.png');
}
body.background-4 {
background: radial-gradient(#333333, #000000);
}
/*
qlocktwo
*/
.qlocktwo {
--_transistion-duration: 500ms;
--_transistion-timing-function: ease-out;
--_color-inactive: rgb(90, 90, 90);
--_color-active: rgb(255, 255, 255);
--_color-background: rgb(0, 0, 0);
text-transform: uppercase;
font-size: 2rem;
padding: 10.625rem;
aspect-ratio: 1 / 1;
display: grid;
grid-template-rows: repeat(10, 1fr);
grid-template-columns: repeat(11, 1fr);
position: relative;
-webkit-box-shadow: 0px 0.5rem 1.75rem 0.25rem rgba(0,0,0,0.8);
box-shadow: 0px 0.5rem 1.75rem 0.25rem rgba(0,0,0,0.8);
}
.qlocktwo.background-1 {
background-color: var(--_color-background);
}
.qlocktwo.background-2 {
background-image: url('');
}
.qlocktwo.background-3 {
background-image: url('');
}
.qlocktwo.background-4 {
background-color: rgb(245, 245, 245);
}
.qlocktwo .qlocktwo-letter {
color: var(--_color-inactive);
padding: 0.625rem 1.25rem;
display: flex;
justify-content: center;
align-items: center;
transition: color var(--_transistion-duration) var(--_transistion-timing-function);
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.qlocktwo .qlocktwo-letter.active {
color: var(--_color-active);
}
.qlocktwo .qlocktwo-letter.special-character::after {
content: attr( data-special-character );
color: inherit;
font-size: inherit;
position: absolute;
}
.qlocktwo .qlocktwo-point {
position: absolute;
width: 0.563rem;
height: 0.563rem;
border-radius: 50%;
transition: background-color var(--_transistion-duration) var(--_transistion-timing-function);
background-color: var(--_color-inactive);
}
.qlocktwo .qlocktwo-point.active {
background-color: var(--_color-active);
}
.qlocktwo .qlocktwo-seconds-wrapper {
position: absolute;
bottom: 3.5rem;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
display: flex;
gap: 0.063rem;
}
.qlocktwo .qlocktwo-seconds-wrapper .qlocktwo-second {
width: 0.063rem;
height: 0.563rem;
background-color: var(--_color-inactive);
transition: background-color var(--_transistion-duration) var(--_transistion-timing-function);
}
.qlocktwo .qlocktwo-seconds-wrapper .qlocktwo-second.active {
background-color: var(--_color-active);
}
</style>
</head>
<body class="background-1">
<div class="qlocktwo" ></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script >
//---
'use strict';
//---
console.clear();
//---
let gui = null;
//---
const LETTER_GRID = {
en:
[
[
{ letter: 'i', inUse: false, type: 'desc' },
{ letter: 't', inUse: false, type: 'desc' },
{ letter: 'l', inUse: false, type: 'none' },
{ letter: 'i', inUse: false, type: 'desc' },
{ letter: 's', inUse: false, type: 'desc' },
{ letter: 'a', inUse: false, type: 'none' },
{ letter: 's', inUse: false, type: 'none' },
{ letter: 'a', inUse: false, type: 'desc' },
{ letter: 'm', inUse: false, type: 'desc' },
{ letter: 'p', inUse: false, type: 'desc' },
{ letter: 'm', inUse: false, type: 'desc' }],
[
{ letter: 'a', inUse: false, type: 'none' },
{ letter: 'c', inUse: false, type: 'none' },
{ letter: 'q', inUse: false, type: 'minutes' },
{ letter: 'u', inUse: false, type: 'minutes' },
{ letter: 'a', inUse: false, type: 'minutes' },
{ letter: 'r', inUse: false, type: 'minutes' },
{ letter: 't', inUse: false, type: 'minutes' },
{ letter: 'e', inUse: false, type: 'minutes' },
{ letter: 'r', inUse: false, type: 'minutes' },
{ letter: 'd', inUse: false, type: 'none' },
{ letter: 'c', inUse: false, type: 'none' }],
[
{ letter: 't', inUse: false, type: 'minutes' },
{ letter: 'w', inUse: false, type: 'minutes' },
{ letter: 'e', inUse: false, type: 'minutes' },
{ letter: 'n', inUse: false, type: 'minutes' },
{ letter: 't', inUse: false, type: 'minutes' },
{ letter: 'y', inUse: false, type: 'minutes' },
{ letter: 'f', inUse: false, type: 'minutes' },
{ letter: 'i', inUse: false, type: 'minutes' },
{ letter: 'v', inUse: false, type: 'minutes' },
{ letter: 'e', inUse: false, type: 'minutes' },
{ letter: 'x', inUse: false, type: 'none' }],
[
{ letter: 'h', inUse: false, type: 'minutes' },
{ letter: 'a', inUse: false, type: 'minutes' },
{ letter: 'l', inUse: false, type: 'minutes' },
{ letter: 'f', inUse: false, type: 'minutes' },
{ letter: 's', inUse: false, type: 'none' },
{ letter: 't', inUse: false, type: 'minutes' },
{ letter: 'e', inUse: false, type: 'minutes' },
{ letter: 'n', inUse: false, type: 'minutes' },
{ letter: 'f', inUse: false, type: 'none' },
{ letter: 't', inUse: false, type: 'desc' },
{ letter: 'o', inUse: false, type: 'desc' }],
[
{ letter: 'p', inUse: false, type: 'desc' },
{ letter: 'a', inUse: false, type: 'desc' },
{ letter: 's', inUse: false, type: 'desc' },
{ letter: 't', inUse: false, type: 'desc' },
{ letter: 'e', inUse: false, type: 'none' },
{ letter: 'r', inUse: false, type: 'none' },
{ letter: 'u', inUse: false, type: 'none' },
{ letter: 'n', inUse: false, type: 'hours' },
{ letter: 'i', inUse: false, type: 'hours' },
{ letter: 'n', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' }],
[
{ letter: 'o', inUse: false, type: 'hours' },
{ letter: 'n', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 's', inUse: false, type: 'hours' },
{ letter: 'i', inUse: false, type: 'hours' },
{ letter: 'x', inUse: false, type: 'hours' },
{ letter: 't', inUse: false, type: 'hours' },
{ letter: 'h', inUse: false, type: 'hours' },
{ letter: 'r', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' }],
[
{ letter: 'f', inUse: false, type: 'hours' },
{ letter: 'o', inUse: false, type: 'hours' },
{ letter: 'u', inUse: false, type: 'hours' },
{ letter: 'r', inUse: false, type: 'hours' },
{ letter: 'f', inUse: false, type: 'hours' },
{ letter: 'i', inUse: false, type: 'hours' },
{ letter: 'v', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 't', inUse: false, type: 'hours' },
{ letter: 'w', inUse: false, type: 'hours' },
{ letter: 'o', inUse: false, type: 'hours' }],
[
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 'i', inUse: false, type: 'hours' },
{ letter: 'g', inUse: false, type: 'hours' },
{ letter: 'h', inUse: false, type: 'hours' },
{ letter: 't', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 'l', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 'v', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 'n', inUse: false, type: 'hours' }],
[
{ letter: 's', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 'v', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 'n', inUse: false, type: 'hours' },
{ letter: 't', inUse: false, type: 'hours' },
{ letter: 'w', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 'l', inUse: false, type: 'hours' },
{ letter: 'v', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' }],
[
{ letter: 't', inUse: false, type: 'hours' },
{ letter: 'e', inUse: false, type: 'hours' },
{ letter: 'n', inUse: false, type: 'hours' },
{ letter: 's', inUse: false, type: 'none' },
{ letter: 'e', inUse: false, type: 'none' },
{ letter: 'o', inUse: false, type: 'desc', specialCharacter: `\u00A0\u00A0'` },
{ letter: 'c', inUse: false, type: 'desc' },
{ letter: 'l', inUse: false, type: 'desc' },
{ letter: 'o', inUse: false, type: 'desc' },
{ letter: 'c', inUse: false, type: 'desc' },
{ letter: 'k', inUse: false, type: 'desc' }]],
de:
[
[
{ letter: 'e', inUse: false, type: 'desc' },
{ letter: 's', inUse: false, type: 'desc' },
{ letter: 'k', inUse: false, type: 'none' },
{ letter: 'i', inUse: false, type: 'desc' },
{ letter: 's', inUse: false, type: 'desc' },
{ letter: 't', inUse: false, type: 'desc' },
{ letter: 'a', inUse: false, type: 'none' },
{ letter: 'f', inUse: false, type: 'minutes' },
{ letter: 'ü', inUse: false, type: 'minutes' },
{ letter: 'n', inUse: false, type: 'minutes' },
{ letter: 'f', inUse: false, type: 'minutes' }],
[
{ letter: 'z', inUse: false, type: 'minutes' },
{ letter: 'e', inUse: false, type: 'minutes' },
{ letter: 'h', inUse: false, type: 'minutes' },
{ letter: 'n', inUse: false, type: 'minutes' },
{ letter: 'z', inUse: false, type: 'minutes' },
{ letter: 'w', inUse: false, type: 'minutes' },
{ letter: 'a', inUse: false, type: '.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0