Scribd
Upload
2 views4 pages

CODEcss

Uploaded by

maheshlondhe873
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views4 pages

CODEcss

Uploaded by

maheshlondhe873
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

CODE

<!DOCTYPE html>
<html>
<head>
<title>Digital Clock and Stopwatch</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #d9a7c7, #fffcdc);
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#clock, #stopwatch {
font-size: 28px;
margin: 20px;
text-align: center;
background: rgba(255, 255, 255, 0.7);
padding: 15px 30px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#controls {
display: flex;
gap: 15px;
margin-top: 20px;
}

button {
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: white;
border: none;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

button:hover {
background: linear-gradient(135deg, #2575fc, #6a11cb);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

button:disabled {
background: #ccc;
cursor: not-allowed;
box-shadow: none;
}
</style>
</head>
<body>
<div id="clock"></div>
<div id="stopwatch">00:00:00</div>
<div id="controls">
<button id="start">Start</button>
<button id="pause" disabled>Pause</button>
<button id="reset" disabled>Reset</button>
</div>

<script>
// Digital Clock
function displayTime() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2,


'0')}:${seconds.toString().padStart(2, '0')}`;

document.getElementById('clock').textContent = `Current Time: ${timeString}`;


}

setInterval(displayTime, 1000);
displayTime(); // Initial display

// Stopwatch
let stopwatchInterval;
let elapsedTime = 0;
let running = false;

function updateStopwatch() {
const hours = Math.floor(elapsedTime / 3600);
const minutes = Math.floor((elapsedTime % 3600) / 60);
const seconds = elapsedTime % 60;

const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2,


'0')}:${seconds.toString().padStart(2, '0')}`;
document.getElementById('stopwatch').textContent = timeString;
}

function startStopwatch() {
if (!running) {
running = true;
stopwatchInterval = setInterval(() => {
elapsedTime++;
updateStopwatch();
}, 1000);
document.getElementById('start').disabled = true;
document.getElementById('pause').disabled = false;
document.getElementById('reset').disabled = false;
}
}

function pauseStopwatch() {
if (running) {
running = false;
clearInterval(stopwatchInterval);
document.getElementById('start').disabled = false;
document.getElementById('pause').disabled = true;
}
}

function resetStopwatch() {
running = false;
clearInterval(stopwatchInterval);
elapsedTime = 0;
updateStopwatch();
document.getElementById('start').disabled = false;
document.getElementById('pause').disabled = true;
document.getElementById('reset').disabled = true;
}
document.getElementById('start').addEventListener('click', startStopwatch);
document.getElementById('pause').addEventListener('click', pauseStopwatch);
document.getElementById('reset').addEventListener('click', resetStopwatch);

// Initialize
updateStopwatch();
</script>
</body>
</html>

You might also like