首页 > 代码库 > 有趣的格子效果
有趣的格子效果
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; } .container { width: 100%; height: 100%; } .container .box { width: 10%; height: 10%; text-align:center; color:white; font-size:large; float: left; } </style> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script type="text/javascript"> var ViewModel = { arr: new Int32Array(100), randomColor: function () { //16进制方式表示颜色0-F var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; var strHex = "#"; var index; for (var i = 0; i < 6; i++) { //取得0-15之间的随机整数 index = Math.round(Math.random() * 15); strHex += arrHex[index]; } return strHex; } }; $(function () { ko.applyBindings(ViewModel); //,text:parseInt($index()/10)+‘, ‘+$index()%10 }); </script></head><body> <div class="container" data-bind="foreach:arr"> <div class="box" data-bind="style:{‘backgroundColor‘:ViewModel.randomColor()}"></div> </div></body></html>
没有头绪时，看一下。
有趣的格子效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。