Zamana karşı yapılan tüm uygulamalarda geri sayım işlemi yer almaktadır. Kullanıcının geçen zamanı görmesi için halka şeklinde bir grafik oluşturacağız. Halkanın ortasında geçen süre görüntülenecektir. Ayrıca süre için grafik yapısı kullanılacaktır. Bu işlemleri div etiketiyle oluşturmak istiyoruz.
Şimdi uygulamayı yapmaya başlayalım.
Adım 1: Visual Studio programını açınız. Bunun için devenv komutunu kullanabilirsiniz.
Adım 2: Create a new project diyerek yeni bir proje oluşturunuz. Dil olarak c#, platform olarak Windows, ortam olarak Web seçiniz. Ekrana gelen şablonlardan Asp.Net Web Application(.Net Framework) seçiniz.
Adım 3: Proje ismini GeriSayim olarak belirleyiniz. FrameWork olarak 4.8 tercih ediniz. Projenizi yayınlayacağınız sunucudaki versiyonu dikkate alarak bu tercihi yapınız. Böylece projeniz yayınlandığında hatasız olarak çalıştırılacaktır.. Create diyerek işlemi tamamlayınız.
Adım 4: Empty şablonunu seçtikten sonra sertifika işlemi için kullanılan Configure for HTTPS onay kutusunu kaldırıp Create diyerek işlemi tamamlayınız.
Adım 5: Projeye ismi zaman.aspx isminde bir web sayfası ekleyiniz. Web sayfasının temel ayarlamalarını yapınız. Web sayfası aşağıdaki gibi olacaktır.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zaman.aspx.cs" Inherits="GeriSayim.zaman" %>
<!DOCTYPE html>
<html lang="tr">
<head runat="server">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halka Grafik Geri Sayım İşlemleri</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Adım 7: Web sayfasına Bootstrap ve jquery kütüphanelerini dahil edip gerekli olan linkleri web sayfasının head etiketi arasına ekleyelim. Sayfanın yapısı aşağıdaki gibi olacaktır.
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
Adım 8: Şimdi tasarıma uygun geri sayım işlemini yapalım.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zaman.aspx.cs" Inherits="GeriSayim.zaman" %>
<!DOCTYPE html>
<html lang="tr">
<head runat="server">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halka Grafik Geri Sayım İşlemleri</title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<style>
.countdown-circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(#ff6347 0%, #ddd 0%);
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.timer {
font-size: 36px;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container d-flex flex-column justify-content-center align-items-center vh-100">
<div id="countdown-circle" class="countdown-circle mb-3">
<div id="timer" class="timer">04:00</div>
</div>
</div>
<script>
$(document).ready(function () {
const totalTime = 4 * 60 * 1000 + 1000;
let targetTime = new Date().getTime() + totalTime;
const $countdownCircle = $('#countdown-circle');
const $timerElement = $('#timer');
function updateCountdown() {
const now = new Date().getTime();
const timeLeft = targetTime - now;
if (timeLeft <= 0) {
clearInterval(countdownInterval);
$timerElement.text("Zaman Doldu!");
$countdownCircle.css('background', '#4CAF50');
return;
}
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
$timerElement.text(`${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`);
const progress = ((totalTime - timeLeft) / totalTime) * 100;
$countdownCircle.css('background', `conic-gradient(#ff6347 ${progress}%, #ddd ${progress}%)`);
}
const countdownInterval = setInterval(updateCountdown, 1000);
});
</script>
</form>
</body>
</html>
Adım 9: Geri sayım işlemini Svg ile yapalım.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zaman.aspx.cs" Inherits="GeriSayim.zaman" %>
<!DOCTYPE html>
<html lang="tr">
<head runat="server">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halka Grafik Geri Sayım İşlemleri</title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body class="bg-light d-flex justify-content-center align-items-center vh-100">
<div class="position-relative">
<svg class="position-relative" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="85" stroke="#e6e6e6" stroke-width="20" fill="none" />
<circle class="progress" cx="100" cy="100" r="85" stroke="#3498db" stroke-width="20" fill="none"
stroke-dasharray="534.07" stroke-dashoffset="534.07" transform="rotate(-90 100 100)" />
</svg>
<div class="position-absolute top-50 start-50 translate-middle fs-3 fw-bold" id="timeText">04:00</div>
</div>
<script>
$(document).ready(function () {
var totalTime = 240;
var remainingTime = totalTime;
var circle = $('.progress');
var timeText = $('#timeText');
var circumference = 2 * Math.PI * 85;
function formatTime(seconds) {
var minutes = Math.floor(seconds / 60);
var secs = seconds % 60;
return (minutes < 10 ? '0' + minutes : minutes) + ':' + (secs < 10 ? '0' + secs : secs);
}
function updateCircle() {
var offset = circumference * (remainingTime / totalTime);
circle.css('stroke-dashoffset', offset - circumference);
timeText.text(formatTime(remainingTime));
}
var interval = setInterval(function () {
remainingTime--;
updateCircle();
if (remainingTime <= 0) {
clearInterval(interval);
}
}, 1000);
});
</script>
</body>
</html>
Adım 10: Şimdi canvas ile yapalım.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zaman.aspx.cs" Inherits="GeriSayim.zaman" %>
<!DOCTYPE html>
<html lang="tr">
<head runat="server">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halka Grafik Geri Sayım İşlemleri</title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body class="bg-light d-flex justify-content-center align-items-center vh-100">
<div class="position-relative">
<!-- Canvas için Halka -->
<canvas id="timerCanvas" width="200" height="200"></canvas>
<!-- Zaman Metni -->
<div class="position-absolute top-50 start-50 translate-middle fs-3 fw-bold" id="timeText">04:00</div>
</div>
<script>
$(document).ready(function () {
var totalTime = 240; // 4 dakika (240 saniye)
var remainingTime = totalTime;
var canvas = document.getElementById("timerCanvas");
var ctx = canvas.getContext("2d");
var radius = 85;
var circumference = 2 * Math.PI * radius; // Çevre
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
// Zamanı 00:00 formatında döndüren fonksiyon
function formatTime(seconds) {
var minutes = Math.floor(seconds / 60);
var secs = seconds % 60;
return (minutes < 10 ? '0' + minutes : minutes) + ':' + (secs < 10 ? '0' + secs : secs);
}
// Arka Plan Çemberi
function drawBackgroundCircle() {
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); // Arka plan çemberi
ctx.strokeStyle = "#e6e6e6"; // Arka plan çemberi rengi
ctx.lineWidth = 20;
ctx.stroke();
}
// İlerleyen Çemberi (Azalan Çember) Çiz
function drawProgressCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Her saniye eski çiziği temizle
drawBackgroundCircle(); // Arka plan çemberini yeniden çiz
// Saat yönünde azalan ilerleyen çemberi çiz
var offset = circumference * (1 - remainingTime / totalTime); // Azalma oranı
var startAngle = -Math.PI / 2; // Üstten başlatmak için açıyı -Math.PI / 2 olarak ayarlıyoruz
var endAngle = startAngle + (2 * Math.PI * (1 - (remainingTime / totalTime))); // Saat yönünde artan açı
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle); // Çemberi saat yönünde çiz
ctx.strokeStyle = "#3498db"; // İlerleyen çemberin rengi
ctx.lineWidth = 20; // Çizgi kalınlığı
ctx.stroke();
}
// Zaman metnini güncelle
function updateTimeText() {
$('#timeText').text(formatTime(remainingTime)); // Zaman metnini güncelle
}
// Zamanı güncelle
function updateCircle() {
drawProgressCircle();
updateTimeText();
}
// Başlat
var interval = setInterval(function () {
remainingTime--;
updateCircle();
if (remainingTime <= 0) {
clearInterval(interval);
}
}, 1000);
});
</script>
</body>
</html>
Adım 11: Geri sayım işlemini javascript ile yapalım.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zaman.aspx.cs" Inherits="GeriSayim.zaman" %>
<!DOCTYPE html>
<html lang="tr">
<head runat="server">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halka Grafik Geri Sayım İşlemleri</title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<style>
body {
background-color: #f4f4f4;
}
.timer-container {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #e6e6e6;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.timer-progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: transparent;
transition: background 1s ease;
clip-path: circle(50% at 50% 50%);
}
.time-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body class="d-flex justify-content-center align-items-center vh-100">
<div class="position-relative">
<!-- Geri sayım çemberi -->
<div class="timer-container">
<div class="timer-progress" id="timerProgress"></div>
<div class="time-text" id="timeText">04:00</div>
</div>
</div>
<script>
var totalTime = 240; // Başlangıçta 4 dakika (240 saniye)
var remainingTime = totalTime; // Kalan süreyi tutan değişken
var progress = document.getElementById('timerProgress'); // Çemberin ilerleme kısmı
var timeText = document.getElementById('timeText'); // Zaman metni
// Zamanı 00:00 formatında döndüren fonksiyon
function formatTime(seconds) {
var minutes = Math.floor(seconds / 60); // Dakikalar
var secs = seconds % 60; // Saniyeler
return (minutes < 10 ? '0' + minutes : minutes) + ':' + (secs < 10 ? '0' + secs : secs); // Formatlı zaman
}
// Zaman ilerledikçe çemberi güncelle
function updateCircle() {
var percentage = remainingTime / totalTime;
var angle = 360 * (1 - percentage); // Azalma oranını saat yönünde hesapla
progress.style.background = `conic-gradient(#3498db ${angle}deg, transparent 0deg)`; // Çemberin azalma kısmı
timeText.textContent = formatTime(remainingTime); // Zamanı güncelle (00:00 formatında)
}
// Zamanı güncellemek için interval
var interval = setInterval(function () {
remainingTime--; // Kalan süreyi bir azalt
updateCircle(); // Çemberi ve zaman metnini güncelle
if (remainingTime <= 0) {
clearInterval(interval); // Zaman bittiğinde intervali durdur
}
}, 1000); // Her saniye
</script>
</body>
</html>