math.random()随机函数实例演示

        HTML代码

	<div class="suiji">
		<table>
			<tr>
				<td class="tds">1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
			</tr>
			<tr>
				<td>8</td>
				<td>9</td>
				<td>10</td>
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>15</td>
				<td>16</td>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
			</tr>
			<tr>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</td>
			</tr>
			<tr>
				<td>29</td>
				<td>30</td>
				<td>31</td>
				<td>32</td>
				<td>33</td>
				<td>34</td>
				<td>35</td>
			</tr>
			<tr>
				<td>36</td>
				<td>37</td>
				<td>38</td>
				<td>39</td>
				<td>40</td>
				<td>41</td>
				<td>42</td>
			</tr>
			<tr>
				<td>43</td>
				<td>44</td>
				<td>45</td>
				<td>46</td>
				<td>47</td>
				<td>48</td>
				<td>49</td>
			</tr>
			<tr>
				<td>50</td>
				<td>51</td>
				<td>52</td>
				<td>53</td>
				<td>54</td>
				<td>55</td>
				<td>56</td>
			</tr>
		</table>
		   <div class="diva">
			   <button class="btn3">开始</button>
			   <button class="btn4">结束</button>
		   </div>
		   </div>

CSS代码

.suiji table{
				width: 800px;
				margin: 100px auto;
				border: 1px solid grey;
				border-collapse: collapse;
			}
             .suiji tr{
				  width: 800px;
			  }
			  .suiji td{
				  width: 100px;
				  height: 100px;
				  text-align: center;
				  line-height: 100px;
				  border: 1px solid grey;
			  }

JS代码

  //随机转
			  let btn3=document.querySelector('.btn3');
			  let btn4=document.querySelector('.btn4');
			  let times=-1;
			  // 定义tr td进行子节点操作
			  let trs=0;
			  let tds=0;
			  //绑定点击事件
			  btn3.onclick=function(){
				  //点击开启定时器
				  times=setInterval(function(){
					  //获取tbody表格主题 给表格主体表格主体设置子元素为数组
					  let tr1=document.querySelector('tbody').children[trs];
					  //给trs设定子元素为数组
					  let td1=tr1.children[tds];
					  //把td1背景颜色样式字体大小样式清空
					  td1.style.backgroundColor='';
					  td1.style.fontSize='';
					  //给数组设置随机行 列数
					  trs=parseInt(Math.random()*8);
					  tds=parseInt(Math.random()*7);
					  //获取表格主体的行等于设定的数组行
					  let tr=document.querySelector('tbody').children[trs];
					  //获取行里面的列等于设定的数组列
					  let td=tr.children[tds];
					  // 给列设置背景色 和字体大小
					  td.style.backgroundColor='pink';
					  td.style.fontSize='30px'
				  },30)
			  }
			  //点击结束按钮清除定时器
			  btn4.onclick=function(){
				  clearInterval(times);
			  }

效果图