css+js实现带分段计时的秒表效果代码-html代码-BFW代码库

css+js实现带分段计时的秒表效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现带分段计时的秒表效果代码，点击上面的按钮可产生分段计时结果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Play&display=swap");
        
        :root {
        	--timekeeper-size: 180px;
        	--timekeeper-margins: 12px;
        }
        
        * {
        	box-sizing: border-box;
        	font-family: "Play", sans-serif;
        }
        
        body {
        	margin: 0;
        	padding: 0;
        	background-color: #1d1e22;
        }
        
        h1,
        h2,
        h3,
        h4,
        h5,
        p {
        	margin: 0;
        }
        
        main {
        	display: flex;
        	justify-content: center;
        	width: 100vw;
        	height: 100vh;
        	align-items: center;
        }
        
        .timekeeper {
        	width: var(--timekeeper-size);
        	height: var(--timekeeper-size);
        	background-color: #636365;
        	border-radius: 50%;
        	border: 10px solid #4e4e4e;
        	position: relative;
        	margin: 0 auto;
        }
        
        .timekeeper::before {
        	content: "";
        	background-color: #4e4e4e;
        	position: absolute;
        	top: var(--timekeeper-margins);
        	bottom: var(--timekeeper-margins);
        	left: var(--timekeeper-margins);
        	right: var(--timekeeper-margins);
        	border-radius: 50%;
        }
        
        .controls {
        	height: 20px;
        	width: 32px;
        	position: absolute;
        	background-color: #4e4e4e;
        	left: calc(50% - 16px);
        	top: -35px;
        	border-radius: 3px;
        	cursor: pointer;
        }
        
        .controls::after {
        	content: "";
        	position: absolute;
        	height: 7px;
        	background-color: #4e4e4e;
        	width: 12px;
        	top: 20px;
        	left: calc(50% - 6px);
        }
        
        .controls.bounce {
        	animation: bounce 0.3s ease forwards;
        }
        
        .timekeeper-digital {
        	display: block;
        	text-align: center;
        }
        
        pre {
        	font-family: "Play", sans-serif;
        	font-size: 26px;
        	color: #7dc017;
        }
        
        .clockhand {
        	position: absolute;
        	width: 3px;
        	height: 35%;
        	border-radius: 4px;
        	background-color: white;
        	bottom: 50%;
        	left: calc(50% - 2px);
        	transform: rotate(0deg);
        	transform-origin: bottom;
        }
        
        .timekeeper-steps {
        	background-color: rgba(255, 255, 255, 0.02);
        	height: 150px;
        	min-width: 300px;
        	overflow: auto;
        }
        
        .step {
        	animation: bounce 0.3s ease forwards;
        	display: flex;
        	justify-content: space-between;
        	font-size: 16px;
        	align-items: center;
        	color: white;
        	padding: 10px 10px 0 10px;
        }
        
        @keyframes bounce {
        	0% {
        		transform: translateY(0px);
        	}
        	50% {
        		transform: translateY(5px);
        	}
        	100% {
        		transform: translateY(0px);
        	}
        }
    </style>



</head>

<body>

    <main>
        <div class="container">
            <div class="timekeeper">
                <div class="controls" id="start"></div>
                <div cla.........完整代码请登录后点击上方下载按钮下载查看