利用在页面生成数字时钟

效果展示

项目难点

本项目几乎没有难点，用了一些简单的操作可以写一下

1，获取本地时间

用js自带的Date函数直接就可以获取到本地时间，

获取到本地时间以后，再按照我们的需要，把年月日时分秒这些数据单独截出来，通过js的dom操作写入页面，便可以实现数字的更新。

获取时间的代码片段

    // 获取时间// 获取完整时间var date = new Date()// 获取年份var year = date.getFullYear()//获取月份var month = date.getMonth()+1//获取日期var day = date.getDate()//获取星期var week = date.getDay()//获取小时var hours = date.getHours()//获取时分var minutes = date.getMinutes()// 获取秒var seconds = date.getSeconds()

一些小技巧

1计时器

// 计时器
setInterval(() => {
clock()
}, 1000);
计时器在需要重复操作的页面中使用还是比较多的，比如我之前写的轮播图等都是去进行重复操作。本属性一共两个参数执行函数以及时间，总结就是在时间到来时需要执行什么操作。

2弹性布局的居中

display: flex;
justify-content: center;
align-items: center;

justify-content: 主轴方向上的的对齐方式
align-items 交叉轴（交叉轴：与主轴垂直）上的对齐方式

font-family

font-family: “楷书”;

font-family: “字体”，“字体”，“字体”，“字体”，····
使用本属性，浏览器会依次查探本地是否有相应的字体，如果左右的字体都不支持，才使用默认的字体。

项目源码

源码瑕疵较多，仅供参考

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#bg{width: 100vw;height: 100vh;background: linear-gradient(270deg, aqua, lightgreen);display: flex;justify-content: center;align-items: center;}#bg .content{width: 400px;height: 200px;background-color: rgba(0, 0, 0, .3);}#bg .content #time{/* background-color: red; */font-size: 60px;color: #fff;text-align: center;margin-top: 30px;}#bg .content #data{/* background-color: yellow; */text-align: center;font-size: 30px;font-family: "楷书";}</style>
</head>
<body><div class="box"><div id="bg"><div class="content"><p id="time">00:00:00</p><p id="data">mary</p></div></div></div><script>// 获取元素var obj = document.getElementById('bg')var time = document.getElementById('time')var data = document.getElementById('data')// 获取写入时间函数function clock() {// 获取时间// 获取完整时间var date = new Date()console.log(date)// 获取年份var year = date.getFullYear()//获取月份var month = date.getMonth()+1//获取日期var day = date.getDate()//获取星期var week = date.getDay()//获取小时var hours = date.getHours()//获取时分var minutes = date.getMinutes()// 获取秒var seconds = date.getSeconds() // 定义数组time.innerHTML = hours+":"+minutes+":"+seconds data.innerHTML = year+"年"+month+"月"+day+"日"+"<br>"+"week："+week}// 计时器setInterval(() => {clock()}, 1000);</script>
</body>
</html>

前端练手项目4-数字时钟相关推荐

2022最新版40个前端练手项目【附视频+源码】
不管学习哪门语言都希望能做出实际的东西来,这个实际的东西当然就是项目啦, 不用多说,大家都知道学编程语言一定要做项目才行. 本次给到大家的是40个前端实战练手项目(附源码和视频讲解),希望对大家有一 ...
5个前端练手项目(html css js canvas)
前言: 首先祝大家端午节快乐.本篇文章有5个练手项目对于刚学完前端三剑客的你们.应该是一个很好的实践目录
前端练手项目 HTML 游戏叠高塔（包含源码）
叠高塔游戏通过点击[屏幕]或按[空格键]来放置积木. 这个游戏的灵感来源于iPhone上的游戏 Stack: https://itunes.apple.com/us/app/stack/id10804 ...
音乐盒（前端练手项目 html css js）
大家好我是言不及行yyds 前言你需要引入五个自己喜欢的图片和五个音乐 ☀️作者简介:大家好我是言不及行yyds
Vue2实现仿小米商城练手项目前端篇(2-首页实现)
缘由去年寒假里学习了Vue.js,开学后想做一个完整的练手项目实战一下,最后决定模仿小米手机官网做一个网站项目,具体参考了Github上一位作者的项目. 现在已经基本完成了,分享在CSDN作为学习记 ...
web前端布局练手项目
仿北大首页布局(只关心布局) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
70个Python练手项目列表预祝大家快乐
小孩眺望远方,成人怀念故乡. 为此给大家分享一下珍藏的Python实战项目,祝大家节日快乐哦!!! Python 前言:不管学习哪门语言都希望能做出实际的东西来,这个实际的东西当然就是项目啦,不用多说 ...
推荐 Python 十大经典练手项目，让你的 Python 技能点全亮！
前言:如果有人问:"Python还火吗?""当然,很火.""哪能火多久呢?""不知道." 技术发展到现在衍生出许多种编程 ...
10个相见恨晚的 Java 在线练手项目
前一篇:?[清单]37个超棒的 Web 数据可视化工具 Java 开发简单的计算器难度为一般,适合具有 Java 基础和 Swing 组件编程知识的用户学习推荐指数:????? 在线实操链接制作 ...

前端练手项目4-数字时钟