youchan/fizzbuzz.html

## fizzbuzz.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>FizzBuzz</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'>
<style>
body {
  background-color: #000;
  color: #fff;
  width: 100%;
}

#outer {
  width: 100%;
}

#fizzBuzz {
  font-family: 'Peralta', cursive;
  width: 80%;
  margin: 40px auto;
}

#fizzBuzz p {
  text-align: center;
  font-size: 500%;
}

#count {
  width: 80%;
  margin: 0 auto;
}

#count p {
  text-align: right;
}
</style>
<script>
function fizzBuzz(i) {
  var value = "";
  if (i % 3 == 0) {
    value = "Fizz";
  }

  if (i % 5 == 0) {
    value += "Buzz";
  }

  if (value === "") {
    value = i.toString();
  }

  return value;
}

$(function() {
  var i = 0;
  var interval = setInterval(function() {
    i += 1;
    if (i > 100) {
      clearInterval(interval);
      $("#fizzBuzz").html("<p>おしまい</p>");
      return;
    }
    $("#fizzBuzz").html("<p>" + fizzBuzz(i) + "</p>");
    $("#count").html("<p>count: " + i + "</p>");
  }, 1000);
});
</script>
</head>
<body>
<div id="outer">
  <div id="fizzBuzz"></div>
  <div id="count"></div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8"/>
	<title>FizzBuzz</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'>
	<style>
	body {
	background-color: #000;
	color: #fff;
	width: 100%;
	}

	#outer {
	width: 100%;
	}

	#fizzBuzz {
	font-family: 'Peralta', cursive;
	width: 80%;
	margin: 40px auto;
	}

	#fizzBuzz p {
	text-align: center;
	font-size: 500%;
	}

	#count {
	width: 80%;
	margin: 0 auto;
	}

	#count p {
	text-align: right;
	}
	</style>
	<script>
	function fizzBuzz(i) {
	var value = "";
	if (i % 3 == 0) {
	value = "Fizz";
	}

	if (i % 5 == 0) {
	value += "Buzz";
	}

	if (value === "") {
	value = i.toString();
	}

	return value;
	}

	$(function() {
	var i = 0;
	var interval = setInterval(function() {
	i += 1;
	if (i > 100) {
	clearInterval(interval);
	$("#fizzBuzz").html("<p>おしまい</p>");
	return;
	}
	$("#fizzBuzz").html("<p>" + fizzBuzz(i) + "</p>");
	$("#count").html("<p>count: " + i + "</p>");
	}, 1000);
	});
	</script>
	</head>
	<body>
	<div id="outer">
	<div id="fizzBuzz"></div>
	<div id="count"></div>
	</div>
	</body>
	</html>