[SiyahYunus] Tarayıcı İçin Etkileyici Bir Canvas Saat Kodlayalım.

SiyahYunus

Katılımcı Üye
4 Ocak 2020
560
2
DOSYA:https://dosyayukle.biz/514d3cc20bf6d48f

VİRUSTOTALhttps://www.virustotal.com/gui/file/895147d69a3071485d52422cb21eae2a967499cf14bfc4f04f9a9573f1aa57dd/detection


Arkadaşlar merhaba bügün 1.5 yıl önce gibi bir süre önce editlediğim bir tarayıcı saatini paylaşacam. iyi okumalar.

1. ilk olrak bir html template açalım


Kod:
!DOCTYPE html>
<html>

<**** name="robots" content="noindex">
	<head>
		<title>Canvas Saat</title>

2.
Kod:
<body bgcolor=black>	
<style id="jsbin-css">
#body {
	background-color: #0;
	display: flex;
  justify-content: center;
  align-items: center;
}

3.
Kod:
#clock {
	padding: 0;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
</head>
	<body id='body'>
		<canvas id='clock' height='500', width='500'>SiyahYunus</canvas>
	<script>
var clock = ********.getElementById('clock');
var c = clock.getContext('2d');
c.lineCap = 'butt';
c.shadowColor = '#28d1fa';

function degToRad(degree) {
	var factor = Math.PI / 180;
	return degree * factor;
}

function renderTime() {
	if(window.innerWidth < 500) {
		c.canvas.width = window.innerWidth - 10;
		c.canvas.height = c.canvas.width;
	} else if(window.innerHeight < 500) {
		c.canvas.height = window.innerHeight - 10;
		c.canvas.width = c.canvas.height;
	} else {
		c.canvas.height = 500;
		c.canvas.width = 500;
	}
	
	var size = c.canvas.height;
	var halfSize = size / 2;
	var lineWidth = halfSize * 0.124;
	var shadowBlur = halfSize * 25;
	var timeFontSize = halfSize * 0.06;
	var dateFontSize = halfSize * 0.12;
	var timeFont = 'bold ' + timeFontSize + 'px' + ' helvetica';
	var dateFont = 'bold ' + dateFontSize + 'px' + ' helvetica';
	
  var now = new Date();
  var today = now.toDateString();
  var time = now.toLocaleTimeString();
	var hours = now.getHours();
	var minutes = now.getMinutes();
	var seconds = now.getSeconds();
	var milliseconds = now.getMilliseconds();
	var newSeconds = seconds + milliseconds/1000;
	var newMinutes = minutes + seconds/60 + milliseconds/60000;
	var newHours = hours + minutes/60 + seconds/3600 + milliseconds/3600000;
	var timeArray = time.split(' ');
	time = timeArray[0] + ' ' + timeArray[1];
	
  var gradient = c.createRadialGradient(halfSize, halfSize, 1, halfSize, halfSize, size * 0.6);
  gradient.addColorStop(0, '#09303a');
  gradient.addColorStop(1, 'black');

4.
Kod:
//Arkaplan
	c.shadowBlur = 10;
	c.fillStyle = gradient;
	c.strokeStyle = 'black';
	c.lineWidth = '1';
	c.beginPath();
	c.arc(halfSize, halfSize, halfSize * 0.996, 0, degToRad(360));
	c.stroke();
	c.fill();
	
	//saat
  c.shadowBlur = shadowBlur;
  c.strokeStyle = '#28d1fa';
  c.lineWidth = lineWidth;
	c.beginPath();
	c.arc(halfSize, halfSize, 0.8 * halfSize, degToRad(270), degToRad((newHours * 30) - 90));
	c.stroke();
	
	//dakika
	c.beginPath();
	c.arc(halfSize, halfSize, 0.68 * halfSize, degToRad(270), degToRad((newMinutes * 6) - 90));
	c.stroke();
  
	//saniye
	c.beginPath();
	c.arc(halfSize, halfSize, 0.56 * halfSize, degToRad(270), degToRad((newSeconds * 6) - 90));
	c.stroke();
	
	//milisaniye
	c.beginPath();
	c.arc(halfSize, halfSize, 0.44 * halfSize, degToRad(270), degToRad((milliseconds * 0.36) - 90));
	c.stroke();
	
	//tarih & zaman
  c.font = timeFont;
	c.fillStyle = '#28d1fa';
	c.fillText(today, halfSize * 0.76, halfSize * 1.16);
	c.font = dateFont;
	c.fillText(time, halfSize * 0.656, halfSize);
	
}

5.
Kod:
setInterval(renderTime, 10);
</script>
<script src=""></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"","root":""});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,********,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-1656750-34', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

</script>

</body>
</html>

!!! BU KODLARI KENDİM EDİTLEDİM KENDİ YAZDIĞIM YERLERDE OLDU. HTML DOSYASINI EK OLARAK PAYLAŞACAĞIM. SİZDE KENDİNİZE GÖRE BUNU EDİTLEYEBİLİR KAFANIZA GÖRE KULLANABİLİRSİNİZ.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.