让我们先来看看实现的效果

html代码

<!DOCTYPE html>
<html lang="zh-Hans">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第十六天</title><link rel="stylesheet" href="style.css">
</head><body><div class="clock_box"><div class="clock"><p id="time"></p></div></div><script>// 获取页面id=time的元素（P元素<p id="time">12:12:12 AM</p>）var time = document.querySelector("#time");// 定义函数传入time元素function up(time_el) {// 获取当前时间let date = new Date();// 获取时分秒let h = date.getHours();let m = date.getMinutes();let s = date.getSeconds();// 上午与下午let day_night = "AM";// 计算上午与下午if (h > 12) {h = h - 12;day_night = "PM";}// 如果时间小于10则前面补充0if (h < 10) { h = "0" + h; }if (m < 10) { m = "0" + m; }if (s < 10) { s = "0" + s; }// 拼接时间并且赋值给time元素的文本中，从而显示time_el.textContent = h + ":" + m + ":" + s + " " + day_night;}// 定时器，每秒执行一次实现更新setInterval(() => {up(time);}, 1000);</script>
</body></html>

css代码

:root {--color2: #56d5fc;--color4: #def700;--color6: #fa3195;
}* {margin: 0;padding: 0;
}html {font-size: 14px;
}body {width: 100vw;height: 100vh;background-color: #000;display: flex;justify-content: center;align-items: center;font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}.clock_box {position: relative;width: 380px;height: 80px;border-radius: 10px;background-image: linear-gradient(135deg, var(--color2), var(--color4), var(--color6));/* 居中 */display: flex;justify-content: center;align-items: center;animation: animate 4s linear infinite;
}.clock_box::after, .clock_box::before {position: absolute;content: "";background-image: inherit;width: 100%;height: 100%;z-index: -1;border-radius: 10px;filter: blur(15px);
} .clock_box::before {filter: blur(100px);
} .clock {position: absolute;left: 10px;right: 10px;top: 10px;bottom: 10px;background-color: #2b2a2a;border-radius: 8px;display: flex;justify-content: center;align-items: center;
} .clock p {font-size: 50px;font-weight: bold;color: transparent;letter-spacing: 2px;background-image: linear-gradient(135deg, var(--color2), var(--color4), var(--color6));background-clip: text;-webkit-background-clip: text;
} @keyframes animate {100% {filter: hue-rotate(360deg);}
}

今日份知识总结

标签	作用
document.querySelector("#demo");	获取文档中 id=“demo” 的元素：
getHours	根据本地时间返回时间的小时字段：
getMinutes	可返回时间的分钟字段。
getSeconds	可返回时间的秒。
textContent	textContent 属性设置或者返回指定节点的文本内容。
setInterval	setInterval(() => {up(time); }, 1000);定时器
inherit	inherit 关键字指定一个属性应从父元素继承它的值。
-webkit-background-clip	实现镂空渐变色字体，配合color：transparent来使用
background-clip	属性规定背景的绘制区域。
letter-spacing	属性增加或减少字符间的空白（字符间距）。
hue-rotate	是一个内置函数，用于对图像应用滤镜以设置图像的色调旋转。(让色调旋转，很吊！)

[100天挑战100个前端效果]第十六天---炫彩数字时钟相关推荐

[100天挑战100个前端效果]第十九天---人物介绍卡片效果(猜猜是哪三个大佬？)
人物介绍卡片效果让我们先来看看实现的效果 html代码 css代码今日份知识总结让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang=& ...
[100天挑战100个前端效果]第十二天---3D图片(图片素材甚是优秀！)
3D图片让我们先来看看实现的效果 html代码 css代码素材图片今日份知识总结让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang= ...
前端效果积累｜酷炫、实用3D地球路径飞行效果实现
挑战用100美元赚100万美元
推荐一部纪录片,中文译名各种各样,英文原名是<Undercover billionaire>,出自 Discovery networks,挑战用100美元赚100万美元(估值百万美元的企业 ...
100个暗黑系哑光效果lr/acr预设（含预设导入教程）
Grunge Presets Pack包含100个lr预设和100个acr预设,旨在为您的图像提供柔和的都市外观.此主题系列包括15种Lightroom预设应用效果,如去饱和度,淡化,喜怒无常的色调和 ...
用100元买100支笔c语言,用C编程!有100块钱,买100支笔,其中钢笔3元,圆珠笔2元,铅笔0.5元,问各买多少支?...
题目: 用C编程!有100块钱,买100支笔,其中钢笔3元,圆珠笔2元,铅笔0.5元,问各买多少支? 解答: 完整程序如下: main(){ int i3,i2,i05; for (i3=0;i3 猜 ...
简单实现几种常见的前端效果，附代码！
小伙伴们在参加web前端工程师面试的时候会遇到面试官问到几种比较常见的效果如何去实现,这里小千就来给大家整理了一下,快来看~ 1.防抖 2.节流 3.new 4.bind 5.deepCopy 6.柯 ...
min-width:100%和max-width:100%的区别
1.width:100%和width:auto width:100%,设定对象的宽度占父元素的100%不论设定元素的margin值是多少,不包含margin: width:auto,根据设定对象的实际 ...
mysql查询前100行和后100行
查询前100行 SELECT * FROM table LIMIT 100; 查询后100行 select * from table order by id desc limit 100: 查询第6- ...

[100天挑战100个前端效果]第十六天---炫彩数字时钟

炫彩数字时钟

让我们先来看看实现的效果

html代码

css代码

今日份知识总结

[100天挑战100个前端效果]第十六天---炫彩数字时钟相关推荐

最新文章

热门文章