2025 Autor: John Day | [email protected]. Última modificação: 2025-01-13 06:58
Este não é exatamente um Instructable. Estou projetando meu próprio Word Clock e decidi primeiro construir um simulador de aplicativo da web para que eu pudesse fazer o layout da grade e testar sua aparência em vários momentos do dia. Então percebi que isso poderia ser útil para outras pessoas que trabalham com relógios de palavras e decidi compartilhá-lo.
O aplicativo é um único arquivo HTML curto. Se você salvá-lo e clicar duas vezes nele, ele abrirá no seu navegador e começará a exibir a hora atual. Em seguida, ele atualizará a exibição a cada 10 segundos se a hora tiver mudado.
Há também um campo de texto onde você pode digitar qualquer hora específica e ver como ficará em seu projeto.
O design do word clock de cada pessoa é diferente, então tentei fazer a configuração do código facilmente. Veja as próximas etapas para dicas de como fazer isso.
Eu espero que você ache isto útil! É ótimo poder experimentar layouts e palavras antes de se comprometer com o hardware!
Etapa 1: Baixe o arquivo HTML
O simulador é um aplicativo da web de arquivo único. Tem pouco menos de 200 linhas. Você pode baixá-lo aqui.
(Não existe realmente um botão para baixar o arquivo no Github. Mas você pode apenas selecionar o conteúdo do arquivo, copiar e colar em um novo arquivo de texto no seu computador. Certifique-se de nomear o arquivo como algo.html.)
Depois de baixá-lo, clique duas vezes no arquivo e ele será carregado em uma guia do navegador. Você deve ver a hora atual exibida em uma grade de palavras.
Nota: Eu apenas testei o aplicativo usando o Chrome no Windows.
Etapa 2: Editar a grade
Você pode experimentar diferentes layouts de palavras editando a parte de Javascript que se parece com isto:
var row_strs = ["É", "UM DOIS TRÊS", "QUATRO CINCO SEIS", "SETE OITO", "NOVE DEZ", "ONZE DOZE", "OH CINCO DEZ", "QUINZE VINTE", "HORA TRINTA", "QUARENTA E CINCO CINCO", "À TARDE", "À NOITE",];
Se você adicionar / excluir linhas e recarregar a página, sua grade será maior ou menor.
E se você adicionar mais letras a cada linha, sua grade ficará mais larga. Apenas certifique-se de que todas as linhas tenham o mesmo número de letras.
Você notará que as strings no código acima têm espaços, mas eles se transformam em caracteres aleatórios na grade. Você pode escolher o conjunto de caracteres que serão usados aleatoriamente para preencher esses espaços, editando a linha que se parece com isto:
var RANDCHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ @ # $% &";
Etapa 3: alterar o texto
Você precisará saber como escrever código se quiser usar frases diferentes. A lógica que pega uma data e a transforma em palavras está na função chamada dateToSentence ().