Javascript 使用 jQuery 画线
请在此处查看我的代码 http://jsbin.com/ijoxa3/edit
var drawHorizondalLine = function(x1,y1,x2,y2, color) {
var width = Math.abs(x1 - x2);
var posX = (x1 > x2) ? x1 : x2;
var id ='c_'+new Date().getTime()
var line = "<div id='"+id+"'class='line'> </div>";
$('body').append(line);
$('#'+id).css({
left: posX,
top: y1,
width: width,
position:'absolute',
backgroundColor: color
});
};
$(document).ready(function() {
drawHorizondalLine(0, 10, 200, 10, '#a00');
drawHorizondalLine(0, 50, 100, 50, '#0a0');
});
<style>
.line{
padding;1px;
}
</style>
<body>
<p id="hello">Hello World</p>
</body>
</html>
函数调用 drawHorizondalLine(0, 10, 200, 10, '#a00'); 假设从页面左上角绘制一条线，长度为 100px，但该线似乎从最后一个 div 开始身体的。
错误在哪里？
Please see my code here http://jsbin.com/ijoxa3/edit
var drawHorizondalLine = function(x1,y1,x2,y2, color) {
var width = Math.abs(x1 - x2);
var posX = (x1 > x2) ? x1 : x2;
var id ='c_'+new Date().getTime()
var line = "<div id='"+id+"'class='line'> </div>";
$('body').append(line);
$('#'+id).css({
left: posX,
top: y1,
width: width,
position:'absolute',
backgroundColor: color
});
};
$(document).ready(function() {
drawHorizondalLine(0, 10, 200, 10, '#a00');
drawHorizondalLine(0, 50, 100, 50, '#0a0');
});
<style>
.line{
padding;1px;
}
</style>
<body>
<p id="hello">Hello World</p>
</body>
</html>
The function call drawHorizondalLine(0, 10, 200, 10, '#a00'); is suppose to draw a line form the top left corner of the page, 100px in length, but the the line appear to start from the last div of the body.
Where is the mistake?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
应该可以
工作演示在这里
should be
Working demo is here