jQuery ile yapılabilir...
Sizin için küçük bir örnek hazırladım... Geliştirebilirsiniz...
Kodları aşağıda ve çalışan demosu
buradadır...
<div class="sayilar2">
<input id="bkutu1" type="text" disabled class="kutu2" value=""/>
<input id="bkutu2" type="text" disabled class="kutu2" value=""/>
<input id="bkutu3" type="text" disabled class="kutu2" value=""/>
<input id="bkutu4" type="text" disabled class="kutu2" value=""/>
<input id="bkutu5" type="text" disabled class="kutu2" value=""/>
</div>
<div class="sayilar" style="display:none;">
<input id="kutu1" type="text" class="kutu" value=""/>
<input id="kutu2" type="text" class="kutu" value=""/>
<input id="kutu3" type="text" class="kutu" value=""/>
<input id="kutu4" type="text" class="kutu" value=""/>
<input id="kutu5" type="text" class="kutu" value=""/>
</div>
<div style="display:none;" class="kontrol">Kontrol</div>
<div class="buton">Sayıları Üret</div>
.buton{
color:#eee;
background:#444;
font-family:arial;
display:inline-block;
padding:6px 10px;
font-size:140%;
text-align:center;
cursor:pointer;
clear:both;
float:left;
}
.kontrol{
color:#eee;
background:#154621;
font-family:arial;
display:inline-block;
padding:6px 10px;
font-size:140%;
text-align:center;
margin:3px auto;
cursor:pointer;
margin-left:10px;
border-radius:5px;
}
.sayilar{
margin-bottom:20px;
display:inline-block;
float:left;
}
.sayilar2{
margin-bottom:20px;
}
.kutu{
padding:6px 10px;
outline:none;
width:40px;
border-radius:4px;
border:3px solid #666;
text-align:center;
font-weight:600;
color:#666;
font-size:150%;
}
.kutu2{
padding:6px 10px;
outline:none;
width:40px;
border-radius:4px;
border:3px solid #fff;
text-align:center;
font-weight:600;
color:#666;
font-size:150%;
}$(".buton").on("click", function() {
var sayi1 = Math.floor(Math.random() * 100) + 1;
var sayi2 = Math.floor(Math.random() * 100) + 1;
var sayi3 = Math.floor(Math.random() * 100) + 1;
var sayi4 = Math.floor(Math.random() * 100) + 1;
var sayi5 = Math.floor(Math.random() * 100) + 1;
// aynı sayıların gelmesini engelleyelim
if(sayi1==sayi2){
var sayi1 = Math.floor(Math.random() * 100) + 1;
}
if(sayi1==sayi3){
var sayi1 = Math.floor(Math.random() * 100) + 1;
}
if(sayi1==sayi4){
var sayi1 = Math.floor(Math.random() * 100) + 1;
}
if(sayi1==sayi5){
var sayi1 = Math.floor(Math.random() * 100) + 1;
}
if(sayi2==sayi3){
var sayi2 = Math.floor(Math.random() * 100) + 1;
}
if(sayi2==sayi4){
var sayi2 = Math.floor(Math.random() * 100) + 1;
}
if(sayi2==sayi5){
var sayi2 = Math.floor(Math.random() * 100) + 1;
}
if(sayi3==sayi4){
var sayi3 = Math.floor(Math.random() * 100) + 1;
}
if(sayi3==sayi5){
var sayi3 = Math.floor(Math.random() * 100) + 1;
}
if(sayi4==sayi5){
var sayi4 = Math.floor(Math.random() * 100) + 1;
}
$("#bkutu1").val(sayi1);
$("#bkutu2").val(sayi2);
$("#bkutu3").val(sayi3);
$("#bkutu4").val(sayi4);
$("#bkutu5").val(sayi5);
$(".sayilar").show();
$(".kontrol").show();
});
$(".kontrol").on("click",function(){
var c1 = $("#bkutu1").val();
var c2 = $("#bkutu2").val();
var c3 = $("#bkutu3").val();
var c4 = $("#bkutu4").val();
var c5 = $("#bkutu5").val();
var s1 = $("#kutu1").val();
var s2 = $("#kutu2").val();
var s3 = $("#kutu3").val();
var s4 = $("#kutu4").val();
var s5 = $("#kutu5").val();
if(s1 == "" || s2 == "" || s3 == "" || s4 == "" || s5 == ""){
alert("Kutuları eksiksiz doldurunuz...");
} else {
var s1 = $("#kutu1").val();
var s2 = $("#kutu2").val();
var s3 = $("#kutu3").val();
var s4 = $("#kutu4").val();
var s5 = $("#kutu5").val();
if(s1>s2 &&
s1>s3 &&
s1>s4 &&
s1>s5 &&
s2>s3 &&
s2>s4 &&
s2>s5 &&
s3>s4 &&
s3>s5 &&
s4>s5){
alert("Tamamdır büyükten küçüğe sıraladın...");
} else {
alert("Hayır sıralama yanlış....");
}
}
});