Skip to content

Instantly share code, notes, and snippets.

@Bijesse

Bijesse/index.html

Created December 16, 2014 21:03
Show Gist options
  • Save Bijesse/d27771c1b235bc68776b to your computer and use it in GitHub Desktop.
Save Bijesse/d27771c1b235bc68776b to your computer and use it in GitHub Desktop.
Download ZIP
Color Changing Button // source http://jsbin.com/fufagu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Color Changing Button</title>
<style id="jsbin-css">
body {
background-color: black;
height: 100%;
width: 100%;
}
div {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
}
div button {
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<button type="button" class="btn btn-lg btn-success" onClick="change()">Change</button>
</div>
<script id="jsbin-javascript">
var colors = ["cyan", "aliceblue", "darkmagenta", "gold", "azure", "green", "moccasin"];
var index = 0;
function change(){
if(index == colors.length) {
index = 0;
}
document.body.style.backgroundColor = colors[index];
console.log(colors[index]);
index++;
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"><\/script>
<meta charset="utf-8">
<title>Color Changing Button</title>
</head>
<body>
<div>
<button type="button" class="btn btn-lg btn-success" onClick="change()">Change</button>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body {
background-color: black;
height: 100%;
width: 100%;
}
div {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
}
div button {
margin: 0 auto;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var colors = ["cyan", "aliceblue", "darkmagenta", "gold", "azure", "green", "moccasin"];
var index = 0;
function change(){
if(index == colors.length) {
index = 0;
}
document.body.style.backgroundColor = colors[index];
console.log(colors[index]);
index++;
}</script></body>
</html>
Raw
jsbin.fufagu.css
body {
background-color: black;
height: 100%;
width: 100%;
}
div {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
}
div button {
margin: 0 auto;
}
Raw
jsbin.fufagu.js
var colors = ["cyan", "aliceblue", "darkmagenta", "gold", "azure", "green", "moccasin"];
var index = 0;
function change(){
if(index == colors.length) {
index = 0;
}
document.body.style.backgroundColor = colors[index];
console.log(colors[index]);
index++;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment