Web前端--階段測試
首先我們來看一下本階段我們需要完成的成品：
下面是源碼：
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.item {width: 30px;height: 30px;}</style></head><body><table border="" cellspacing="" cellpadding=""><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr></table><input type="button" name="" id="turnRedByIndex" value="逐個(gè)變紅" /><input type="button" name="" id="reset" value="重置" /><ol id="ol1"></ol></body><script type="text/javascript">var items = document.getElementsByClassName('item');//找到頁面中所有的小方格(class = 'item')var ol1 = document.getElementById('ol1');//找到頁面中的有序列表ol1var index = 0;//定義一個(gè)初始值為0，變量名為index的int類型的變量var allowRed = true;//定義一個(gè)初始值為true，變量名為allowRed的bool類型的變量var isrun = false;//定義一個(gè)初始值為false，······，用來記錄逐個(gè)變紅的進(jìn)行狀態(tài)document.getElementById('turnRedByIndex').onclick = function() {//給按鈕綁定點(diǎn)擊事件log('點(diǎn)擊‘逐個(gè)變紅’按鈕！');if(isrun){//判斷是否在逐個(gè)變紅的狀態(tài)，如果是return;//退出函數(shù)，以下語句不再執(zhí)行}isrun = true;//給逐個(gè)變紅的狀態(tài)賦值為：trueturnRedByIndex();//調(diào)用逐個(gè)變紅的函數(shù)};document.getElementById('reset').onclick = reset;//給按鈕綁定點(diǎn)擊事件for (var i = 0; i < items.length; i++) {//給‘方格’綁定點(diǎn)擊事件items[i].value = i;items[i].onclick = function() {turnRed(this);log(`點(diǎn)擊了` + (this.value + 1) + `號(hào)方塊！`);}}function turnRed(doc) {doc.style.background = 'red';}function reset() {log('點(diǎn)擊‘重置’按鈕！');if (isrun) {allowRed = false;isrun = false;}index = 0;for (var i = 0; i < items.length; i++) {items[i].style.background = 'white';}}function turnRedByIndex() {if (!allowRed) {index = 0;allowRed = true;return;}turnRed(items[index]);index++;if (index < 81) {setTimeout(turnRedByIndex, 100);} else {index = 0;isrun = false;}}function log(infos) {var li = document.createElement('li');//創(chuàng)建li元素var txt = document.createTextNode(infos);//創(chuàng)建文本li.appendChild(txt);//把文本添加到li元素里面作為子元素ol1.appendChild(li);//把li元素添加到ol元素中作為子元素}</script></html>
有問題的話可以微信或者公眾號(hào)私信我！
評(píng)論
圖片
表情