<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>聽指令的小方塊2</title>
????<style>
????????*{
????????????padding:0;
????????????margin:0;
????????}
????????table{
????????????border:2px?solid?#000000;
????????????border-collapse:?collapse;
????????????margin:50px?auto;
????????}
????????table?th{
????????????width:50px;
????????????height:50px;
????????????-webkit-box-sizing:?border-box;
????????????-moz-box-sizing:?border-box;
????????????box-sizing:?border-box;
????????????border:1px?solid?#ccc;
????????}
????????.red{
????????????width:50px;
????????????height:10px;
????????????background:?red;
????????}
????????.blue{
????????????width:50px;
????????????height:40px;
????????????background:?blue;
????????}
????????.rool{
????????????width:415px;
????????????margin:0?auto;
????????}
????????.rool?.btn{
????????????width:80px;
????????????height:30px;
????????????margin:10px;
????????????color:?#fff;
????????????background:blue;
????????????border:1px?solid?blue;
????????????border-radius:?5px;
????????????cursor:?pointer;
????????????transition:?color?.3s,background-color?.3s;?/*設置兩個*/
????????????/*過渡屬性??需要時間???速度曲線????延遲開始時間*/
?}
????????.rool?.btn:hover{
????????????background:?#fff;
????????????color:?blue;
????????}
????</style>
</head>
<body>
????<table>
????????<tr>
????????????<th></th>
????????????<th>1</th>
????????????<th>2</th>
????????????<th>3</th>
????????????<th>4</th>
????????????<th>5</th>
????????????<th>6</th>
????????????<th>7</th>
????????????<th>8</th>
????????????<th>9</th>
????????????<th>10</th>
????????</tr>
????????<tr>
????????????<th>1</th>
????????????<th?class="diamond"?id="diamond"?style="transform:rotate(0deg);??position:?relative;?top:0;?left:0;">
????????????????<div?class="red"></div>
????????????????<div?class="blue"></div>
????????????</th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????</tr>
????????<tr>
????????????<th>2</th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????</tr>
????????<tr>
????????????<th>3</th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????</tr>
????????<tr>
????????????<th>4</th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????</tr>
????????<tr>
????????????<th>5</th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????</tr>
????????<tr>
????????????<th>6</th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????</tr>
????????<tr>
????????????<th>7</th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????</tr>
????????<tr>
????????????<th>8</th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????</tr>
????????<tr>
????????????<th>9</th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????</tr>
????????<tr>
????????????<th>10</th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????????<th></th>
????????</tr>
????</table>
????<div?class="rool">
????????<button?type="button"?class="btn"?id="tralef">TRA?LEF</button><!--左移動，方向不變-->
?<button?type="button"?class="btn"?id="tratop">TRA?TOP</button><!--上移動，方向不變-->
?<button?type="button"?class="btn"?id="trarig">TRA?RIG</button><!--右移動，方向不變-->
?<button?type="button"?class="btn"?id="trabot">TRA?BOT</button><!--下移動，方向不變-->
?<button?type="button"?class="btn"?id="movlef">MOV?LEF</button><!--左旋轉，左移動-->
?<button?type="button"?class="btn"?id="movtop">MOV?TOP</button><!--上旋轉，上移動-->
?<button?type="button"?class="btn"?id="movrig">MOV?RIG</button><!--右旋轉，右移動-->
?<button?type="button"?class="btn"?id="movbot">MOV?BOT</button><!--下旋轉，下移動-->
?</div>
</body>
</html>
怎么讓class為：diamond隨機位置？
19990000
2017-10-28 13:20:31
