【每日一练】209—一款实用的秒表页面效果的实现

每日一练1年前 (2023)发布 admin

1,689 0 5

第209练最终效果：

【每日一练】209—一款实用的秒表页面效果的实现

实现代码：

HTML:

<!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>209练-秒表</titl></title>

<link rel=”stylesheet” href=”index.css”>

</head>

<body>

<div id=”timer”>00:00:00</div>

<div id=”buttons”>

<button id=”start”>开始</button>

<button id=”stop”>停止</button>

<button id=”reset”>重置</button>

</div>

<script src=”index.js”></script>

</body>

</html>

CSS:

body {

background-color: #f0f0f0;

font-family: “Poppins”, sans-serif;

display: flex;

flex-direction: column;

justify-content: center;

min-height: 100vh;

overflow: hidden;

align-items: center;

}

#timer {

font-size: 7rem;

font-weight: 700;

text-shadow: 2px 2px #f8a5c2;

color: #f92672;

width: 600px;

text-align: center;

margin: 40px auto;

}

#buttons {

display: flex;

justify-content: center;

}

button {

background-color: #f92672;

color: white;

border: none;

font-size: 2rem;

font-weight: bold;

padding: 1.5rem 4rem;

margin: 1rem;

border-radius: 30px;

cursor: pointer;

box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);

transition: all 0.2s;

}

button:hover {

background-color: #f44583;

box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);

}

button[disabled] {

opacity: 0.5;

cursor: default;

}

@media (max-width: 800px) {

#timer {

font-size: 4rem;

width: 350px;

}

button {

font-size: 1.5rem;

padding: 1rem 2rem;

}

}

JS：

const timerEl = document.getElementById(“timer”);

const startButtonEl = document.getElementById(“start”);

const stopButtonEl = document.getElementById(“stop”);

const resetButtonEl = document.getElementById(“reset”);

let startTime = 0;

let elapsedTime = 0;

let timerInterval;

function startTimer() {

startTime = Date.now() – elapsedTime;

timerInterval = setInterval(() => {

elapsedTime = Date.now() – startTime;

timerEl.textContent = formatTime(elapsedTime);

}, 10);

startButtonEl.disabled = true;

stopButtonEl.disabled = false;

}

function formatTime(elapsedTime) {

const milliseconds = Math.floor((elapsedTime % 1000) / 10);

const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);

const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));

const hours = Math.floor(elapsedTime / (1000 * 60 * 60));

return (

(hours ? (hours > 9 ? hours : “0” + hours) : “00”) +

“:” +

(minutes ? (minutes > 9 ? minutes : “0” + minutes) : “00”) +

“:” +

(seconds ? (seconds > 9 ? seconds : “0” + seconds) : “00”) +

“.” +

(milliseconds > 9 ? milliseconds : “0” + milliseconds)

);

}

function stopTimer() {

clearInterval(timerInterval);

startButtonEl.disabled = false;

stopButtonEl.disabled = true;

}

function resetTimer() {

clearInterval(timerInterval);

elapsedTime = 0;

timerEl.textContent = “00:00:00”;

startButtonEl.disabled = false;

stopButtonEl.disabled = true;

}

startButtonEl.addEventListener(“click”, startTimer);

stopButtonEl.addEventListener(“click”, stopTimer);

resetButtonEl.addEventListener(“click”, resetTimer);

# 每日一练 # 练习项目 # 每日一练

© 版权声明

文章版权归作者所有，未经允许请勿转载。

相关文章

【每日一练】167—CSS实现一款实用的响应式卡片效果

admin

2,285 10

【每日一练】159—CSS实现一个列表

admin

2,350 6

【每日一练】102—一款微交互菜单的实现

admin

2,499 9

【每日一练】239—JS实现一款表情评价动画效果

admin

2,620 8

【每日一练】176—CSS实现的卡片效果

admin

1,924 4

【每日一练】11—复选框效果的实现

admin

2,295 6

暂无评论

暂无评论...

【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】

友链申请免责声明广告合作关于我们

Copyright © 2024 【web前端开发】公号平台官网平台