//creating element const El = ['','',''] //this code block is for Layout only $(function(){ var Table = $('table') for(rh1=0;rh1<25;rh1++) { Table.append(El[1]) } for(rh=0;rh<24;rh++) { Table.append(El[0]) Table.append(El[1]) for(rd=0;rd<24;rd++) { Table.append(El[2]) } } for(ind=0;ind<$('th').length;ind++) { if(ind>24) { $('th').eq(ind).text(ind-24) } else { $('th').eq(ind).text(ind) } if(ind%2==1) { $('th').eq(ind).css({'background':'#000','color':'#0b0'}) } } $('td').css({'border-color':'#fff'}) }) //end of code block for layout only //code block goes after this //is for functionality var Id = [] var Nxt = [] var hsl = ''; $(function(){ for(id=0;id<$('td').length;id++) { $('td').eq(id).attr({'onclick':'paint(this)','id':id}) } }) function paint(obj) { if(hsl==='') { obj.style.background = '#ddd'; } else { obj.style.background = hsl; } Id.unshift(obj.getAttribute('id')) } // for background color function color(col) { hsl = col.value } function prev() { if(Id.length>0) { document.getElementById(Id[0]).style.background = '#fff'; } if(Id.length>0) { Nxt.unshift(Id[0]) Id.shift() } } // for next button function next() { if(Nxt.length>0) { document.getElementById(Nxt[0]).style.background = '#ddd'; } if(Nxt.length>0) { Id.unshift(Nxt[0]) Nxt.shift() } } // for delete button function del() { var con = confirm('Delete Drawing ?') if(con === true){ for(var i of Id) { document.getElementById(i).style.background = 'none'; } Id = [] Nxt = [] } } // for day or nigth mode var mode = 0 function dn() { var div = document.getElementsByTagName('div'); var body = document.getElementsByTagName('body'); if(mode == 0) { div[0].style.boxShadow = '0 0 4px 1px #fff'; div[1].style.boxShadow = '0 0 4px 1px #fff'; body[0].style.background = '#000'; } else { div[0].style.boxShadow = '0 0 4px #555'; div[1].style.boxShadow = '0 0 4px #555'; body[0].style.background = '#fff'; } mode > 0 ? mode = 0:mode++; }

[ Web ] Pixel Draw