在图像顶部添加数字

Adding a number on top of an image

本文关键字：数字 添加 顶部 图像      更新时间：2023-09-26

我遇到了一个问题，从CSS文件中添加了一个文本。我尝试了关键词内容，但这似乎没有帮助。

所以我想做的是，当用户点击图像时，我想添加数字（按递增顺序）。例如单击1应显示1（白色框旁边），然后单击2等。

我添加了一个名为counter的变量，并将其初始化为0。因此，当用户单击时，counter将增加1。然而，我认为属性content本身就足够了，因为我认为它可以为文本赋予白色以外的颜色（这是框的颜色）。

jsfiddle如下：

上面的代码是我想要编辑的。然而，我创建了另一个JSfiddle来做一个示例。这是它的代码。

只需将数字放入div:

$(document).ready(function(){ 
    var count = 0;
    $(document).click(function (ev) {        
        $("body").append(            
            $('<div>' + ++count + '</div>').css({
                position: 'absolute',
                top: ev.pageY + 'px',
                left: ev.pageX + 'px',
                width: '40px',
                height: '40px',
                background: '#fff'
            })              
        );               
    });
});

您可以在js文件的开头插入var counter = 0;来初始化变量，而不是在点击函数中插入counter++;来增加每次点击的计数器；在体附加功能改变CCD_ 11中的CCD_。

所以你的代码看起来是这样的：

$(document).ready(function(){ 
var counter = 0;
    $(document).click(function (ev) {   
        counter++;
        $("body").append(            
            $('<div>' + counter + '</div>').css({
                position: 'absolute',
                top: ev.pageY + 'px',
                left: ev.pageX + 'px',
                width: '40px',
                height: '40px',
                background: '#fff'
            })              
        );               
    });
});
相关文章：