Created
September 29, 2014 22:24
-
-
Save ketemartinsrufino/8b3a1cec891bfd3248cd to your computer and use it in GitHub Desktop.
Blocos com JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset = "utf-8"/> | |
| <script type="text/javascript" src="divs.js"></script> | |
| <script type="text/javascript" src="jquery/jquery-2.1.1.js"></script> | |
| <link rel="stylesheet" type="text/css" href="estilo_divs.css"/> | |
| </head> | |
| <body> | |
| <button onclick="showDateTime()">Mostre a hora!</button> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div { | |
| margin: 10px; | |
| padding-left: 10px; | |
| width: 100px; | |
| height: 100px; | |
| float: left; | |
| } | |
| div.flor{ | |
| background-color: red; | |
| } | |
| div.folha.one{ | |
| clear: both; | |
| } | |
| div.folha{ | |
| background-color: green; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Adiciona o evento para que quando a pagina for carregada executar a funcao createPage | |
| document.addEventListener('DOMContentLoaded', createPage); | |
| //Funcao que cria os blocos, adiciona os classes pro CSS e apenda no body | |
| function createPage(){ | |
| console.log('creating page'); | |
| var body = document.getElementsByTagName('body')[0]; | |
| var cores = ['purple', 'white', 'gray', 'blue', 'pink', 'black', '#FF7F50']; | |
| for(var i = 1; i <= 6; i++) { | |
| var div1 = document.createElement('div'); | |
| div1.innerHTML = i; | |
| body.appendChild(div1); | |
| var divClasse = 'flor'; | |
| if(i > 3){ | |
| divClasse = 'folha'; | |
| } | |
| if(i === 4){ | |
| divClasse += ' one'; | |
| } | |
| div1.className = divClasse; | |
| div1.onclick = function(indice){ | |
| return function () { | |
| var cor = cores[parseInt((Math.random() * 7))]; | |
| this.innerHTML = indice + '<br> tenho a cor '+ cor; | |
| this.style.backgroundColor= cor; | |
| }; | |
| }(i); | |
| body.appendChild(div1); | |
| } | |
| } | |
| //Funcao mostra a hora em um alert | |
| function showDateTime(){ | |
| alert("Hoje é " + new Date()); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment