<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ladder</title>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid #ccc;
}
div {
position: relative;
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<script>
(function(context, step, window, document) {
var x = context / step;
for (var i = 0; i < x; i++) {
var eldiv = document.createElement('div');
eldiv.style.left = i * step + 'px';
eldiv.style.backgroundColor = 'rgb(' + i +', 0, 0)';
document.body.appendChild(eldiv);
}
})(800, 10, window, document);
</script>
</body>
</html>