点击缩小图像

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

经过更多的研究和挖掘，我找到了一种方法。我最终从头开始重新启动一切，这是我得到的代码：

<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>

感谢大家的帮助！

点击缩小图像

Shrink image on click

html

javascript

image

click