Jam randik menggunakan html css dan javascript ikuti kami di instagram... https://www.instagram.com/webstreet

Jam randik menggunakan html css dan javascript ikuti kami di instagram... https://www.instagram.com/webstreet_code/

Patricia Arquette

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

asal

818 orang telah melayarinya

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

Ikuti kami di instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="en">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , skala awal=1.0">
    <title>Jam randik</title>
    <pautan rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<gaya>

    badan{
        paparan: flex;
        justify-content: pusat;
        align-item: tengah;
        ketinggian: 100vh;
        warna latar belakang: #282c34;
        warna:putih;
        jenis huruf: Arial, Helvetica, sans-serif;
        flex-direction: lajur;
    }

    .jam{
        paparan: flex;
        flex-direction: lajur;
        align-item: tengah;
        jidar bawah: 20px;
    }
    .muka jam {
            lebar: 300px;
            ketinggian: 300px;
            warna latar belakang: #282c34;
            jejari sempadan: 50%;
            kedudukan: relatif;
            bayang-kotak: 0 0 40px 1px rgb(56, 56, 62);
        }
        .tangan {
            lebar: 36%;
            ketinggian: 4px;
            latar belakang: #58f5db;
            jawatan: mutlak;
            atas: 50%;
            kiri: 11%;
            asal-ubah: 100%;
            mengubah: berputar (90deg);
            fungsi pemasaan peralihan: mudah masuk;
            peralihan: semua 0.05s;
        }

        .terpakai{
            warna latar belakang: biru;
            z-indeks:1;
        }

        .bulatan {
            ketinggian: 20px;
            lebar: 20px;
            jejari sempadan: 50%;
            warna latar belakang: putih;
            jawatan: mutlak;
            atas: 48%;
            kiri: 44%;
            indeks z: 0.8;
        }

        .bulatan dalam{
            ketinggian: 10px;
            lebar: 10px;
            jejari sempadan: 50%;
            warna latar belakang: biru;
            margin:auto;
            jidar atas:5px
        }
        /* Tanda jam */
        .markings {
            jawatan: mutlak;
            lebar: 100%;
            ketinggian: 100%;
            paparan: flex;
            justify-content: pusat;
            align-item: tengah;
            /* transform: translateY(-50%); */
        }

        .markings div {
            jawatan: mutlak;
            saiz fon: 16px;
            mengubah: terjemah(-50%, -50%);
        }

        .tanda {
            lebar: 2px;
            ketinggian: 10px;
            background-color:white;
            jawatan: mutlak;
            transform-asal: pusat;
        }

        .digital {
            saiz fon: 24px;
            jawatan: mutlak;
            atas: 20%;
            lebar: 100%;
            text-align: tengah;
        }


        .butang{
            paparan: flex;
            jurang: 20px;
        }
        i{
            saiz fon: 40px;
            kursor: penunjuk;
        }.fa-play{
            warna latar belakang: biru;
            padding: 10px;
            jejari sempadan: 50%;
        }
        .fa-stop{
          warna: merah;
          saiz fon: 45px
        }




        .fa-putar-kanan{
            jidar: 8px;
            jidar-kiri: 35px;
        }

</style>



















</head>
<badan>

    <div>

Salin selepas log masuk

Atas ialah kandungan terperinci Jam randik menggunakan html css dan javascript ikuti kami di instagram... https://www.instagram.com/webstreet_code/. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!