Question

我正在尝试制作一个表示两个日期差异的比例。我能够计算出日期的差异（当前日期和预期日期）。但我需要在比例尺上添加图像以便在此比例上添加此图像

http://icons.iconarchive.com/icons/icons-land/vista-map-markers/256/Map-Marker-Bubble-Azure-icon.png

有没有其他方法可以显示比例上两个日期的差异？任何图表？

var expectedDate="06/10/2015";

var todayDay="06/03/2015"

function setImageOfDifferenceOFDate(todayDay,expectedDate){
  var date1 = new Date(todayDay);
var date2 = new Date(expectedDate);
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
alert(diffDays);  

}

$(document).ready(function(){

setImageOfDifferenceOFDate(todayDay,expectedDate)    
})

Answer 1

请尝试以下操作：

首先，您的ID必须以字母开头，将每个ID更改为某些内容，例如d1，d2 ..

其次，bg图像的CSS属性为background-image，如果要使用base64图像，则需要将其放在url( )属性中。图片需要/高度，并且应定位absolute，以便您可以使用position: left/right。

我取了一半width（在我的例子中为50px / 2 = 25px）并用一个span元素的一半来减少它。因此，您使用%值，我只是使用Chrome开发者控制台来查看它具有的实际宽度，例如10.7px / 2 = 5.3px

现在说：25px - 5.3px = 19.7px。如果我们否定这一点，那么中间的图像应该指向计算出的diffDay（今天是星期五，即2015年7月3日，脚本警告7所以花了id="d7"）。

在Javascript部分中，它只是创建一个span元素，添加您的类名并附加到当前的id="d7"元素。

JSFiddle：http://jsfiddle.net/o88h3d4h/6/

Answer 2

您可以使用以下任何一种方法，而不是重新发明轮子。

jQueryUI Slider
jQRangeSlider

Here是另一个解释 jQueryUI Slider

Answer 3

在setImageOfDifferenceOFDate功能

中试用此代码

var myImage = new Image(50, 50);
myImage.src = '//icons.iconarchive.com/icons/icons-land/vista-map-markers/256/Map-Marker-Bubble-Azure-icon.png';
$("#"+diffDays).html(myImage);

请参阅此JSFiddle链接： https://jsfiddle.net/o88h3d4h/9/

如何在选定的点上设置图像？

3 个答案: