Skip to content

Instantly share code, notes, and snippets.

@Orangenhain
Created June 11, 2011 04:27
Show Gist options
  • Save Orangenhain/1020249 to your computer and use it in GitHub Desktop.
Save Orangenhain/1020249 to your computer and use it in GitHub Desktop.
Sieve of Eratosthenes using CSS3 selectors
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment