使用createElement()和appendChild()的Javascript帮助

时间:2015-06-10 05:26:36

标签: javascript html dom

我在为项目编写JavaScript时遇到问题。 我有HTML代码:

<html>
<head>
<title>Mouse Tail and Spawn</title>
<script src="tail.js"></script>
</head>
<body>
<div id="tail" style="position:absolute; display:none">
Click to spawn an egg.
</div>
</body>
</html>

我想编写JavaScript以使div中的文本跟随鼠标光标,并且还要生成一个&#39; o&#39;点击鼠标的时间和地点。 我想要使​​用DOM方法createElementappendChild来实现这一目标,但我无法想象如何做到这一点,在这个阶段我没有编写JavaScript。有没有人有任何关于这方面的教程的链接或有任何提示可以提供帮助。

3 个答案:

答案 0 :(得分:1)

这实际上是相当直截了当的。我们只需要监听根元素的点击,检查click事件对象的点击坐标,并设置ad-hoc元素的一些基本样式:

&#13;
&#13;
NSTimer* myTimer;
    myTimer= [NSTimer scheduledTimerWithTimeInterval: 2.0 target: self
                                                      selector: @selector(updateUIinMainThread:) userInfo: nil repeats: YES];
&#13;
// Listen for click events on the <body> element
document.documentElement.addEventListener( "click", function ( event ) {
    
    // Create an element to hold out "o", and some styles
    var element = document.createElement( "span" ),
        elStyle = {
            position: "absolute",
            top: event.clientY + "px",
            left: event.clientX + "px",
        };
    
    // Apply our styles to the element
    Object.keys( elStyle ).forEach( function ( property ) {
        element.style[ property ] = elStyle[ property ];
    });
    
    // Set the innerHTML of the element, and insert it into the <body>
    element.innerHTML = "o";
    document.body.appendChild( element );
    
});
&#13;
&#13;
&#13;

答案 1 :(得分:1)

如果你想在光标位置放一个“o”,看看我的小提琴。我不知道你是否愿意这样做......

https://jsfiddle.net/f2op1prs/

        $(window).mousemove(function(e) {
            $node = $('#following');
            $node.css('left', e.pageX);
            $node.css('top', e.pageY);
        });
        $(window).click(function(e) {
            $node = $('<div></div>');
            $node.addClass('tail');
            $node.html('o');
            $node.css('left', e.pageX);
            $node.css('top', e.pageY);
            $('body').append($node);

        }); 

答案 2 :(得分:1)

你走了,我猜这是你想要实现的,对吧? 根据您的需要改变。 $(“#wrap”)。mousemove(function(e){   $( '#尾巴')。CSS({     'top':e.clientY - 20,     'left':e.clientX - 20   }); }); $(document).click(function(e){   var x = e.pageX +'px';   var y = e.pageY +'px';   var img = $('&lt; b&gt; o&lt; / b&gt;');   var div = $('&lt; div&gt;')。css({     “位置”:“绝对”,     “左”:x,     “顶部”:y   });   div.append(IMG);   $(document.body的).append(格); }); #wrap {   宽度:500px;   身高:500px; } #myimg {   位置:绝对;   z-index:1000; } &lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”&gt;&lt; / script&gt; &lt; div id =“wrap”&gt;   &lt; div id =“tail”style =“position:absolute; display:block”&gt;     点击生成一个鸡蛋。   &LT; / DIV&GT; &LT; / DIV&GT; 演示