Radián és Fok átváltó
by David Joseph Guzsik
HTML
<p id="rad"><input type="number"> radián = <span></span></p>
<div></div>
<p id="deg"><input type="number"> fok = <span></span></p>
<div></div>
CSS
p {
margin-bottom: 0px;
}
p + div:empty {
display: none;
}
p + div {
display: inline-block;
margin-top: 10px;
border: 1px solid rgba(0,0,0,0.3);
background-color: rgba(0,0,0,0.2);
}
p + div td {
border: 0;
}
p + div td:not([rowspan]) {
text-align: center;
}
p + div td[rowspan] {
padding: 0px 5px;
}
p + div tr:nth-of-type(1) td:not([rowspan]) {
border-bottom: 1px solid;
}
JavaScript
function truncate(num,to){
to = typeof to === 'number' && !isNaN(to) ? Math.pow(10,to) : 1000;
return Math.round(num * to)/to;
}
function Radian(rnum){
rnum = new Number(rnum);
this.toDegrees = function(){
return new Degree((rnum*180)/Math.PI);
}
this.toDegree = this.toDegrees;
this.toString = function(){
return truncate(rnum)+' (rad)';
}
this.value = rnum;
};
Radian.prototype = Number;
function Degree(dnum){
dnum = new Number(dnum);
this.toRadian = function(){
return new Radian((dnum*Math.PI)/180);
}
this.toString = function(){
return truncate(dnum)+'°';
}
this.value = dnum;
};
Degree.prototype = Number;
function Explain(what){
var $table =
$(document.createElement('table'))
.append(document.createElement('tr'))
.append(document.createElement('tr'));
if (typeof what.toRadian === 'function'){
var $tr = $table.find('tr').first()
.append('<td rowspan=2>α (rad)'+(what.value != 180?' = ':'')+'</td>')
.append(function(){
if (what.value != 180){
$table.find('tr').last()
.append('<td>180°</td>');
}
else return;
return '<td>'+what+' * '+truncate(Math.PI,2)+' (rad)</td>';
})
.append('<td rowspan=2> ≈ '+(what.toRadian()));
return $table;
}
else if (typeof what.toDegrees === 'function'){
$table.find('tr').first()
.append('<td rowspan=2>α° = </td>')
.append('<td>'+(what.value == 1 ? '' : what.value+' (rad) * ')+'180°</td>')
.append('<td rowspan=2> ≈ '+(what.toDegrees()));
$table.find('tr').last()
.append('<td>'+truncate(Math.PI,2)+' (rad)</td>');
return $table;
}
else return '';
}
$(function(){
$('input').on('keydown keyup change',function(){
var $this = $(this),
val = $this.val(),
parentID = $this.parent().attr('id'),
newWhat = parentID == 'rad' ? 'Radian' : 'Degree',
toWhat = parentID == 'rad' ? 'Degrees' : 'Radian';
if (val.length == 0){
val = '';
$this.parent().next().html('');
}
else if (isNaN(val)){
val =...