jquery.range.js使用,更改滑塊選擇範圍,更改滑塊範圍值、毫秒和yyyy-MM-dd HH:mm:ss格式的相互轉化

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));

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章