Home >Web Front-end >JS Tutorial >Stopwatch using html css and javascript follow us on the instagram... https://www.instagram.com/webstreet_code/

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

Patricia ArquetteOriginal: 2024-11-11 01:56:02848browse

<!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>

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!

JavaScript css ajax html auto using pointer function href display position margin padding border viewport background transform transition column flex https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Does JavaScript's `sort()` Method Use a Callback Function for Numerical Sorting?Next article：How Does JavaScript's `sort()` Method Use a Callback Function for Numerical Sorting?

See more

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

Related articles