随时间，单元格逐个变红的表格（原创）

Html

Css

 td {
	border:1px solid black;
	padding:20px;
}

(function(global, undefined) {
     var initNum, table; //总单元格数，table节点

//初始化，创建一个表格，提供参数行列数
     var _init = function(trNum, tdNum) {
         table = document.createElement("table");
         initNum = 1;
         for (var i = 0; i < trNum; i++) {
             var tr = document.createElement("tr");
             for (var j = 0; j < tdNum; j++) {
                 var td = document.createElement("td");
                 td.innerText = initNum;
                 initNum++;
                 tr.append(td);
             }
             table.append(tr);
         }
         var node = document.getElementById("something_for_nothing");
         if (!node) {
             return false;
         }
         node.append(table);
     }
     //测试api，帮助测试bug
     var _showConfig = function() {
         console.log(typeof table)
     }
     //每个时间间隔使一个单元格变红，参数时间间隔
     var _randTd = function(interval) {
         if (!interval) interval = 1000;
         var transNodes = _getAllChildNodes(table);
         var len = transNodes.length;
         var timer = setInterval(function() {
             var randNum = Math.floor(Math.random() * len);
             transNodes[randNum].style.backgroundColor = "red";
             transNodes.splice(randNum, 1);
             console.log(randNum);
             len--;
             if (len === 0) {
                 clearInterval(timer);
             }
         }, interval)
     }

//获取表格中所有的单元格并存入到数组中
     function _getAllChildNodes(elem) {
         var collect = [];
         var trCol = Array.prototype.slice.call(elem.children);
         for (var i = 0, len = trCol.length; i < len; i++) {
             var tdCol = Array.prototype.slice.call(trCol[i].children);
             collect.push.apply(collect, tdCol);
         }
         return collect;
     }

//暴露全局
     var createTable = {
         init: _init,
         showConfig: _showConfig,
         randTd: _randTd,
     }
     global.createTable = createTable;
 })(window)

createTable.init(4, 5); //初始化表格
 createTable.showConfig();
 createTable.randTd(500); //动画

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

随时间，单元格逐个变红的表格（原创）

代码描述：完全使用原生js插件的写法，使用模块模式开发

此代码是提供的功能并不实用，但是里面包含一些高级javascriptt代码技巧，也同样包含一些js中较难掌握的基础知识，在此与需要的同学分享借鉴

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

oneice

相关代码

随时间，单元格逐个变红的表格（原创）

最新