Example demonstration of math.random() random function

        HTML Code

	<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"> Start </button>
			   <button class="btn4"> end </button>
		   </div>
		   </div>

CSS Code

.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 Code

  // Random rotation 
			  let btn3=document.querySelector('.btn3');
			  let btn4=document.querySelector('.btn4');
			  let times=-1;
			  //  Definition tr td Perform child node operations 
			  let trs=0;
			  let tds=0;
			  // Bind click event 
			  btn3.onclick=function(){
				  // Click to start the timer 
				  times=setInterval(function(){
					  // obtain tbody Table subject   Set the sub elements of the table body as an array 
					  let tr1=document.querySelector('tbody').children[trs];
					  // to trs Set the sub elements as arrays 
					  let td1=tr1.children[tds];
					  // hold td1 Background color style font size style empty 
					  td1.style.backgroundColor='';
					  td1.style.fontSize='';
					  // Set random rows for the array   Number of columns 
					  trs=parseInt(Math.random()*8);
					  tds=parseInt(Math.random()*7);
					  // Get the row of the table body equal to the set array row 
					  let tr=document.querySelector('tbody').children[trs];
					  // Get the columns in the row equal to the set array columns 
					  let td=tr.children[tds];
					  //  Set the background color for the column   And font size 
					  td.style.backgroundColor='pink';
					  td.style.fontSize='30px'
				  },30)
			  }
			  // Click the end button to clear the timer 
			  btn4.onclick=function(){
				  clearInterval(times);
			  }

design sketch