有趣的格子效果
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>
没有头绪时，看一下。