简约动态时钟h5源码分享-可做桌面动态壁纸

科技怪物君

发布于 2021-09-09 10:46:17

3K0

发布于 2021-09-09 10:46:17

文章被收录于专栏：科技怪物君科技怪物君

简约动态时钟h5源码分享-可做桌面动态壁纸

下载

点击下载

介绍

SlidingClock是由Wallpaper engine创意工坊-DarkBlue的作者开发，可做动态桌面壁纸，非常的简约精美，适合收藏。

源码

css源码
js源码
html源码

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    place-items: center;
}

body {
    font-family: monospace;
    font-size: 2rem;
    min-height: 100vh;
    display: grid;
    overflow-y: hidden;
    place-items: center;
    background: linear-gradient(-45deg, #c4d2ef, #dfe6f6);
}

.hr,
.min,
.sec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3rem;
    grid-row: 1/2;
    align-items: start;
}

.number {
    padding: 0.5em;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    color: #f9fbfd;
    transition: all 500ms 100ms ease;
    border-radius: 50%;
}

.number.pop {
    color: #3e6ccb;
    font-weight: bold;
    transform: scale(1.3);
    background-color: #dfe6f6;
    box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8;
}

.strip {
    transition: transform 500ms ease-in-out;
    border-radius: 8px;
    background-color: #dfe6f6;
    box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8;
}

.clock {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5rem;
    height: 4rem;
    position: relative;
    padding: 0 4rem;
}

const strips = [...document.querySelectorAll(".strip")];
const numberSize = "4"; // in rem

var lastTime = new Array(-1, -1, -1)

// highlight number i on strip s for 1 second
function highlight(strip, d) {
    strips[strip]
        .querySelector(`.number:nth-of-type(${d + 1})`)
        .classList.add("pop");

    setTimeout(() => {
        strips[strip]
            .querySelector(`.number:nth-of-type(${d + 1})`)
            .classList.remove("pop");
    }, 950); // causes ticking
}

function stripSlider(strip, id, number) {
    let d1 = Math.floor(number / 10);
    let d2 = number % 10;

    if (lastTime[id] == -1 || lastTime[id] != number) {
        strips[strip].style.transform = `translateY(${d1 * -numberSize}rem)`;
        strips[strip + 1].style.transform = `translateY(${d2 * -numberSize}rem)`;

        lastTime[id] = number;
    }

    highlight(strip, d1);
    highlight(strip + 1, d2);
}

function updateClock() {
    // get new time
    const time = new Date();

    // get h,m,s
    const hours = time.getHours();
    const mins = time.getMinutes();
    const secs = time.getSeconds();

    // slide strips
    stripSlider(0, 0, hours);
    stripSlider(2, 1, mins);
    stripSlider(4, 2, secs);
}

// set Timer for clock-update
setInterval(updateClock, 1000);

updateClock();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/index.css" />
		<title></title>
	</head>
	<body>
		<div class="clock">
			<div class="hr">
				<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
				</div>
				<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
					<div class="number">3</div>
					<div class="number">4</div>
					<div class="number">5</div>
					<div class="number">6</div>
					<div class="number">7</div>
					<div class="number">8</div>
					<div class="number">9</div>
				</div>
			</div>
			<div class="min">
				<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
					<div class="number">3</div>
					<div class="number">4</div>
					<div class="number">5</div>
				</div>
					<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
					<div class="number">3</div>
					<div class="number">4</div>
					<div class="number">5</div>
					<div class="number">6</div>
					<div class="number">7</div>
					<div class="number">8</div>
					<div class="number">9</div>
				</div>
			</div>
			<div class="sec">
				<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
					<div class="number">3</div>
					<div class="number">4</div>
					<div class="number">5</div>
				</div>
				<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
					<div class="number">3</div>
					<div class="number">4</div>
					<div class="number">5</div>
					<div class="number">6</div>
					<div class="number">7</div>
					<div class="number">8</div>
					<div class="number">9</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/sliderClock.js"></script>
	</body>
</html>

预览

博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
本文永久链接是：https://cloud.tencent.com/developer/article/1875273

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021年9月7日，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度

简约动态时钟h5源码分享-可做桌面动态壁纸

简约动态时钟h5源码分享-可做桌面动态壁纸

简约动态时钟h5源码分享-可做桌面动态壁纸

下载

介绍

源码

预览

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐