Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // html - код
- <body>
- <div class="items">
- <div class="item">1</div>
- <div class="item">2</div>
- <div class="item">3</div>
- <div class="item">4</div>
- <div class="item">5</div>
- <div class="item">6</div>
- <div class="item">7</div>
- <div class="item">8</div>
- </div>
- </body>
- // CSS - код
- .items{
- display: flex;
- flex-wrap: wrap;
- }
- .items .item{
- background-color: #ddd;
- width: 100px;
- height: 100px;
- margin: 10px;
- padding: 10px;
- border: 4px solid transparent;
- transition: border-color 0.5s;
- }
- .items .item-active{
- border: 4px solid #0cf;
- }
- // Javascript - код
- makeCounter = function(){
- var count = 1;
- return function(){
- return (count++) % 10 ;
- };
- };
- var elemList = document.querySelectorAll('.items .item');
- for(var i = 0; i < elemList.length; i++){
- elemList[i].onclick = setClass;
- elemList[i].Counter = makeCounter();
- elemList[i].num = elemList[i].innerHTML;
- }
- function setClass(){
- this.classList.toggle("item-active");
- this.innerHTML = this.num + ' Число нажатий на этот div: ' + this.Counter();
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement