Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!--
- To change this license header, choose License Headers in Project Properties.
- To change this template file, choose Tools | Templates
- and open the template in the editor.
- -->
- <html>
- <head>
- <title>TODO supply a title</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- #container{
- width: 1000px;
- margin: auto;
- }
- .produkt{
- float: left;
- width: 200px;
- height: 350px;
- border: solid 2px;
- margin: 5px;
- }
- /*.img{
- position: relative;
- width: 460px;
- height: 260px;
- border: solid 2px;
- margin: 10px;
- text-align: center;
- }
- .img > img{
- width: 100%;
- height: 100%;
- }
- .title{
- position: relative;
- width: 420px;
- height: 40px;
- border: solid 2px;
- margin: 10px;
- text-align: center;
- font-size: 25px;
- padding: 20px;
- }*/
- img{
- width: 150px;
- margin: 10px;
- }
- #typy{
- float: left;
- }
- </style>
- </head>
- <body onload="f();">
- <div id="container">
- <!--<div class="image">
- <div class="img"></div>
- <div class="title"></div>
- </div>
- <div class="image">
- <div class="img"></div>
- <div class="title"></div>
- </div>
- <div class="image">
- <div class="img"></div>
- <div class="title"></div>
- </div>
- <div class="image">
- <div class="img"></div>
- <div class="title"></div>
- </div>-->
- </div>
- <div id="typy">
- <input type="button" value="DDR1" onclick="wyswietlTyp(this.value);">
- <input type="button" value="DDR2" onclick="wyswietlTyp(this.value);">
- <input type="button" value="DDR3" onclick="wyswietlTyp(this.value);">
- <input type="button" value="DDR4" onclick="wyswietlTyp(this.value);">
- <!--<input type="button" value="Następna strona" onclick="wyswietlNastepne()">
- <input type="button" value="Poprzednia strona" onclick="wyswietlPoprzednie()">-->
- </div>
- <div id="koszyk">
- </div>
- <script>
- /*var katalog = {
- 'obraz01': {'nazwa': "martwa natura", 'plik':'o1.jpg'},
- 'obraz02': {'nazwa': "dama z łasiczką", 'plik':'o2.jpg'},
- 'obraz03': {'nazwa': "prezes z kotem", 'plik':'o3.jpg'},
- 'obraz04': {'nazwa': "bitwa pod grunwaldem", 'plik':'o4.jpg'}
- };*/
- var pamiecRAM = {
- 'ram1': {'typ': 'DDR1', 'pojemnosc': "1GB", 'taktowanie': "2400", "netto": "100", 'producent': 'GoodRam', 'obraz': 'ram1.jpg'},
- 'ram2': {'typ': 'DDR1', 'pojemnosc': "500MB", 'taktowanie': "2400", "netto": "100", 'producent': 'GoodRam', 'obraz': 'ram1.jpg'},
- 'ram3': {'typ': 'DDR3', 'pojemnosc': "2GB", 'taktowanie': "2400", "netto": "100", 'producent': 'GoodRam', 'obraz': 'ram1.jpg'},
- 'ram4': {'typ': 'DDR2', 'pojemnosc': "1GB", 'taktowanie': "2400", "netto": "100", 'producent': 'GoodRam', 'obraz': 'ram1.jpg'},
- 'ram5': {'typ': 'DDR4', 'pojemnosc': "8GB", 'taktowanie': "2400", "netto": "100", 'producent': 'GoodRam', 'obraz': 'ram1.jpg'},
- 'ram6': {'typ': 'DDR1', 'pojemnosc': "1GB", 'taktowanie': "2400", "netto": "100", 'producent': 'GoodRam', 'obraz': 'ram1.jpg'},
- 'ram7': {'typ': 'DDR2', 'pojemnosc': "2GB", 'taktowanie': "2400", "netto": "100", 'producent': 'GoodRam', 'obraz': 'ram1.jpg'},
- 'ram8': {'typ': 'DDR3', 'pojemnosc': "4GB", 'taktowanie': "2400", "netto": "100", 'producent': 'GoodRam', 'obraz': 'ram1.jpg'}
- };
- function wyswietlTyp(typ){
- var liczba = 0;
- var html = "";
- for(i in pamiecRAM){
- if(liczba>3) break;
- if(pamiecRAM[i]['typ']===typ){
- html += "<div class='produkt'>";
- html += "<ul><li>"+pamiecRAM[i]['typ']+"</li>";
- html += "<li>"+pamiecRAM[i]['pojemnosc']+"</li>";
- html += "<li>"+pamiecRAM[i]['taktowanie']+"MHz</li>";
- html += "<li>"+pamiecRAM[i]['netto']+"</li>";
- html += "<li>"+pamiecRAM[i]['producent']+"</li></ul>";
- html += "<img src="+pamiecRAM[i]['obraz']+">";
- html += "<input class='doKoszyka' id=" +i+ " type='button' value='Dodaj do koszyka' onclick='doKoszyka(this.id);'>";
- html += "</div>";
- liczba++;
- } else if(typ==="all"){
- html += "<div class='produkt'>";
- html += "<ul><li>"+pamiecRAM[i]['typ']+"</li>";
- html += "<li>"+pamiecRAM[i]['pojemnosc']+"</li>";
- html += "<li>"+pamiecRAM[i]['taktowanie']+"</li>";
- html += "<li>"+pamiecRAM[i]['netto']+"</li>";
- html += "<li>"+pamiecRAM[i]['producent']+"</li></ul>";
- html += "<img src="+pamiecRAM[i]['obraz']+">";
- html += "<input id="+i+" class='doKoszyka' type='button' value='Dodaj do koszyka'>";
- html += "</div>";
- liczba++;
- }
- }
- document.getElementById("container").innerHTML = html;
- }
- function doKoszyka(id){
- }
- /*
- var indexOstatniegoProduktu = 4;
- var tab = Object.keys(pamiecRAM);
- function wyswietlNastepne(){
- if(tab.length>=indexOstatniegoProduktu){
- var html = "";
- for(i=indexOstatniegoProduktu-2; i<indexOstatniegoProduktu; i++){
- html += "<div class='produkt'>";
- html += "<ul><li>"+pamiecRAM[tab[i]]['typ']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['pojemnosc']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['taktowanie']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['netto']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['producent']+"</li></ul>";
- html += "<img src="+pamiecRAM[tab[i]]['obraz']+">";
- html += "<input class='doKoszyka' type='button' value='Dodaj do koszyka'>";
- html += "</div>";
- }
- indexOstatniegoProduktu+=2;
- document.getElementById("container").innerHTML = html;
- } else {
- alert("Nie ma dalszych stron!");
- }
- }
- function wyswietlPoprzednie(){
- if(indexOstatniegoProduktu>4){
- var html = "";
- for(i=indexOstatniegoProduktu-2; i<indexOstatniegoProduktu; i++){
- html += "<div class='produkt'>";
- html += "<ul><li>"+pamiecRAM[tab[i]]['typ']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['pojemnosc']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['taktowanie']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['netto']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['producent']+"</li></ul>";
- html += "<img src="+pamiecRAM[tab[i]]['obraz']+">";
- html += "<input class='doKoszyka' type='button' value='Dodaj do koszyka'>";
- html += "</div>";
- }
- document.getElementById("container").innerHTML = html;
- } else {
- console.log("Nie ma poprzednich stron!");
- }
- }
- wyswietlTyp("all");
- function pozycjaKoszyka(indexTowaru, ilosc){
- this.indexTowaru = indexTowaru;
- this.ilosc = ilosc;
- }
- function koszyk(){
- this.lista = new Object();
- this.dodajPozycje = pozycjaKoszyka();
- }
- function dodajDoKoszyka(event){
- var element = event.target;
- }
- document.getElementsByClassName('doKoszyka').addEventListener('click', dodajDoKoszyka);
- var pierwszyElement = 0;
- var tab = Object.keys(pamiecRAM);
- function wyswietl(typ){
- var liczbaElementow = 3; //0,1
- var html = new String();
- for(var i=pierwszyElement; i<=liczbaElementow; i++){
- if(pamiecRAM[tab[i]]['typ']===typ){
- html += "<div class='produkt'>";
- html += "<ul><li>"+pamiecRAM[tab[i]]['typ']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['pojemnosc']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['taktowanie']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['netto']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['producent']+"</li></ul>";
- html += "<img src="+pamiecRAM[tab[i]]['obraz']+">";
- html += "<input class='doKoszyka' type='button' value='Dodaj do koszyka'>";
- html += "</div>";
- pierwszyElement++;
- } else if(typ==='all'){
- html += "<div class='produkt'>";
- html += "<ul><li>"+pamiecRAM[tab[i]]['typ']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['pojemnosc']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['taktowanie']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['netto']+"</li>";
- html += "<li>"+pamiecRAM[tab[i]]['producent']+"</li></ul>";
- html += "<img src="+pamiecRAM[tab[i]]['obraz']+">";
- html += "<input class='doKoszyka' type='button' value='Dodaj do koszyka'>";
- html += "</div>";
- pierwszyElement++;
- }
- }
- document.getElementById("container").innerHTML = html;
- }
- //wyswietl('all');*/
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement