使用javascript点击次数后更改图片

时间:2013-06-24 15:45:47

标签: javascript onclick counter countdown

我有一个计数器设置为100,我希望通过点击default.jpg图像,倒计时开始计算鼠标点击maded。 现在它只能通过单击图像上的href来工作。 我还希望当计数器达到50/25时,单击图像更改另一个。 为了更好地理解我需要做一个简单的鸡蛋“tamago”游戏,我没有js技能。

这就是我所做的:

<html>
<head>
<script type="text/javascript">
var clicks = 100;
function linkClick(){
    document.getElementById('clicked').value = --clicks;
}

document.write('<a href="#" onclick="linkClick()">Click Me!</a>');
</script>


<script type ="text/javascript">
function changeimage()
{
if (clicks==100)
{
document.getElementById('myimage').src="defaul.jpg";
}
if (clicks==50)
{
document.getElementById('myimage').src="crack1.jpg";
}
if (clicks==25)
{
document.getElementById('myimage').src="crack2.jpg";
}

</script>
<img src="1.jpg" id="myimage" alt="" onmousedown="changeimage()">
clicks:<input id="clicked" size="3" onfocus="this.blur();" value="10" > times.
</body>
</html>

谢谢

1 个答案:

答案 0 :(得分:2)

这将是一个很好的方式。它很容易阅读,希望有意义。

var count = 100;
var image = document.getElementById('myimage');
var images = ['default.jpg', 'crack1.jpg', 'crack2.jpg'];
image.src = images[0];

image.onclick = function(e)
{
    if(count > 50)
        image.src = images[0];
    else if (count > 25)
        image.src = images[1];
    else if (count > 0)
        image.src = images[2];
    else
    {
        //do something here to indicate the end
    }

    count--;
};