Question

我想使用JavaScript在每次点击时将图片缩小10％，并显示一个计算单击次数的计数器。

我已经点击了点击事件，但我不确定从那里去哪里。

我的代码：

<html>
<head>
<script type="text/javascript">

window.click = function() {

  document.getElementById('knox').addEventListener('click', function (e) {
    var img = document.createElement('img');
    img.setAttribute('src', 'http://www.animalpicturesociety.com/modules/uploads/bo/boston-terrier1.jpg');
    e.target.appendChild(img);
  });

};

</script>
</head>
<body>
<img id="knox" src="http://www.animalpicturesociety.com/modules/uploads/bo/boston-terrier1.jpg" alt="Boston Terrier" />
</body>
</html>

Answer 1

这使用onClick事件来调用一个函数，该函数将图像缩小10％并显示图像缩小的次数和显示的次数。

var count = 0;

function shrink(img) {
    count++;
    var height = img.height * .1,
        result = document.getElementById("result");

    img.height -= height;
    result.innerHTML = "img shrank by " + height + "px -- clicked " + count + " times";
}

<div id="result"></div>
<img src="http://lorempixel.com/400/400/technics"/ onClick="shrink(this)">

Answer 2

I figured out a way to do it after doing a lot more research and digging. I ended up restarting everything from scratch, this is the code I had as a result:

<doctype html>
<html>
    <head>
        <title> Image Game </title>
        <script type="text/javascript">
            var clickCount = 0;
        </script>

    </head>

    <body>
        <img id="knox" src="https://40.media.tumblr.com/218651d289309c8074b4a9aa3de8395c/tumblr_mvphoxIUXq1sd3xkpo1_250.png"  
            OnClick="clickCount = clickCount + 1; this.width -= 10; this.height -= 10;" onmousedown=""/>
<br>    
            <button 
                OnClick= "document.getElementById('countDisplay').innerHTML = clickCount;
                document.getElementById('knox').width += counter * 10;
                document.getElementById('knox').height += counter * 10;
                clickCount = 0;"> Clicks </button>

            <h1 id="countDisplay"></h1>

    </body>
</html>

Thanks everyone for the help!

单击时缩小图像

2 个答案: