console
function jisuan()
{
$("#reDIV").empty();
var val = parseFloat( $("#val").val());
var Bval = 0;
var Zval =0;
var Dval =0;
for(var i =1;i<21;i++)
{
Bval = val*(i/100);
Zval = (val + Bval).toFixed(2);
Dval = (val - Bval).toFixed(2);
var ApdDiv = $("<div></div>").addClass("reBLO");
var ApdDiv1 = $("<div></div>").addClass("reTXT1").append("<input value='"+Zval+"'/>"+i+"%");
var ApdDiv2 = $("<div></div>").addClass("reTXT2").append("<input value='"+Dval+"'/>-"+i+"%");
ApdDiv.append(ApdDiv1).append(ApdDiv2);
$("#reDIV").append(ApdDiv);
}
}
function chae()
{
var val1 = parseFloat($("#val1").val());
var val2 = parseFloat($("#val2").val());
var val3 = 0;
var val4 = 0;
if(val1>val2)
{
val3 = (val1 -val2).toFixed(2);
val4 = ((val3/val1)*100).toFixed(2);
var rediv = $("<div></div>").addClass("chaeD").append("从<p>"+val1+"</p>到<p>"+val2+"</p>差额<p>"+val3+"</p>亏损<p>"+val4+"%</p>");
$("#chae").append(rediv);
}else
{
val3 = (val2 - val1).toFixed(2);
val4 = ((val3/val1)*100).toFixed(2);
var rediv = $("<div></div>").addClass("chaeZ").append("从<p>"+val1+"</p>到<p>"+val2+"</p>差额<p>"+val3+"</p>盈利<p>"+val4+"%</p>");
$("#chae").append(rediv);
}
}
function cle()
{
$("#chae").empty();
}
<div class="gn1">
<input id="val" /><button onclick="jisuan()">计 算</button>
</div>
<div class="gn2">
<input id="val1" /> 到 <input id="val2"/><button onclick="chae()">计 算</button><button onclick="cle()">清空</button>
</div>
<div id="chae" class="chae">
</div>
<div class="reDIV" id="reDIV">
<div class="reBLO">
<div class="reTXT1"> <input /> 1% </div>
<div class="reTXT2"> <input /> -1% </div>
</div>
</div>
.gn1{
margin:20px;
}
.gn2{
margin:20px;
}
.reDIV{
margin-top:30px;
padding: 10px;
border: 1px solid green;
display:block;
float: left;
width: 600px;
}
.reBLO{
margin-top:5px;
padding: 5px;
display: block;
float: left;
}
.reTXT1 {
padding: 5px;
width: 200px;
display:block;
margin-left: 20px;
float:left;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
color:red;
}
.reTXT2{
padding: 5px;
width: 200px;
display:block;
margin-left: 20px;
float:left;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
color:green;
}
.chae{
display:block;
}
.chae p{
display:inline-block;
font-family: 'Courier New', Courier, monospace;
font-weight:bold;
width:50px;
text-align:center;
}
.chaeZ p{
color:red;
}
.chaeD p{
color:green;
}