JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<script src="http://cdn.jsdelivr.net/jsrender/1.0pre35/jsrender.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/3.0.3/amelia/bootstrap.min.css">
<div class="container">
	<div class="row">
      <div class="col-xs-12" style="margin-bottom:10px">
        <div class="form-inline">
          <div class="form-group">
            <label class="sr-only" for="iptNumber">Number Test</label>
            <input type="text" class="form-control" id="iptNumber" placeholder="Enter Number" value="5" />
          </div>
          <div class="form-group">
            <label class="sr-only" for="iptCountTest">Count Test</label>
            <input type="text" class="form-control" id="iptCountTest" placeholder="Enter Count" value="1000" />
          </div>
          <button type="button" id="test" class="btn btn-default">Test</button>
        </div>
       </div>
	</div>
	<div class="row" id="output">

	</div>
</div>
<script id="tmpl_table_item" type="text/x-jsrender">
    <div class="col-xs-12">
        <div class="panel panel-{{:type}}" id="table_{{:name}}">
            <!-- Default panel contents -->
            <div class="panel-heading">{{:name}}</div>
            <!-- Table -->
            <table class="table table-striped">
                <thead>{{:thead}}</thead>
                <tbody>{{:tbody}}</tbody>
            </table>
        </div>
    </div>
</script>
<script id="tmpl_press_item" type="text/x-jsrender">
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{:person}}" aria-valuemin="0" aria-valuemax="100" style="width: {{:person}}%">
    <span class="sr-only">{{:person}}%</span>
  </div>
</div>
</script>

JavaScript

function usefloor(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}
function useceil(min,max) {
    return Math.ceil(Math.random()*(max-min+1)+min-1);
}
function useround(min,max) {
    return Math.round(Math.random()*(max-min)+min);
}
var name = {"usefloor":"info","useceil":"warning","useround":"danger"}
var tmpl_table_item = $('#tmpl_table_item'),tmpl_press_item = $('#tmpl_press_item');
function test_random(num,count)
{
    $('#output').empty()
    for(x in name )
    {
        var total={};
        var thead_ret = '',tbody_head='';
        for(i=1;i<=num;i++){
            total['n'+i] = 0;
        }
        for(i=1;i<=count;i++){
            total['n'+ usefloor(1,num) ] ++;
        }
        for(i=1;i<=num;i++){
            var person = Math.round( total['n'+ i ] / count * 100, 2);
            tbody_head +='<tr><td>' + i + '</td><td width="60">' + person + '%</td><td>'+ tmpl_press_item.render({person:person}) +'</td></tr>';
        }
        thead_ret = '<tr><th width="60">編號</th><th colspan="2">機率</th></tr>';    
        var data = {name:x,type:name[x],thead:thead_ret,tbody:tbody_head}
        $('#output').append(
            tmpl_table_item.render(data)
        )
    }    
}
$('#test').click(function(){
    var num = parseInt( $('#iptNumber').val(),10)
    var count = parseInt( $('#iptCountTest').val(),10)
    test_random(num,count);
})