public
Last active

Sieve of Eratosthenes using CSS3 selectors

  • Download Gist
sieve.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Sieve of Eratosthenes using CSS3 selectors (+ some JS)
</title>
<style type="text/css">
#sieve {
background-color: #EEE;
padding:30px;
}
.number {
background-color: darkorange;
display: inline-block;
border: 1px solid black;
padding: 15px;
}
input[type="text"] {
width: 50px;
}
</style>
 
<style type="text/css" title="sieveRules">
.number:first-child {
background-color: white;
}
.number:nth-of-type(2n+4) {
background-color: white;
}
</style>
<script type="text/javascript">
var lastNumber = 0;
function getStyleSheet(){
for(var i=0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i]
if (sheet.title == 'sieveRules') {
return sheet
}
}
}
function findNextMarked(lastKnownPrime){
var step = (lastKnownPrime >= 3 ? 2 : 1 )
var candidate = lastKnownPrime + step;
 
numbers = document.getElementById('sieve').children
while(candidate <= numbers.length) {
if (window.getComputedStyle(numbers[candidate - 1])["background-color"] != "rgb(255, 255, 255)" ) {
return candidate
}
candidate += step
}
}
function startProgressIndicator(){
console.log(new Date().getTime())
}
function stopProgressIndictator(){
console.log(new Date().getTime())
}
function addNewRule(lastPrime, lastNumberToCheck) {
newPrime = findNextMarked(lastPrime)
if (newPrime > lastNumberToCheck) {
stopProgressIndictator()
return
}
var rule = ".number:nth-of-type("+ newPrime + "n+" + 2*newPrime + ") { background-color: white; }"
getStyleSheet().insertRule(rule, 2)
 
setTimeout(function() {
addNewRule(newPrime, lastNumberToCheck)
}, 100)
}
function createSieve(){
var sieve = document.getElementById("sieve")
var stylesheet = getStyleSheet()
var maxNumber = document.getElementById("maxNumberInput").value
var lastNumberToCheck = Math.ceil(Math.sqrt(maxNumber))
 
// empty sieve
while (sieve.hasChildNodes()) { sieve.removeChild(sieve.firstChild) }
// empty CSS rules
if(typeof stylesheet.deleteRule == "undefined"){
while (stylesheet.rules.length > 2) { stylesheet.removeRule(2) } // Safari
} else {
while (stylesheet.cssRules.length > 2) { stylesheet.deleteRule(2) } // FF
}
// create all number divs & add all of them at once
var frag = document.createDocumentFragment()
for (var i = 1; i <= maxNumber ; i++) {
var div = document.createElement("div")
div.innerHTML = i
div.className = "number"
frag.appendChild(div)
}
sieve.appendChild(frag)
lastNumber = maxNumber
 
// generate CSS rules
startProgressIndicator()
addNewRule(1, lastNumberToCheck)
}
</script>
</head>
<body onload="createSieve()">
<form action="javascript:createSieve()">
<label for="maxNumberInput">Show prime numbers up to: </label>
<input type="text" name="ceil" value="100" id="maxNumberInput">
<input type="submit" value="Compute &rarr;">
</form>
<div id="sieve">
</div>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.