JavaScript的;使用createElement从localStorage加载数据

时间:2014-01-11 00:30:53

标签: javascript html5

我遇到的问题是找到一种方法,当加载数据时,它将按照我点击“Rasie New Pokemon”时设置的方式创建自己的元素。

function newPokemon() {
var newDiv = document.createElement("div");
// Creates a new div
var xpPar = document.createElement("p");
var lvlPar = document.createElement("p");
var nxtLvlPar = document.createElement("p");
var namePar = document.createElement("p");
// Creates a new paragraph element

var newImg = document.createElement("img");
// Creates a new image element

var pokemon = ["Mudkip", "Treecko", "Torchic"];
// Array containing pokemon that can be raised

var randNum = Math.floor(Math.random() * 3);
// Chooses a randome number between 1 and 2

if (numOfPoke < 1) {

    newDiv.id = "content";

    newImg.style.cursor = "pointer";
    newImg.id= "pokemon";

    switch (randNum) {
        case 0:
            newImg.src = "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/258.gif";
        break;
        case 1:
            newImg.src = "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/252.gif";
        break;
        case 2:
            newImg.src = "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/255.gif";
        break;
        default:
            alert("Something went wrong! Alert the creator of the game!");
        break;
    }

    newImg.onclick = function() {
        addXP()
    };

    xpPar.id = "xp";
    xpPar.innerHTML = "XP: " + xp.toFixed();

    lvlPar.id = "lvl";
    lvlPar.innerHTML = "Level: " + lvl;

    nxtLvlPar.id = "nxt_lvl";
    nxtLvlPar.innerHTML = "XP To Next Level: " + xpToNxtLvl.toFixed(2);

    namePar.id = "name";
    namePar.innerHTML = pokemon[randNum];

    document.body.appendChild(newDiv);
    document.getElementById("content").appendChild(newImg);
    document.getElementById("content").appendChild(xpPar);
    document.getElementById("content").appendChild(lvlPar);
    document.getElementById("content").appendChild(namePar);
    document.getElementById("content").appendChild(nxtLvlPar);

    numOfPoke++;
    // Adds one to the pokemon counter
} else {
    alert("Only one Pokemon can be raised at a time!");
}
// Allows only one new pokemon to be raised
}

这是我用来创建元素的函数。我想要的是,当加载数据时,它将以微笑的方式创建数据。

这是我files.[1]的链接。出于某种原因,我无法让它在jsfiddle上工作。

1 个答案:

答案 0 :(得分:0)

而不是将它保存到本地存储中并让人们在清除缓存时如何将其存储在服务器上?并在该服务器上创建一个包含您的宠物小精灵数据的PHP数组?

var currentPokemon;

var Pokemon = {

    0: {
        Name: "Mudkip",
        Exp: 0,
        NextExp: 50,
        Lvl: 1, 
        Img: "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/258.gif"
    },

    1: {
        Name: "Treecko",
        Exp: 0,
        NextExp: 50,
        Lvl: 1, 
        Img: "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/252.gif"
    },

    2: {
        Name: "Torchic",
        Exp: 0,
        NextExp: 50,
        Lvl: 1, 
        Img: "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/255.gif"
    }

};

currentPokemon = Pokemon[Math.floor(Math.random() * 3)];

/*
    Now you can get all data you want from currentPokemon :)
*/