Đồng hồ bấm giờ Javascript - DevForum



DevForum chia sẻ các bạn code làm Đồng hồ bấm giờ bằng Javascript

1. HTML

							

00 : 00 . 000

    DevForum.Info

    2. CSS

    							//Chèn link font google
    //
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Lato', sans-serif;
    }
    
    body {
        height: 100vh;
        background: linear-gradient(to right, #d38312, #a83279);
        display: flex;
    }
    
    .container {
        margin: auto;
        width: 500px;
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    
    .timer {
        font-size: 76px;
        font-weight: lighter;
        color: #fff;
        width: 410px;
        margin-left: 20px;
    }
    
    .bottomPart {
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    
    .copyright {
        align-self: flex-start;
        color: #fff;
        text-decoration: none;
        font-size: 20pt;
        font-weight: 500;
        text-shadow: 2px 2px 2px #0BB1CE;
    }
    
    .copyright:hover{
        text-shadow: #474747 3px 5px 2px, 2px 2px 2px rgba(31,206,40,0);
    }
    
    .btns {
        width: 300px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .btns button {
        width: 80px;
        height: 80px;
        background-color: transparent;
        color: #fff;
        border: none;
        border-radius: 50%;
        text-transform: uppercase;
        font-weight: bold;
        cursor: pointer;
        outline: none;
        box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.5);
    }
    
    .btns .toggle {
        transition: all 0.3s ease;
        background: rgb(105,201,48);
        background: radial-gradient(circle, rgba(105,201,48,1) 0%, rgba(48,182,40,1) 100%);
        z-index: 1;
    }
    
    .btns .toggle:active, .btns .reset:active, .btns .lap:active {
        transform: scale(0.9);
    }
    
    .btns .toggle.on {
        background-color: #d92027;
    }
    
    .btns .reset, .btns .lap {
        transition: all 0.3s ease;
    }
    
    .lapContainer {
        width: 200px;
        height: 150px;
        color: #fff;
        padding-left: 30px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .lapItem {
        width: 120px;
        height: 30px;
        font-size: 18px;
        border-bottom: 1px solid #fff;
        margin-bottom: 5px;
    }
    
    ::-webkit-scrollbar {
        width: 15px;
        
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #ff9234;
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #ff7600;
    }						

    3. JAVASCRIPT

    							//StopWatch
    function Stopwatch(elem) {
        var time = 0;
        var offset;
        var interval;
    
        function lapOn() {
            var lapTime = lapContainer.appendChild(document.createElement("li"))
            lapTime.innerHTML = elem.textContent;
            lapTime.classList = 'lapItem'
        }
    
        function lapOff() {
            return;
        }
    
        function update() {
            if (this.isOn) {
                time += delta();
            }
            elem.textContent = timeFormatter(time);
        }
    
        function delta() {
            var now = Date.now();
            var timePassed = now - offset;
    
            offset = now;
    
            return timePassed;
        }
    
        function timeFormatter(time) {
            time = new Date(time);
    
            var minutes = time.getMinutes().toString();
            var seconds = time.getSeconds().toString();
            var milliseconds = time.getMilliseconds().toString();
    
            if (minutes.length < 2) {
                minutes = '0' + minutes;
            }
    
            if (seconds.length < 2) {
                seconds = '0' + seconds;
            }
    
            while (milliseconds.length < 3) {
                milliseconds = '0' + milliseconds;
            }
    
            var result = minutes + ' : ' + seconds + ' . ' + milliseconds;
    
            return result;
        }
    
        this.start = function () {
            interval = setInterval(update.bind(this), 1);
            offset = Date.now();
            this.isOn = true;
        };
    
        this.stop = function () {
            clearInterval(interval);
            interval = null;
            this.isOn = false;
        };
    
        this.reset = function () {
            time = 0;
            lapContainer.innerHTML = '';
            interval = null;
            this.isOn = false;
            update();
        };
    
        this.lapOn = function () {
            lapOn();
        }
    
        this.lapOff = function () {
            lapOff();
        }
    
        this.isOn = false;
    }
    
    //Main
    var timer = document.querySelector('.timer');
    var toggleBtn = document.querySelector('.toggle');
    var resetBtn = document.querySelector('.reset');
    var lapBtn = document.querySelector('.lap');
    var lapContainer = document.querySelector('.lapContainer')
    
    var watch = new Stopwatch(timer);
    
    function start() {
        toggleBtn.textContent = 'Stop';
        toggleBtn.classList.toggle("on");
        watch.start();
    }
    
    function stop() {
        toggleBtn.textContent = 'Start';
        toggleBtn.classList.toggle("on")
        watch.stop();
    }
    
    function stopWhenOn() {
        toggleBtn.textContent = 'Start';
        toggleBtn.classList.toggle("on")
        watch.stop();
        watch.reset();
    }
    
    toggleBtn.addEventListener('click', function () {
        watch.isOn ? stop() : start();
    });
    
    resetBtn.addEventListener('click', function () {
        watch.isOn ? stopWhenOn() : watch.reset();
        // stop();
    });
    
    lapBtn.addEventListener('click', function () {
        watch.isOn ? watch.lapOn() : watch.lapOff();
    })						

    Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.