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>

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. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s