Javascript 单击时收缩图像_Javascript_Html_Image_Click

Javascript 单击时收缩图像

javascript html image

Javascript 单击时收缩图像,javascript,html,image,click,Javascript,Html,Image,Click,我想使用JavaScript在每次单击图像时将其缩小10%，并显示一个计数器，指示单击了多少次我已经连线了点击事件，但不确定从那里去哪里我的代码： <html> <head> <script type="text/javascript"> window.click = function() { document.getElementById('knox').addEventListener('click', function (e) { v

我想使用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>


window.click=函数（）{
document.getElementById（'knox'）。addEventListener（'click'，函数（e）{
var img=document.createElement（'img'）；
img.setAttribute（'src'，'http://www.animalpicturesociety.com/modules/uploads/bo/boston-terrier1.jpg');
e、 目标儿童（img）；
});
};

此操作使用事件调用一个函数，该函数将图像缩小10%，并显示图像缩小的次数和幅度

var计数=0；
函数收缩（img）{
计数++；
变量高度=img.height*.1，
结果=document.getElementById（“结果”）；
img.height-=高度；
result.innerHTML=“img收缩了“+height+”px——点击“+count+”次”；
}

在做了大量的研究和挖掘之后，我找到了一种方法。我最终从头开始重新启动了一切，这是我的代码：

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


图像游戏
var-clickCount=0；


咔哒声

谢谢大家的帮助

每次点击要小多少？你认为结局如何？这个事件应该会派上用场。你尝试了什么？如果您在尝试实现此功能时遇到问题，请在此处随意提问。但是，我们不会为您构建整个内容。图像的宽度和高度属性也可以通过百分比定义，因此可以使用jQuery进行修改。