思路
-
利用new Date () .toLocaleTimeString () 方法 获取当前时间转化成时分秒的字符串 。
-
每一秒种执行一次这个方法,利用document.getElementById () 获取到元素赋值 。
-
布局方式 父元素占满全屏,时钟这个div用子绝父相+平移 永远定位到屏幕中间 。
-
给时钟这个div 设置flex布局 水平和垂直都居中,这样数字时间就居中了。
具体细节大家可以根据自己喜欢的调试,废话不多说直接上代码
<!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>当前时间</title> <style> body { margin: 0; padding: 0; } .father { width: 100vw; height: 100vh; background-color: cadetblue; position: relative; } .box { width: 400px; height: 145px; background-color: rgb(56, 56, 56); border: 20px solid #f5cd92; color: white; border-radius: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; } #time { font-size: 85px; font-weight: 700; /* text-align: center; line-height: 280px; */ } </style> </head> <body> <div class="father"> <div class="box"> <div id="time"></div> </div> </div> </body> <script> function time () { document.getElementById( 'time' ).innerText = new Date().toLocaleTimeString() } setInterval(time, 1000) </script> </html>
Vue版
<template> <div class="xue"> <div class="current-time"> <div id="time"></div> </div> </div> </template> <script> export default { name: 'Dashboard', data() { return { time: '' } }, created() { this.time = setInterval(this.qin, 1000) }, beforeDestroy() { clearInterval(this.time) }, methods: { qin() { document.getElementById('time').innerText = new Date().toLocaleTimeString() } } } </script> <style lang="scss" scoped> .xue { min-height: calc(100vh - 50px); min-width: calc(100vw - 210px); background-color: cadetblue; position: relative; .current-time { width: 280px; height: 100px; background-color: rgb(56, 56, 56); border: 12px solid #ffebcd; color: white; border-radius: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; #time { font-size: 55px; font-weight: 700; } } } </style>
小细节
-
大家可以把电脑底部任务栏隐藏,打开谷歌浏览器全屏模式 F11或者设置中打开,这样就可以当一个壁纸使用
-
如图
有什么不足的地方请大家指出谢谢 -- 風过无痕