[ AngularJS Example ] 3 countdown clocks
페이지 정보
본문
I have 3 alrams for every morning. 8am, 9am, 10am.
COuld you build 3 count down in Angular.js?
<!DOCTYPE html>
<html lang="en" ng-app="alarmApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alarm Countdown</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
.countdown {
font-size: 24px;
margin: 10px;
}
</style>
</head>
<body ng-controller="AlarmController">
<div>
<div class="countdown">
<h2>Alarm 1 (8 AM):</h2>
<p>{{ timeLeft1 }}</p>
</div>
<div class="countdown">
<h2>Alarm 2 (9 AM):</h2>
<p>{{ timeLeft2 }}</p>
</div>
<div class="countdown">
<h2>Alarm 3 (10 AM):</h2>
<p>{{ timeLeft3 }}</p>
</div>
</div>
<script>
var app = angular.module('alarmApp', []);
app.controller('AlarmController', function($scope, $interval) {
// Function to calculate the time remaining for a given target time
function getTimeRemaining(targetTime) {
var now = new Date();
var remainingTime = targetTime - now;
var hours = Math.floor(remainingTime / (1000 * 60 * 60));
var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
return hours + "h " + minutes + "m " + seconds + "s";
}
// Setting up the times for 8 AM, 9 AM, and 10 AM
var alarm1Time = new Date();
alarm1Time.setHours(8, 0, 0, 0); // 8:00 AM today
var alarm2Time = new Date();
alarm2Time.setHours(9, 0, 0, 0); // 9:00 AM today
var alarm3Time = new Date();
alarm3Time.setHours(10, 0, 0, 0); // 10:00 AM today
// Update countdown every second
$interval(function() {
$scope.timeLeft1 = getTimeRemaining(alarm1Time);
$scope.timeLeft2 = getTimeRemaining(alarm2Time);
$scope.timeLeft3 = getTimeRemaining(alarm3Time);
}, 1000); // Update every second
});
</script>
</body>
</html>
countdown clocksCOuld you build 3 count down in Angular.js?
<!DOCTYPE html>
<html lang="en" ng-app="alarmApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alarm Countdown</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
.countdown {
font-size: 24px;
margin: 10px;
}
</style>
</head>
<body ng-controller="AlarmController">
<div>
<div class="countdown">
<h2>Alarm 1 (8 AM):</h2>
<p>{{ timeLeft1 }}</p>
</div>
<div class="countdown">
<h2>Alarm 2 (9 AM):</h2>
<p>{{ timeLeft2 }}</p>
</div>
<div class="countdown">
<h2>Alarm 3 (10 AM):</h2>
<p>{{ timeLeft3 }}</p>
</div>
</div>
<script>
var app = angular.module('alarmApp', []);
app.controller('AlarmController', function($scope, $interval) {
// Function to calculate the time remaining for a given target time
function getTimeRemaining(targetTime) {
var now = new Date();
var remainingTime = targetTime - now;
var hours = Math.floor(remainingTime / (1000 * 60 * 60));
var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
return hours + "h " + minutes + "m " + seconds + "s";
}
// Setting up the times for 8 AM, 9 AM, and 10 AM
var alarm1Time = new Date();
alarm1Time.setHours(8, 0, 0, 0); // 8:00 AM today
var alarm2Time = new Date();
alarm2Time.setHours(9, 0, 0, 0); // 9:00 AM today
var alarm3Time = new Date();
alarm3Time.setHours(10, 0, 0, 0); // 10:00 AM today
// Update countdown every second
$interval(function() {
$scope.timeLeft1 = getTimeRemaining(alarm1Time);
$scope.timeLeft2 = getTimeRemaining(alarm2Time);
$scope.timeLeft3 = getTimeRemaining(alarm3Time);
}, 1000); // Update every second
});
</script>
</body>
</html>
countdown clocks
162,163,164,165
[ AngularJS Example ] 3 countdown clocks
[ jquery Example ] 3 countdown clocks (jquery.countdown.min.js)
[ Vanilla JavaScript Example ] 3 countdown clocks
[ AngularJS Example ] 3 countdown clocks
댓글목록
등록된 댓글이 없습니다.