SOURCE

console 命令行工具 X clear

                    
>
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");//动态添加的DIV
        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);
      // <div class="chaeD">从<p>32.5</p>到<p>33</p>差额<p>1.5</p>共计<p>1.5%</p></div>
      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);
        //<div class="chaeZ">从<p>32.5</p>到<p>33</p>差额<p>1.5</p>共计<p>1.5%</p></div>
        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()">&nbsp;&nbsp;&nbsp;</button>
        </div>
<div class="gn2">
  <input id="val1" /><input id="val2"/><button onclick="chae()">&nbsp;&nbsp;&nbsp;</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;
}

本项目引用的自定义外部资源