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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值