JSFiddle - React, Tailwind, and code Playground

by twobin

HTML

<body>  
<div id="doc" class="y-t3">
	<div id="hd">
		<h1 class="h1">twobin 排序算法（JS）</h1>
	</div>
	<div id="bd">
		<div class="y-main">
			<div class="y-g main">
				<div>
					<h2>随机生成乱序数组</h2>
					<textarea id="txtInput" style="width:100%;height:100px;" readonly></textarea>
					<h2>排序数组</h2>
					<textarea id="txtOutput" style="width:100%;height:100px;" readonly></textarea>
					<br /><br />
					<div>			
						<button id="btnSort">JS内置排序</button>  
						<button id="btnBubble">冒泡排序</button>  
						<button id="btnSelection" >选择排序</button> 
						<button id="btnInsertion" >插入排序</button> 
						<button id="btnShell" >谢尔排序</button> 
						<button id="btnQuick" >递归快速排序</button>  
						<button id="btnStackQuick" >堆栈快速排序</button>  
						<button id="btnMerge" >归并排序</button> 
						<button id="btnHeap" >堆排序</button>
						<button id="btnGenerate">生成随机数</button>
						随机数个数：<input id="txtCount" value="10000" style="width:50px" /> 
						最大随机数：<input id="txtMax" value="10000" style="width:50px" />  			
					</div>
				</div>
				<div>
					<h2>排序算法性能</h2>
					<table cellpadding="0" cellspacing="0" class="table bd_1">                       
						<colgroup>
							<col >
							<col >
							<col >
						</colgroup>
						<thead class="b f14">
							<tr>
								<th class="tc">排序算法</th>
								<th class="tc">数组长度（个）</th>								
								<th class="tc">平均耗时（毫秒）</th>																	
							</tr>
						</thead>
						<tbody id="memberListIn">   
							<tr id="970000000000001">
								<td  class="tc">JS内置排序</td>
								<td><span id="length_1"></span></td>
								<td><span id="time_1"></span></td>
							</tr>
							<tr id="970000000000001">
								<td  class="tc">冒泡排序</td>
								<td><span id="length_2"></span></td>
								<td><span id="time_2"></span></td>
							</tr>
							<tr id="970000000000001">
								<td  class="tc">选择排序</td>
								<td><span id="length_3"></span></td>
								<td><span id="time_3"></span></td>
							</tr>
							<tr...

CSS

/* yahoo reset */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

/* 必须 */
body{font:13px/1.231 arial,helvetica,clean,sans-serif; text-align:center;}
#doc{margin:0 auto; text-align:left;}	
#doc{width:100%;}/* 网页宽度*/

.y-main{width:100%;}	
.y-b{width:180px;} /* 侧栏宽度 */	
.y-u{width:49.3%;float:right;}
.first{float:left;}

.y-t1 .y-b{float:right;}
.y-t1 .y-main{float:left;margin-right:-190px;}
.y-t1 .y-main .y-g{margin-right:190px;}

.y-t2 .y-b{float:left;}
.y-t2 .y-main{float:right;margin-left:-190px;}
.y-t2 .y-main .y-g{margin-left:190px;}

.y-t3 .y-b{float:left; display:none;}
.y-t3 .y-main{float:right;margin-left:-190px;}
.y-t3 .y-main .y-g{margin-left:0;}

#bd,#hd,.clear{*zoom:1;}
#bd:after,.clear:after{content:"\20";display:block;height:0;clear:both;visibility:hidden;}	
/*以上必须*/

/**/
.y-b{ display:none;}
#hd,#fd{ height:50px; background:#f8f8f8;}
#hd{border-bottom:1px solid #ccc; overflow:hidden;}
#fd{border-top:1px solid #ccc;}
.h1{font-size:24px; margin:10px 0 0 30px;}
.main{padding:20px;}	
.main h2{ font-size:18px; font-weight:700; margin:5px 0;}

/*member*/
.b{ font-weight:700;}
.bd_1{border:1px solid #ABB8CE;}
.f14{...

JavaScript

window.onload=function(){
	//生成随机数
	generate();
	var oGenerate=document.getElementById('btnGenerate');
	var oSort=document.getElementById('btnSort');
	var oBubble=document.getElementById('btnBubble');
	var oSelection=document.getElementById('btnSelection');
	var oInsertion=document.getElementById('btnInsertion');
	var oShell=document.getElementById('btnShell');
	var oQuick=document.getElementById('btnQuick');
	var oStackQuick=document.getElementById('btnStackQuick');
	var oMerge=document.getElementById('btnMerge');
	var oHeap=document.getElementById('btnHeap');
	var...