- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何插入两个点,例如 x:0 y:0 和 x:14 y:9 并更改直线上这些点之间的所有单元格的背景?并保持它相对于表格的宽度和高度?
填充表格的示例:所以我想以直线连接从 x:0y:0 到 x:14 y:9 的红色 block 。 http://jsfiddle.net/qy09q4jv/8/
var table = $('<table>');
$('body').append(table);
var mx = 15;
var my = 10;
for(y = 0; y < my; y++){
var tr = $('<tr>');
for(x = 0; x < mx; x++){
var td = $('<td>');
td.attr('id', 'cell-'+x+'-'+y);
td.html("X:"+x + "Y:"+y);
tr.append(td);
}
$(table).append(tr);
}
这是我现在得到的:
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<style>
table td{
border: 1px solid black;
background-color: #C8C8C8;
}
</style>
<body>
<ul>
</ul>
<script>
var table = $('<table>');
$('body').append(table);
var mx = 20;
var my = 20
for(y = 0; y < my; y++){
var tr = $('<tr>');
for(x = 0; x < mx; x++){
var td = $('<td>');
td.attr('id', 'cell-'+x+'-'+y);
td.html("X:"+x + "Y:"+y);
tr.append(td);
}
$(table).append(tr);
}
var startX = 0;
var startY = 0;
var endX = 14;
var endY = 9;
$("#cell-"+startX+"-"+startY).css('background-color', 'red');
$("#cell-"+endX+"-"+endY).css('background-color', 'red');
var distance = distance({x: startX, y: startY}, {x: endX, y: endY});
line(startX, startY, endX, endY);
function line(x0, y0, x1, y1) { //http://rosettacode.org/wiki/Bitmap/Bresenham%27s_line_algorithm#JavaScript
var dx = Math.abs(x1 - x0), sx = x0 < x1 ? 1 : -1;
var dy = Math.abs(y1 - y0), sy = y0 < y1 ? 1 : -1;
var err = (dx>dy ? dx : -dy)/2;
while (true) {
$("#cell-"+x0+"-"+x0).css('background-color', 'red');
if (x0 === x1 && y0 === y1) break;
var e2 = err;
if (e2 > -dx) { err -= dy; x0 += sx; }
if (e2 < dy) { err += dx; y0 += sy; }
}
}
</script>
</body>
</html>
我又陷入困境了:(
最佳答案
您必须使用Bresenham's line alogrithm
尝试使用此代码或此 jsfiddle
var a = [0,0];
var b = [14,9];
// coordinates between two points
var coordinates = [];
var deltax = b[0] - a[0];
var deltay = b[1] - a[1];
var y = a[1];
var error = 0;
var deltaError = Math.abs(deltay/deltax);
// x axis
for(var x = a[0]; x <= b[0]; x++){
coordinates.push([x,y]);
error = error + deltaError;
if(error >= 0.5){
y = y + 1
error = error - 1;
}
}
var containsCoordinate = (function (coordArray) {
return function (x,y) {
for (var i = 0; i < coordArray.length; i++) {
if (coordArray[i][0] == x && coordArray[i][1] == y) {
return true;
}
}
return false;
}
})(coordinates);
var table = $('<table>');
$('body').append(table);
var mx = 15;
var my = 10;
for(y = 0; y < my; y++){
var tr = $('<tr>');
for(x = 0; x < mx; x++){
var td = $('<td>');
td.attr('id', 'cell-'+x+'-'+y);
td.html("X:"+x + "Y:"+y);
if(containsCoordinate(x,y)){
td.css("background-color","yellow");
}
tr.append(td);
}
$(table).append(tr);
}
希望这有帮助,
关于javascript - 在两个位置之间绘制单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25641079/
我已经尝试在我的 CSS 中添加一个元素来删除每三个 div 的 margin-right。不过,似乎只是出于某种原因影响了第 3 次和第 7 次。需要它在第 3、6、9 等日工作... CSS .s
如何使 div/input 闪烁或“脉冲”?例如,假设表单字段输入了无效值? 最佳答案 使用 CSS3 类似 on this page ,您可以将脉冲效果添加到名为 error 的类中: @-webk
我目前正在尝试构建一个简单的 wireframe来自 lattice 的情节包,但由沿 y 轴的数百个点组成。这导致绘图被线框网格淹没,您看到的只是一个黑色块。我知道我可以用 col=FALSE 完全
在知道 parent>div CSS 选择器在 IE 中无法识别后,我重新编码我的 CSS 样式,例如: div#bodyMain div#paneLeft>div{/*styles here*/}
我有两个 div,一个在另一个里面。当我将鼠标悬停 到最外面的那个时,我想改变它的颜色,没问题。但是,当我将鼠标悬停 到内部时,我只想更改它的颜色。这可能吗?换句话说,当 将鼠标悬停到内部 div 上
我需要展示这样的东西 有人可以帮忙吗?我可以实现以下输出 我正在使用以下代码:: GridView.builder( scrollDirection: Axis.vertical,
当 Bottom Sheet 像 Android 键盘一样打开时,是否有任何方法可以手动上推布局( ScrollView 或回收器 View 或整个 Activity )?或者你可以说我想以 Bott
我有以下代码,用于使用纯 HTML 和 CSS 显示翻转。当您将鼠标悬停在文本上时,它会更改左右图像。 在我测试的所有浏览器中都运行良好,Safari 4 除外。据我收集的信息,Safari 4 支持
我构建了某种 CMS,但在使用 TinyMCE 和 Bootstrap 时遇到了一些问题。 我有一个页面,其中概述了一个 div,如果用户单击该 div,他们可以从模态中选择图像。该图像被插入到一个
出于某种原因,当我设置一个过渡时,当我的鼠标悬停在一个元素上时,背景会改变颜色,它只适用于一个元素,但它们都共享同一个类?任何帮助我的 CSS .outer_ad { position:rel
好吧,这真的很愚蠢。我不知道 Android Studio 中的调试监视框架发生了什么。我有 1.5.1 的工作室。 是否有一些来自 intellij 的 secret 知识来展示它。 最佳答案 与以
我有这个标记: some code > 我正在尝试获取此布局: 注意:上一个和下一个按钮靠近#player 我正在尝试这样: .nextBtn{
网站:http://avuedesigns.com/index 首页有 6 个菜单项。我希望每件元素在您经过时都有自己的颜色。 这是当您将鼠标悬停在 div 上时将所有内容更改为白色的行 li#hom
我需要在 index.php 文件中显示它,但没有任何效果。我所有的文章都没有正确定位。我将其用作代码: 最佳答案 您可以首先检查您
我是一名优秀的程序员,十分优秀!