css+js实现简易秒表跑表计时效果代码-html代码-BFW代码库

css+js实现简易秒表跑表计时效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现简易秒表跑表计时效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: #adaddf;
        font-family: sans-serif;
}

button {
        width: 140px;
        height: 46px;
        font-weight: bold;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        border: 0;
        cursor: pointer;
}

button:nth-child(1) {
        background: #00d50f;
        color: #fff;
}

button:hover {
        opacity: 0.8;
}

button:nth-child(2) {
        background: #f0050f;
        color: #fff;
}

.cronometro {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        min-width: 200px;
        min-height: 200px;
        gap: 16px;
}

.board {
        display: flex;
        fkex-direction: row;
        gap: 24px;
        align-items: center;
        justify-content: center;
        height: 115px;
        position: relative;
        padding-right: 130px;
}

.relogio {
        background: #333;
        height: 100px;
        width: 100px;
        border-radius: 50%;
        position: relative;
}

.relogio::before {
        content: "";
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        position: absolute;.........完整代码请登录后点击上方下载按钮下载查看