range使用:
引用js和css:
<script type="text/javascript" src="${resources}/js/lib/range/jquery.range.js"></script>
<script type="text/javascript" src="${resources}/js/lib/range/prism.js"></script>
<link href="${resources}/css/bootstrap/jquery.range.css" rel="stylesheet" type="text/css" />
頁面需求是根據chosen改變選擇不同,更改滑塊的位置、範圍還有滑塊的最大值和最小值
html:
<div class="form-group" style="margin-top: 20px;">
<label class="control-label col-sm-4" for="sort"><span style="color: red;">*</span> 選擇直播:</label>
<div class="col-sm-6">
<select data-placeholder="請選擇直播" class="select" tabindex="1" style="width:50%;height:40px;line-height:40px;" name="videoTitle" id="videoTitle" onchange="changeVideo()">
<#if liveVideoRecordList?? && liveVideoRecordList?size gt 0>
<#list liveVideoRecordList as r>
<#if (r.recordType)??&&r.recordType=="${getConstant('dictionary.LIVE_RECORD_TYPE_LIVE')}">
<option value="${r.id!''}">${r.videoTitle!''}直播</option>
<#else>
<option value="${r.id!''}">${r.videoTitle!''}回放</option>
</#if>
</#list>
</#if>
</select>
</div>
</div>
js:
//range下拉框選擇其他視頻
function changeVideo(id){
var id = $("#videoTitle").val();
var liveVideo = "";
$.ajax({
url : '/room/record/findLiveVideoById.ajax?id='+id,
type : 'POST',
async : true,
cache : false,
dataType : 'json',
data:{},
processData : false,
contentType : false,
success : function(data) {
if (data) {
liveVideo = data;
console.log(liveVideo);
//改變滑塊位置和滑塊最大值
var max=Math.ceil((data.recordDuration)/60).toFixed(2);
$('.range-slider').jRange('updateRange', '0.00,'+max+'', '0.00,'+max+'');
//改變視頻內容
var newUrl =data.recordUrl;
console.log(newUrl);
player.loadByUrl(newUrl);
startTime=data.startTime;
}
}
});
return liveVideo;
}
我更改了range.js:
第363行附近:
updateRange: function(range, value) {
var values = range.toString().split(',');
this.interval = parseInt(values[1]) - parseInt(values[0]);
this.renderScaleNew(range);
if(value){
this.setValue(value);
}else{
this.setValue(this.getValue());
}
},
renderScaleNew: function(range) {
var range = range.toString().split(',');
this.options.from=range[0];
this.options.to=range[1];
var s = [range[0], range[1]];
var prc = Math.round((100 / (s.length - 1)) * 10) / 10;
var str = '';
for (var i = 0; i < s.length; i++) {
str += '<span style="left: ' + i * prc + '%">' + (s[i] != '|' ? '<ins>' + s[i] + '</ins>' : '') + '</span>';
}
this.scale.html(str);
$('ins', this.scale).each(function() {
$(this).css({
marginLeft: -$(this).outerWidth() / 2
});
});
這個頁面還用到了毫秒和yyyy-MM-dd HH:mm:ss格式的相互轉化:
//毫秒數轉換爲具體日期
function getMyDate(str) {
var oDate = new Date(str),
oYear = oDate.getFullYear(),
oMonth = oDate.getMonth()+1,
oDay = oDate.getDate(),
oHour = oDate.getHours(),
oMin = oDate.getMinutes(),
oSen = oDate.getSeconds(),
oTime = oYear +'-'+ addZero(oMonth) +'-'+ addZero(oDay) +' '+ addZero(oHour) +':'+
addZero(oMin) +':'+addZero(oSen);
return oTime;
}
//補零操作
function addZero(num){
if(parseInt(num) < 10){
num = '0'+num;
}
return num;
}
var player;
//視頻開始時間
var startTime;
//視頻結束時間
var end;
//視頻剪輯的開始時間
var changeStart;
//視頻剪輯的結束時間
var changeEnd;
使用:
if(!startTime){
startTime=$("#startTime").val();
//獲取時間對應的毫秒數
startTime = new Date(startTime).getTime();
}
時間毫秒數相加,需要加Number(),要不就是字符串拼接
millisecondStart=startTime+Number(changeStart);
//毫秒數轉換成日期
start=getMyDate(parseInt(millisecondStart));
millisecondEnd=startTime+Number(changeEnd);
end=getMyDate(parseInt(millisecondEnd));