嘿伙计们希望能得到一些帮助，我整晚都在搜索和搜索，找不到解释如何实现这三个功能的简单方法：
这是我想要的效果之一 - http://orteil.dashnet.org/cookieclicker/
当您点击Cookie时，它会弹出+1然后消失，如果您应用升级，它会更改显示的数字并递增。
实现此目的的最佳方法是什么？我已经搜索和搜索，只提出一个或两个jquery插件，使用时显示弹出窗口，但没有足够的文档或解释如何实现我想要的效果。还有如何让它出现在我的鼠标所在的位置？如果它只显示在我点击的图像中间，我甚至会很高兴。
还有更好的方法存储我的号码吗？目前，我的计数器是一个名为＆＃34; snowballs＆＃34;并且显示是每秒更新的跨度。有没有更好的方法来存储这个数字并显示它？我很乐意使用像这样的自定义计数器flipclockjs这可能吗？
我已将所有代码放入jsfiddle页面，但我点击的图像是本地文件，因此无法显示。但至少你可以看到我提供链接的代码。
http://jsfiddle.net/edznycyy/1/
非常感谢您的帮助。
以下代码
// Upgrades
var snowballs = 0;
var penguins = 0;
var penguinsps = 0.1;
var igloos = 0;
var igloosps = 0.5;
var eskimos = 0;
var eskimosps = 1.0;
var polarBears = 0;
var polarBearsps = 2.0;
// snowball functions to increase value
function snowClick(number){
snowballs = snowballs + number;
document.getElementById("snowballs").innerHTML = prettify(snowballs);
}
function userClick(number){
snowballs = snowballs + number;
document.getElementById("snowballs").innerHTML = prettify(snowballs);
}
//Buy functions
function buyPenguin(){
var penguinCost = Math.floor(10 * Math.pow(1.15,penguins)); //works out the cost of this cursor
if(snowballs >= penguinCost){ //checks that the player can afford the cursor
penguins = penguins + 1; //increases number of cursors
snowballs = snowballs - penguinCost; //removes the cookies spent
document.getElementById('penguins').innerHTML = penguins; //updates the number of cursors for the user
document.getElementById('snowballs').innerHTML = snowballs; //updates the number of cookies for the user
};
var nextCost = Math.floor(10 * Math.pow(1.15,penguins)); //works out the cost of the next cursor
document.getElementById('penguinCost').innerHTML = nextCost; //updates the cursor cost for the user
};
function buyPolarBear(){
var polarBearCost = Math.floor(200 * Math.pow(1.15,polarBears)); //works out the cost of this cursor
if(snowballs >= polarBearCost){ //checks that the player can afford the cursor
polarBears = polarBears + 1; //increases number of cursors
snowballs = snowballs - polarBearCost; //removes the cookies spent
document.getElementById('polarBears').innerHTML = polarBears; //updates the number of cursors for the user
document.getElementById('snowballs').innerHTML = snowballs; //updates the number of cookies for the user
};
var nextPolarBearCost = Math.floor(200 * Math.pow(1.15,polarBears)); //works out the cost of the next cursor
document.getElementById('polarBearCost').innerHTML = nextPolarBearCost; //updates the cursor cost for the user
};
function buyIgloos(){
var iglooCost = Math.floor(50 * Math.pow(1.15,igloos)); //works out the cost of this cursor
if(snowballs >= iglooCost){ //checks that the player can afford the cursor
igloos = igloos + 1; //increases number of cursors
snowballs = snowballs - iglooCost; //removes the cookies spent
document.getElementById('penguins').innerHTML = penguins; //updates the number of cursors for the user
document.getElementById('snowballs').innerHTML = snowballs; //updates the number of cookies for the user
document.getElementById('igloos').innerHTML = igloos;
};
var nextIglooCost = Math.floor(50 * Math.pow(1.15,igloos)); //works out the cost of the next cursor
document.getElementById('iglooCost').innerHTML = nextIglooCost; //updates the cursor cost for the user
};
function buyEskimo(){
var eskimoCost = Math.floor(100 * Math.pow(1.15,eskimos)); //works out the cost of this cursor
if(snowballs >= eskimoCost){ //checks that the player can afford the cursor
eskimos = eskimos + 1; //increases number of cursors
snowballs = snowballs - eskimoCost; //removes the cookies spent
document.getElementById('eskimos').innerHTML = eskimos; //updates the number of cursors for the user
document.getElementById('snowballs').innerHTML = snowballs; //updates the number of cookies for the user
};
var nextEskimoCost = Math.floor(100 * Math.pow(1.15,eskimos)); //works out the cost of the next cursor
document.getElementById('eskimoCost').innerHTML = nextEskimoCost; //updates the cursor cost for the user
};
//makes a number neater
function prettify(input){
var output = Math.round(input * 1000000)/1000000;
return output;
}
//Save Load and Delete Functions
function save(){
var save = {
snowballs: snowballs,
penguins: penguins,
igloos: igloos,
eskimos:eskimos,
polarBears:polarBears
}
localStorage.setItem("save",JSON.stringify(save));
};
function load(){
var savegame = JSON.parse(localStorage.getItem("save"));
if (typeof savegame.snowballs !== "undefined") snowballs = savegame.snowballs;
if (typeof savegame.penguins !== "undefined") penguins = savegame.penguins;
if (typeof savegame.igloos !== "undefined") igloos = savegame.igloos;
if (typeof savegame.polarBears !== "undefined") polarBears = savegame.polarBears;
if (typeof savegame.eskimos !== "undefined") eskimos = savegame.eskimos;
document.getElementById('penguins').innerHTML = penguins;
document.getElementById('snowballs').innerHTML = snowballs;
document.getElementById('igloos').innerHTML = igloos;
document.getElementById('polarBears').innerHTML = polarBears;
document.getElementById('eskimos').innerHTML = eskimos;
};
function deleteSave(){
localStorage.removeItem("save")
snowballs = 0;
penguins = 0;
igloos = 0;
eskimos = 0;
polarBears = 0;
document.getElementById('penguins').innerHTML = penguins;
document.getElementById('snowballs').innerHTML = snowballs;
document.getElementById('igloos').innerHTML = igloos;
document.getElementById('polarBears').innerHTML = polarBears;
document.getElementById('eskimos').innerHTML = eskimos;
}
function updateSPS(){
var sps = (penguins * penguinsps) + (polarBears * polarBearsps) + (eskimos * eskimosps) + (igloos * igloosps);
document.getElementById('SPS').innerHTML = prettify(sps);
}
function devGive(){
snowballs = snowballs + 100
document.getElementById("snowballs").innerHTML = prettify(snowballs);
}
window.setInterval(function(){
snowClick(penguins * penguinsps);
snowClick(polarBears * polarBearsps);
snowClick(eskimos * eskimosps);
snowClick(igloos * igloosps);
save();
}, 1000);
window.setInterval(function(){
updateSPS();
}, 100);body {margin: 0px; }
body > div {
display: flex;
flex-flow:row wrap;
}
body > div > header,nav,main,prices, left,right,bottom, footer {
background: #7FE3F0; border-radius: 7px; margin: 5px; padding: 20px;
}
body > div > header { order: 1; height: 100px; flex: 0 1 100%;font: bold 30px Tahoma;text-align: center; }
body > div > nav { order: 2; height: 50px; flex: 0 1 100%; font: bold 30px Tahoma; text-align: center;}
body > div > prices { display: flex; flex-flow: column wrap; order:6; width: 200px; flex: 0 1 300px; }
#price {
width: 200px;
margin: 10px;
font: bold 15px Tahoma;
padding: 5px;
}
body > div > main {
order: 4;
text-align: center;
min-height:400px;
flex: 1;
}
body > div > right { display: flex; flex-flow:column wrap; order:5; width: 300px; flex: 0 1 300px; }
body > div > right > box1 > h1 { font: bold 20px Tahoma;}
body > div > right > box1,box2,box3,box4 { display: flex; max-width: 200px; max-height: 200px; border-radius: 7px; margin: 1px; padding: 5px; }
body > div > right > box1,box2,box3,box4 > span { display: flex; margin: 5px;}
body > div > right > box1,box2,box3,box4 > img { display: flex; max-width: 70px; max-height: 70px;}
body > div > left { order:3; width: 200px; flex: 0 1 600px; }
#snowball {
width: 350px;
height: 350px;
}
body > div > bottom {
order: 7;
height: 100px;
flex: 0 1 100%;
text-align: center;
font: bold 10px Tahoma;
}
body > div > bottom > img {
width: 50px;
height: 50px;
text-align: center;
}
body > div > footer {
order: 8;
height: 100px;
flex: 0 1 100%;
text-align: center;
font: bold 20px Tahmo;
}<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" href="style1.css" />
<title> Winter Fun!</title>
</head>
<body>
<div>
<header>Winter Fun!</header>
<nav>
Snowballs: <span id="snowballs">0</span>
<br />
Snowballs Per Second: <span id="SPS" >0</span>
</nav>
<left>
</left>
<prices>
<box1 id = "price">Penguin Cost:<span id="penguinCost">10</span></box1>
<box2 id = "price">Igloo Cost:<span id="iglooCost">50</span></box2>
<box3 id = "price">Eskimo Cost:<span id="eskimoCost">100</span></box3>
<box4 id = "price">Polar Bear Cost:<span id ="polarBearCost">200</span></box4>
</prices>
<main >
<img title = "Click Me!" id="snowball" src="snowball.png" onclick="userClick(1)">
</main>
<right>
<box1>
<img id="penguins1" src="penguin.png" onclick="buyPenguin()">
<span id="penguins">0</span>
</box1>
<box2>
<img id="igloos1" src="igloo.png" onclick="buyIgloos()" >
<span id="igloos">0</span>
</box2>
<box3>
<img id="eskimos1" src="eskimo.png" onclick="buyEskimo()" >
<span id="eskimos">0</span>
</box3>
<box4>
<img id="polarBears1" src="polarBear2.png" onclick="buyPolarBear()" >
<span id="polarBears">0</span>
</box4>
</right>
<bottom>
<h1> Options!</h1>
<img id = "save1" src="save.png" onclick="save()">
<img id = "load1" src="load.png" onclick="load()">
<img id = "delete1" src="delete.png" onclick="deleteSave()">
</bottom>
<footer>
copyright MPWebDesign 2014
</footer>
</body>
<body onload = "load()">
<script type="text/javascript" src="main.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" src="snow.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
</html>
答案 0 :(得分：0)
您可以使用jquery添加“popup”，使用css将其放在鼠标下，并使用jquery轻松地为元素设置动画。请参阅以下注释代码。
至于存储数据，localStorage可能是最快/最简单的方法。
这是一个有效的jsFiddle
请注意，localStorage只是本地的。与存储在您正在使用的物理机上一样。因此，如果您要在笔记本电脑上访问此页面并执行某些操作，请从桌面访问该页面，您将看不到使用笔记本电脑所做的更改。
如果用户需要访问来自不同设备的值，您将需要一个后端（服务器端）解决方案，例如使用php连接到mySql数据库以便通过一点ajax存储和检索信息以保持所有异步。
如果您有此需求并且不想学习php，mySql和ajax，我建议Parse这基本上是一个超级易用的后端存储您只需使用javascript即可与之交互的API。我在几个项目中使用解析，没有它就会丢失。
编辑：关于代码在实际页面中的位置
This page在head标签中加载jQuery本身，然后加载html，然后加载我为你编写的jQuery函数。 这可以，因为在调用函数时，jQuery已经被加载，我们想要影响的元素已经存在于页面上。
This page在head标签中加载jQuery本身，然后加载我为你编写的jQuery函数，然后加载我们想要影响的html元素。 这不起作用因为在调用函数时，我们想要影响的元素在页面上不存在。
This page在head标签中加载jQuery本身，然后列出我为你编写的jQuery函数，然后加载我们想要影响的html元素。 这可行因为函数被$(function(){ PUT CODE HERE });包裹，它告诉页面“嘿页面，我知道我把这个代码放在顶部但是，我希望你在其中运行代码只有在页面完全加载后“。
$( "#myClickDiv").click( function(event) {
// get current time in milliseconds since 1970/01/01 to use as a unique id for the popups
var id= new Date().getTime();
// use Ternary opperator to ask "does a value exist for `ownedPenguins` in local storage"
// if yes get that value, if no set val to 0
var val= localStorage.getItem("ownedPenguins") ? localStorage.getItem("ownedPenguins") : 0;
// create a div and add it to the main div
$( "#main").append('<div class="countDiv" id="'+id+'">'+val+'</div>');
// get the added div and set its position to that of the cursor
$("#"+id).css( {position:"absolute", top:event.pageY, left: event.pageX});
// annimate the added div
$("#"+id).animate({ "top": "-=100px","opacity": "0" }, "slow",function(){
$(this).remove();
}
);
// in the above
// "top": "-=100px" tells it to animate the div 100px up
// "opacity": "0" tells it to animate the div's opacity to 0
// "slow" is a shorthand speed setting
// function() {$(this).remove();} is a callback that will remove the element upon ompletion of the animation
});
// use `localStorage` to track how many of each thing a user has
$( "#myBtn").click( function(event) {
// use Ternary opperator to ask "does a value exist for `ownedPenguins` in local storage"
// if yes get that value, if no set val to 0
//get, increment, and set the value of `ownedPenguins` in `localStorage`
var val= localStorage.getItem("ownedPenguins") ? localStorage.getItem("ownedPenguins") : 0;
val++;
localStorage.setItem("ownedPenguins", val);
})