我的网页有一个clickcounter onclick效果,当我单击它时,会显示一条文字
您单击了按钮-??? -次(???是点击次数)
onclick效果很好,但是我想知道是否可以更改结果的显示。您会看到,我希望它不是显示“您已单击按钮”,而是显示图片的缩影,就像
miniature_image-???
如果那完全可以理解的话。
这是我当前按钮的脚本
Java脚本
function clickCounter(){
var audio = document.getElementById("audio");
audio.play();
if(typeof(Storage)!=="undefined"){
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="<center><b>You have clicked the poop
</b>"+ localStorage.clickcount + "<b> times!</b></center>";
}
else{
document.getElementById("result").innerHTML="I'm sorry to inform you that your browser
does not support this web storage... I guess you could say that your browser is...
shit! awwww yeaahh!";
}
cursor: pointer;
}
的HTML
<center>
<font face="chiller" color="#603913" "font size="300" <align="center"><b>Click the
poop!</b>
</center>
<center>
<p><picture onclick="clickCounter()"><picture
onmouseover="document.getElementById('touch').play()"><img src="poop.png"></button></p>
</center>
<audio id="audio" src="fart-01.wav"></audio>
<audio id="touch" src="sticky goo.wav"></audio>
<div id="result"></div>
我已经尝试过将“您已单击按钮”部分替换为图像源。像这样
document.getElementById("result").innerHTML="<center><img src="poopamount">"+ localStorage.clickcount + "</center>";
但这只会导致按钮的onclick效果消失。我也尝试过使用document.GetElementById(“ image”),但这也不起作用(不确定我是否正确设置了它)
如何在点击量前添加图片?我需要将它作为结果的一部分,因为正如您从脚本中看到的那样,它是居中的,并且仅放置图片是行不通的,因为Didgits的数量会发生变化。
如果您认为有帮助,可以在我的stackoverflow配置文件上的链接上查看我的网页。
预先感谢所有人!
这是我认为可以解决您问题的小提琴的链接:http : //jsfiddle.net/62bwav2L/
在您的代码中,我看到两个具有相同ID的div,这是不允许的-ID必须是唯一的
<div id="result"></div>
...
<div id="result"></div>
所以-改变了:
<div id="resultPoopClick"></div>
...
<div id="result"></div>
然后您可以继续使用img标签和所有标签设置您的innerHTML(这不是这样做的一种特别优雅的方法-但它可以工作)
document.getElementById("resultPoopClick").innerHTML = "<center>" + localStorage.clickcount + " <img src='http://inftek1.dyndns.org/daniel/Poop/poop.png' width='5%'/></center>";
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句