我在为项目编写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方法createElement
和appendChild
来实现这一目标,但我无法想象如何做到这一点,在这个阶段我没有编写JavaScript。有没有人有任何关于这方面的教程的链接或有任何提示可以提供帮助。
答案 0 :(得分:1)
这实际上是相当直截了当的。我们只需要监听根元素的点击,检查click事件对象的点击坐标,并设置ad-hoc元素的一些基本样式:
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;
答案 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)