Bir çeşit jQuery Denemesi


Stack Overflow’da sorulan bir soru için fazlaca abarttığım bir cevap. İki metin kutusuna (yatay, dikey) sayılar giriliyor ve bu sayıların çarpımı kadart minik divler var olan 300px * 300px boyutundaki başka bir div içine ekleniyor:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script>

	$(document).ready(

	function () 
	{
		$("#go_btn").click(

		function () 
		{
			var height = Math.round(300 / $("#h").val())-2;
			var width = Math.round(300 / $("#w").val())-2;
			var div = $("<div></div>");

			$("#container").html('');

			for (i = 0; i < $("#h").val(); i++) 
			{
				for (j = 0; j < $("#w").val(); j++) 
				{
					$("#container").append('<div style="font-size:8px;border:1px dotted green;text-align:center;float:left;width:' + width + 'px;height:' + height + 'px;">' + i + ' x ' + j + '</div>');
				}
			}
		});
	});

</script>
<style>
#container {
    width: 300px;
    height:300px;
    border: 1px solid grey;
}

</style>
<p>Width:
    <input type="text" id="w" class="inp" />
</p>
<p>Height:
    <input type="text" id="h" class="inp" />
</p>
<p>
    <input type="button" value="Go" id="go_btn" />
</p>
<div id="container"></div>
Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s