网页电子时钟

article/2025/9/22 7:46:35

如图就是一个简易的网页电子时钟,利用Javascript和 html和 css就可以制作

<div class="wrapper"><div class="time-box"><div class="hour"></div><div class="sec"></div></div><div class="date"><div class="week"></div><div class="date-box"></div></div></div>

 这是html的简单结构,结构相对简单,css样式的话可以根据自己的喜好去设置,我这里就不把代码发出来了

var hour = document.querySelector('.hour');var sec = document.querySelector('.sec');var week = document.querySelector('.week');var dateBox = document.querySelector('.date-box');//因为定时器第一次会延时一秒,所以第一次会有一秒延迟,提前调用一次time();//设置定时器,每秒一次setInterval(time, 1000)//获取当地时间,封装成函数function time() {var date = new Date();var y = date.getFullYear();var m = date.getMonth() + 1;var d = date.getDate();var h = date.getHours();var min = date.getMinutes();var s = date.getSeconds();var w = date.getDay();//补0m = m < 10 ? '0' + m : m;d = d < 10 ? '0' + d : d;h = h < 10 ? '0' + h : h;min = min < 10 ? '0' + min : min;s = s < 10 ? '0' + s : s;hour.innerHTML = h + ':' + m;sec.innerHTML = s;week.innerHTML = '星期' + ['一', '二', '三', '四', '五', '六', '日'][w - 1];dateBox.innerHTML = y + '年' + m + '月' + d + '日';}

 这是主要的Javascript代码块,主要是获取当前日期,年月日和时间,然后再把获取的时间日期通过innerHTML这个方法修改到html中,因为需要每秒显示,所以还需要创建一个定时器,时间为一秒,因为需要每秒显示不一样的内容,所以需要把显示的代码以及获取时间日期的部分也一起放到定时器当中。因为定时器第一次是有时间延迟的,所以需要在定时器之前调用一次这个封装的函数。还有一个点就是星期的这一部分,因为获取到的星期是数字,要把数字转为大写的星期,所以可以创建一个数组,用获得的星期当索引去获取数组中的星期。这就是几个主要的点,其他相对比较容易想到。需要的可以拿走。


http://chatgpt.dhexx.cn/article/pkA9HlU1.shtml

相关文章

时钟啊时钟

效果图 JS /*** color --color 父级定义颜色 css直接使用变量*/ import { useState, useEffect } from react; import styles from ./style.less const index () > {const [time, setTime] useState({hours: 00,minutes: 00,seconds: 00})useEffect(() >{countDown() …

模拟钟表的手机软件_手机时钟软件推荐

下载 生活服务|47.3MB 更新时间&#xff1a;2019-04-04 12:04:18 评分&#xff1a;7 概要&#xff1a;抖音文字云时钟app是一款异常火爆的数字时钟软件&#xff0c;该软件在抖音上已经被众多小伙伴种草了&#xff0c;它拥有非常炫酷的背景&#xff0c;设置安装起来也非常简便&a…

抖音文字时钟壁纸html,抖音文字时钟

抖音文字时钟是一款为最近非常火的珍惜时间打造的钟表&#xff0c;有记录时间的功能也有很强大的警示作用&#xff0c;告诉我们时间的重要性&#xff0c;它有很多的模式可以调节使用&#xff0c;展现出自己喜欢的需要的时钟模式来&#xff0c;有需要的用户们就来这里下载吧。 温…

实现时钟特效

需求&#xff1a; 显示年、月、日、星期和二十四进制的时钟特效&#xff01; 代码&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>时钟特效</title><style> body{backgrou…

超级实用的动态时钟。

绘制时钟 时钟动态效果的实现基于canvas画布的重绘&#xff0c;也就是说每秒都要在canvas画布上重新绘画一遍图形&#xff0c;在配合定时器即可实现动态效果。而实现此时钟主要有两个步骤&#xff0c;1是表盘的绘制&#xff0c;2是指针的绘制。 绘制时钟表盘 时钟表盘的刻度…

教你制作 简易罗盘动态时钟 网页文件

简易罗盘动态时钟&#xff08;含html文件和源码&#xff09; 快来获取 首先给大家展示成品截图 首选展示index.txt代码 <动态罗盘时钟> <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"v…

用前端代码编写一个动态的罗盘时钟

用前端代码编写一个动态的罗盘时钟 前言一、代码如下1.index2.js3.css 页面效果 前言 今天给大家分享一个罗盘时钟的前端代码&#xff0c;喜欢的小伙伴帮忙点赞一下噢&#xff01; 一、代码如下 1.index <!DOCTYPE html> <html lang"en"> <head>…

android时钟字体,文字时钟下载-文字时钟 安卓版v1.6.1-PC6安卓网

文字时钟屏保app是一款功能齐全又实用的时钟显示软件&#xff0c;文字时钟屏保app主界面是一个自带时间、日期、天气的LED数字时钟和模拟时钟&#xff0c;全屏显示翻页时钟&#xff0c;酷炫美观又实用。这款文字时钟屏保app可以一直保持显示状态。 软件介绍 文字时钟屏保app是一…

日历与时钟

目录 公历 黑色星期五 生物韵律 公历 在公历中&#xff0c;当年份为4的整数倍&#xff0c;但不是100的整数倍时&#xff0c;会出现闰年的现象。 y40 mod(y,4) 0 && mod(y,100)||mod(y,400)0 输出当时的年、月、日、时、分、秒 f%6d %6d %6d %6d %6d %9.3f\n cclock …

手机时钟软件推荐,创意时钟APP介绍

手机上有好用的时钟APP&#xff0c;时钟软件哪个好用? 每个人的手机屏幕都有着自己独特的设计&#xff0c;而时钟软件能够为用户的手机再增添一些风采和魅力&#xff0c;更有专为来年人设计的大字体桌面时钟&#xff0c;更加的清晰直观&#xff0c;各种特色的桌面时钟app中都有…

各种好用的在线时钟、网页时钟汇总推荐集合

电脑全屏时钟网页版https://www.sioe.cn/rili/quanpingshizhong.php 网页时钟http://www.gz7k.com/ 在线时钟 - 现在几点https://naozhong.net.cn/shijian/ 桌面时钟_在线极简时钟同步北京时间网提供桌面时钟&#xff0c;在线极简同步时钟。https://www.beijing-time.org…

html在线时钟

html在线时钟 <script src"https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style…

html 、css、js动态文字时钟

效果思路是利用css的transform属性和js&#xff0c;来实现时钟布局和旋转。 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…

显示农历天气时钟小部件下载_文字云时钟安卓版下载|文字云时钟app下载_v1.0

文字云时钟是一款流行便捷简洁时钟服务软件&#xff0c;为用户提供桌面时钟、数字时钟、悬浮时钟、秒表计时等多种功能&#xff0c;喜欢的朋友赶快点击下载吧&#xff01; 软件介绍 文字云时钟word clock软件是一款生活实用的文字时钟。文字云时钟app既可以当做类似LED效果的…

[乐意黎]某音上超酷炫的 Word Clock 文字云时钟屏保配置

乐意黎最近在某音上看到 Wordclock 屏保非常的火爆&#xff0c;看上去非常有意思。 哪么 Wordclock屏保怎么弄的&#xff1f;如何设置呢&#xff1f; 电脑怎么设置动态时钟屏保 实现这样的动态时间屏保的效果主要是使用了一款叫做word clock的第三方插件&#xff0c;《Word C…

android时钟字体,抖音文字云时钟app-抖音文字云时钟安卓版(word clock)v1.0下载

抖音文字云时钟app是一款异常火爆的数字时钟软件&#xff0c;该软件在抖音上已经被众多小伙伴种草了&#xff0c;它拥有非常炫酷的背景&#xff0c;设置安装起来也非常简便&#xff0c;可以自定义多个模块&#xff0c;支持多种语音&#xff0c;感兴趣的小伙伴千万不要错过哦&am…

【前端领域】一个好玩好看的罗盘时钟 --- 附详细介绍

唯有热爱&#xff0c;可抵岁月漫长&#xff0c;唯有热爱&#xff0c;不畏世间无常&#xff01; 少年不曾迷茫&#xff0c;展翅飞往神域&#xff0c;坚定初心&#xff0c;踏实行动。 新的一年&#xff0c;收下少年的祝福&#xff0c;一起踏上新道路。 &#x1f4aa;(ง •_•)…

Div+CSS网页设计(HTML5)

1、将图片添加到div中间位置 <div style"color:#0000FF" id"top"> <div class"f1" align"center"><img src"img/logo.png"> </div> </div> #top{background: cadetblue;height: …

网页设计与制作html+css

1、前言 又到毕业季&#xff0c;毕业设计ing or 课程设计ing&#xff0c;我准备了几款网页设计与制作免费模板送个各位萌新参考&#xff0c;助力各位小伙伴顺利完成毕业设计或者课程设计。 2、作品展示 《junny》 这款作品页面清新简单&#xff0c;代码结构也不复杂&#x…

HTML5与CSS3网页制作

链接&#xff1a;https://b23.tv/WCVjdBf 视频中提到的助学网页&#xff1a; https://www.w3.org/ https://caniuse.com/?searchcenter VSCODE快捷键 标签*数字&#xff1a;能产生n个标签 标签{内容}&#xff1a;能快速生成 嵌套标签1>嵌套标签2&#xff1a;快速生成嵌套…