Stopwatch using html css and javascript follow us on the instagram... https://www.instagram.com/webstreet

Stopwatch using html css and javascript follow us on the instagram... https://www.instagram.com/webstreet_code/

Patricia Arquette

Release： 2024-11-11 01:56:02

Original

816 people have browsed it

Stopwatch using html css and javascript follow us on the instagram... https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Stopwatch</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<style>

    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #282c34;
        color:white;
        font-family: Arial, Helvetica, sans-serif;
        flex-direction: column;
    }

    .clock{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
    .clock-face {
            width: 300px;
            height: 300px;
            background-color: #282c34;
            border-radius: 50%;
            position: relative;
            box-shadow: 0 0 40px 1px rgb(56, 56, 62);
        }
        .hand {
            width: 36%;
            height: 4px;
            background: #58f5db;
            position: absolute;
            top: 50%;
            left: 11%;
            transform-origin: 100%;
            transform: rotate(90deg);
            transition-timing-function: ease-in-out;
            transition: all 0.05s;
        }

        .second-hand{
            background-color: blue;
            z-index:1;
        }

        .circle {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            top: 48%;
            left: 44%;
            z-index: 0.8;
        }

        .inner-circle{
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background-color: blue;
            margin:auto;
            margin-top:5px
        }
        /* Clock markings */
        .markings {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* transform: translateY(-50%); */
        }

        .markings div {
            position: absolute;
            font-size: 16px;
            transform: translate(-50%, -50%);
        }

        .tick{
            width: 2px;
            height: 10px;
            background-color:white;
            position: absolute;
            transform-origin: center;
        }

        .digital {
            font-size: 24px;
            position: absolute;
            top: 20%;
            width: 100%;
            text-align: center;
        }


        .buttons{
            display: flex;
            gap: 20px;
        }
        i{
            font-size: 40px;
            cursor: pointer;
        }.fa-play{
            background-color: blue;
            padding: 10px;
            border-radius: 50%;
        }
        .fa-stop{
          color: red;
          font-size:45px
        }




        .fa-rotate-right{
            margin: 8px;
            margin-left: 35px;
        }

</style>



















</head>
<body>

    <div>

Copy after login

The above is the detailed content of Stopwatch using html css and javascript follow us on the instagram... https://www.instagram.com/webstreet_code/. For more information, please follow other related articles on the PHP Chinese website!