html js 定制进度条 （二）
来源：互联网 发布：考试宝典怎么样知乎 编辑：程序博客网 时间：2024/06/09 15:48
版本一遗留的问题：
1 鼠标消息捕获问题（图层覆盖），解决方法设置图层，图像层置于底层，鼠标消息层置于上层且设置为透明，完美解决。
function createMouseEventDiv() {do{var parentCanvas = document.getElementById(parentCanvasId);if(parentCanvas==null || parentCanvas==undefined){alert("getElementById " + parentCanvasId + "错误！" );ini_step++;break;}var parentWidth = parentCanvas.offsetWidth;if(parentWidth==null || parentWidth==undefined){alert("获取画布宽失败");ini_step++;break;}var parentHeight = parentCanvas.offsetHeight;if(parentHeight==null || parentHeight==undefined){alert("获取画布高失败");ini_step++;break;}var filterStr ='';if(browserMatch.browser=='IE' && browserMatch.version <=9.0){filterStr = 'filter:alpha(opacity=0);'; //IE9.0以下 版本的区别 支持滤镜}else{filterStr = 'opacity: 0;'; //IE10.0以上 版本的区别}var htm = '<div id="' + mouseCanvasId + '" style="position:absolute;' +'width:' + parentWidth + 'px;' +'height:' + parentHeight + 'px;' +'background-color:#363636;' +filterStr +'"><\/div>';//alert(htm);parentCanvas.insertAdjacentHTML("beforeEnd", htm);}while(0); } function createCanvasDiv () {do{var parentCanvas = document.getElementById(parentCanvasId);if(parentCanvas==null || parentCanvas==undefined){alert("getElementById " + parentCanvasId + "错误！" );ini_step++;break;}var parentWidth = parentCanvas.offsetWidth;if(parentWidth==null || parentWidth==undefined){alert("获取画布宽失败");ini_step++;break;}var parentHeight = parentCanvas.offsetHeight;if(parentHeight==null || parentHeight==undefined){alert("获取画布高失败");ini_step++;break;}var htm = '<div id="' + pCanvasId + '" style="position:absolute;' +'width:' + parentWidth + 'px;' +'height:' + parentHeight + 'px;' +'background-color:#363636;"' +'><\/div>';//alert(htm);parentCanvas.insertAdjacentHTML("beforeEnd", htm);}while(0); }2 IE 兼容问题，新版本支持IE7.0~IE11.0
涉及 问题1：浏览器版本的获取
function getBrowserInfo(){var ua = navigator.userAgent.toLowerCase() ;rMsie = /(msie\s|trident.*rv:)([\w.]+)/, rFirefox = /(firefox)\/([\w.]+)/, rOpera = /(opera).+version\/([\w.]+)/, rChrome = /(chrome)\/([\w.]+)/, rSafari = /version\/([\w.]+).*(safari)/; var browser; var version; var match = rMsie.exec(ua); if(match != null){ browser = "IE"; version = match[2] || "0";return { browser : "IE", version : match[2] || "0" }; } var match = rFirefox.exec(ua); if (match != null) { return { browser : match[1] || "", version : match[2] || "0" }; } var match = rOpera.exec(ua); if (match != null) { return { browser : match[1] || "", version : match[2] || "0" }; } var match = rChrome.exec(ua); if (match != null) { return { browser : match[1] || "", version : match[2] || "0" }; } var match = rSafari.exec(ua); if (match != null) { return { browser : match[2] || "", version : match[1] || "0" }; } if (match != null) { return { browser : "", version : "0" }; } } 问题2：wz_jsgraphics 对IE9.0以上的支持，修改代码<span style="white-space:pre"></span><pre name="code" class="javascript"><span style="white-space:pre"></span>function chkDHTM(x, i)<span style="white-space:pre"></span>{<span style="white-space:pre"></span>x = document.body || null;<span style="white-space:pre"></span>jg_ie = x && typeof x.insertAdjacentHTML != "undefined";<span style="white-space:pre"></span>jg_dom = (x && !jg_ie &&<span style="white-space:pre"></span>typeof x.appendChild != "undefined" &&<span style="white-space:pre"></span>typeof document.createRange != "undefined" &&<span style="white-space:pre"></span>typeof (i = document.createRange()).setStartBefore != "undefined" &&<span style="white-space:pre"></span>typeof i.createContextualFragment != "undefined");<span style="white-space:pre"></span>jg_ihtm = !jg_ie && !jg_dom && x && typeof x.innerHTML != "undefined";<span style="white-space:pre"></span>//jg_fast = jg_ie && document.all && !window.opera; //注释 使其支持IE9.0 及以上<span style="white-space:pre"></span>jg_fast = false; //新加<span style="white-space:pre"></span>jg_moz = jg_dom && typeof x.style.MozOpacity != "undefined";<span style="white-space:pre"></span>}问题3：IE10.0 以上滤镜的属性表示不同
<span style="white-space:pre"></span>if(browserMatch.browser=='IE' && browserMatch.version <=9.0){filterStr = 'filter:alpha(opacity=0);'; //IE9.0以下 版本的区别 支持滤镜}else{filterStr = 'opacity: 0;'; //IE10.0以上 版本的区别}完整的代码：
/*author: zjjtime : 201609013 回放状态时间刻度处理类*///定义回掉函数命令码if (typeof hwxPBSTimerCbCmd == "undefined") { var hwxPBSTimerCbCmd = {}; hwxPBSTimerCbCmd.ReqPlayTime = 0; //重新定位播放起始位置 hwxPBSTimerCbCmd.ReqStatusTbls = 1; //重新请求录像状态表}/*录像状态类timePeriods： 录像查询区间recordedTimeTbls： 录像的时间表*/function hwxRecordStatus(timePeriodsArr, recordedTimeTbls) { this.ptimePeriodsArr = new Array(); if (timePeriodsArr != undefined) { for (var i = 0; i < timePeriodsArr.length; i++) { this.ptimePeriodsArr.push(timePeriodsArr[i]); } } this.precordedTimeTbls = new Array(); if (recordedTimeTbls != undefined) { for (var i = 0; i < recordedTimeTbls.length; i++) { this.precordedTimeTbls.push(recordedTimeTbls[i]); } }}function hwxPBSTimer(canvasId, playTime, hwxPBSTimerCallback) {var parentCanvasId = canvasId; var pCanvasId = parentCanvasId+"_1";var mouseCanvasId = parentCanvasId+"_2"; var curPlayTime = playTime; var pHwxPBSTimerCallback = hwxPBSTimerCallback; //回掉参数数组 var callbackArgsArr = new Array(); //录像状态数组 var recordedStatusArr = new Array(); //鼠标左键按下标志 var mouseDownFlag = 0; //鼠标移动标志 var mouseDownMoveStep = 0; //鼠标当前位置 var mousePosX = 0; var mousePosY = 0; //鼠标经过标志 var mouseOverFlag = 0; //鼠标单击事件 var mouseclickFlag = 0; var mouseZoomDownFlag = 0; //鼠标双击事件标志 var mousedblclickFlag = 0; //鼠标移动方向1 向右 减； 0 向左 加 var mouseMoveDir = 0; //时间字符长占用的像素（经验值） var timeStrPixLen = 85; //鼠标左键按下时播放时间 var mouseDownPlayTime = 0; var mouseUpPlayTime = 0; /* 60 5 秒钟一个刻度值 (12个) 1800 30分钟 5 分钟一个刻度值 （6个） 3600 1小时 10 分钟一个刻度值 （6个） 86400 24小时 2 小时一个刻度值 （12个） */ //时间宽度表单位是秒 var timeWidthTbls = new Array(60, 1800, 3600, 86400); //时间宽度说明表 var timeWidthTextTbls = new Array("范围: 1分钟; 单位: 秒", "范围: 30分钟; 单位: 分钟", "范围: 1小时; 单位: 分钟", "范围: 1天; 单位: 小时"); //拖拽移动步长单位是秒 var timeWidthStepTbls = new Array(1, 15, 60, 1800); var timeWidthMarkTbls = new Array(10, 60, 900, 10800); //当前使用的时间宽度索引 var timeWidthTblIndex = 3; var timeWidthTblNum = timeWidthTbls.length; // //主定时器 var mainTimer = null;var ini_step = 0;do{//获取浏览器信息var browserMatch = getBrowserInfo();//IE 11.0 8.0//调试信息var dbgStr = browserMatch.browser+browserMatch.version;createCanvasDiv();createMouseEventDiv(); //获取画布var myCanvas = document.getElementById(pCanvasId);if(myCanvas==null || myCanvas==undefined){alert("获取画布" + pCanvasId + "失败！！");ini_step++;break;}var myMouseCanvas = document.getElementById(mouseCanvasId);if(myMouseCanvas==null || myMouseCanvas==undefined){alert("获取鼠标DIV" + mouseCanvasId + "失败！！");ini_step++;break;}var myPen = new jsGraphics(pCanvasId);if(myPen==null || myPen==undefined){alert("创建DIV 画笔失败！！");ini_step++;break;}//获取div 宽高//var canvasWidth = myCanvas.offsetWidth;/*说明 offsetWidth 存在为0 的情况，但调试模式下不存原因尚不清楚*/var canvasWidth = myCanvas.clientWidth;if( canvasWidth==undefined || canvasWidth==null || canvasWidth==0){alert("获取画布宽失败"+canvasWidth);ini_step++;break;}//var canvasHeight = myCanvas.offsetHeight;var canvasHeight = myCanvas.clientHeight;if(canvasHeight==undefined || canvasHeight==null || canvasHeight==0){alert("获取画布高失败");ini_step++;break;}//录像状态条信息var vStatusX = 0;var vStatusY = parseInt(canvasHeight / 5) * 4;var vStatusWidth = canvasWidth;var vStatusHeight = parseInt(canvasHeight / 5) * 1;}while(0); function createMouseEventDiv() {do{var parentCanvas = document.getElementById(parentCanvasId);if(parentCanvas==null || parentCanvas==undefined){alert("getElementById " + parentCanvasId + "错误！" );ini_step++;break;}var parentWidth = parentCanvas.offsetWidth;if(parentWidth==null || parentWidth==undefined){alert("获取画布宽失败");ini_step++;break;}var parentHeight = parentCanvas.offsetHeight;if(parentHeight==null || parentHeight==undefined){alert("获取画布高失败");ini_step++;break;}var filterStr ='';if(browserMatch.browser=='IE' && browserMatch.version <=9.0){filterStr = 'filter:alpha(opacity=0);'; //IE9.0以下 版本的区别 支持滤镜}else{filterStr = 'opacity: 0;'; //IE10.0以上 版本的区别}var htm = '<div id="' + mouseCanvasId + '" style="position:absolute;' +'width:' + parentWidth + 'px;' +'height:' + parentHeight + 'px;' +'background-color:#363636;' +filterStr +'"><\/div>';//alert(htm);parentCanvas.insertAdjacentHTML("beforeEnd", htm);}while(0); } function createCanvasDiv () {do{var parentCanvas = document.getElementById(parentCanvasId);if(parentCanvas==null || parentCanvas==undefined){alert("getElementById " + parentCanvasId + "错误！" );ini_step++;break;}var parentWidth = parentCanvas.offsetWidth;if(parentWidth==null || parentWidth==undefined){alert("获取画布宽失败");ini_step++;break;}var parentHeight = parentCanvas.offsetHeight;if(parentHeight==null || parentHeight==undefined){alert("获取画布高失败");ini_step++;break;}var htm = '<div id="' + pCanvasId + '" style="position:absolute;' +'width:' + parentWidth + 'px;' +'height:' + parentHeight + 'px;' +'background-color:#363636;"' +'><\/div>';//alert(htm);parentCanvas.insertAdjacentHTML("beforeEnd", htm);}while(0); } //添加录像状态 this.addRecordStatus = function (status) { if (status == undefined) return; recordedStatusArr.push(status); } //清空录像状态 this.cleanRecordStatus = function () { recordedStatusArr.length = 0; } //更新当前播放时间 this.updatePlayTimeFunc = function (playTime) { if (playTime == undefined) return; if (mouseDownFlag) return; curPlayTime = playTime; }; this.cleanPSBTimerFunc = function () { clearInterval(this.updatePBSTimerId); }; //设置新的起始时间播放 function setNewPlayStartTimeCallback() { callbackArgsArr.length = 0; callbackArgsArr.push(curPlayTime); pHwxPBSTimerCallback(hwxPBSTimerCbCmd.ReqPlayTime, callbackArgsArr); } function isInTimePeriods(time) { if (time == undefined) return; var pNum = 0; for (var j = 0; j < recordedStatusArr.length; j++) { //大区间 var recStatus = recordedStatusArr[j]; // if (time >= recStatus.ptimePeriodsArr[0] && time <= recStatus.ptimePeriodsArr[1]) { pNum++; } } if (pNum != 0) return true; else return false } //检查是否超出当前已有的时间区域 function checkTimePeriods() { //时间宽度值 1min ,30min , 1h, 24h var timeWidth = timeWidthTbls[timeWidthTblIndex]; var startTime = curPlayTime - parseInt(timeWidth / 2); var endTime = curPlayTime + parseInt(timeWidth / 2); var arrSize = recordedStatusArr.length; var sNum = 0; var eNum = 0; var sTime = 0; var eTime = 0; if (isInTimePeriods(startTime) == false) { var date = new Date(startTime * 1000); date.setHours(0); date.setMinutes(0); date.setSeconds(0); sTime = parseInt(Date.parse(date) / 1000); } if (isInTimePeriods(endTime) == false) { var date = new Date(endTime * 1000); date.setHours(0); date.setMinutes(0); date.setSeconds(0); eTime = parseInt(Date.parse(date) / 1000); } if (sTime != 0) requestNewTimeSpaceStatus(sTime, sTime + 84600) if (sTime != eTime) { if (eTime != 0) requestNewTimeSpaceStatus(eTime, eTime + 84600) } return; } function requestNewTimeSpaceStatus(startTime, endTime) { if (startTime == undefined || endTime == undefined) return; callbackArgsArr.length = 0; callbackArgsArr.push(startTime); callbackArgsArr.push(endTime); pHwxPBSTimerCallback(hwxPBSTimerCbCmd.ReqStatusTbls, callbackArgsArr); }function getBrowserInfo(){var ua = navigator.userAgent.toLowerCase() ;rMsie = /(msie\s|trident.*rv:)([\w.]+)/, rFirefox = /(firefox)\/([\w.]+)/, rOpera = /(opera).+version\/([\w.]+)/, rChrome = /(chrome)\/([\w.]+)/, rSafari = /version\/([\w.]+).*(safari)/; var browser; var version; var match = rMsie.exec(ua); if(match != null){ browser = "IE"; version = match[2] || "0";return { browser : "IE", version : match[2] || "0" }; } var match = rFirefox.exec(ua); if (match != null) { return { browser : match[1] || "", version : match[2] || "0" }; } var match = rOpera.exec(ua); if (match != null) { return { browser : match[1] || "", version : match[2] || "0" }; } var match = rChrome.exec(ua); if (match != null) { return { browser : match[1] || "", version : match[2] || "0" }; } var match = rSafari.exec(ua); if (match != null) { return { browser : match[2] || "", version : match[1] || "0" }; } if (match != null) { return { browser : "", version : "0" }; } } /* 刷新画布 */ function CanvasUpdate () { /* if (mouseDownFlag) pause(1000);*/ myPen.clear(); drawTimeStrText(); drawScaleValue(); drawRecordedStatus();drawZoomInBtn();drawZoomOutBtn(); } //启动定时器 this.run = function () { if (mainTimer == undefined || mainTimer==null) mainTimer = setInterval(CanvasUpdate, 100); } function prun () { if (mainTimer == undefined || mainTimer == null) mainTimer = setInterval(CanvasUpdate, 100); } function stop() { if (mainTimer != undefined && mainTimer != null) { clearInterval(mainTimer); mainTimer = null; } } function pause(ms) { if (ms == undefined) ms = 1000; stop(); setTimeout(prun, ms); } //文本信息 function drawTimeStrText() { var maxHeight = canvasHeight; var maxWidth = canvasWidth; //时间宽度值 1min ,30min , 1h, 24h var timeWidth = timeWidthTbls[timeWidthTblIndex]; var startTime = curPlayTime - parseInt(timeWidth / 2); var endTime = curPlayTime + parseInt(timeWidth / 2); //鼠标双击事件 if (mousedblclickFlag) { mousedblclickFlag = 0; if (mousePosY >= maxHeight / 2) { curPlayTime = startTime + parseInt(timeWidth * mousePosX / maxWidth); startTime = curPlayTime - parseInt(timeWidth / 2); endTime = curPlayTime + parseInt(timeWidth / 2); setNewPlayStartTimeCallback(); } } //文字示例 //播放时间 var midTimestrPixLen = 196; var date = new Date(curPlayTime * 1000); Y = date.getFullYear() + '-'; M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '; h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'; m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'; s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); var timeStr = Y + M + D + h + m + s; myPen.setColor("#FFF68F"); myPen.setFont('verdana,geneva,helvetica,sans-serif',16, Font.PLAIN); myPen.drawString(timeStr, maxWidth / 2 - midTimestrPixLen / 2, 0); myPen.paint(); //画中间播放的刻度线 myPen.setFont('verdana,geneva,helvetica,sans-serif', 32, Font.PLAIN);myPen.setStroke(2); myPen.setColor("#FCFCFC"); myPen.drawLine(maxWidth / 2, maxHeight / 5, maxWidth / 2, maxHeight); myPen.paint();myPen.setStroke(1); myPen.setFont('verdana,geneva,helvetica,sans-serif', String.fromCharCode(0x31, 0x32, 0x70, 0x78), Font.PLAIN); //当前的时间范围 myPen.setColor("#FCFCFC"); myPen.drawString(timeWidthTextTbls[timeWidthTblIndex], maxWidth / 5 * 3, 20); //叠加调试信息 if(dbgStr != undefined && dbgStr.length >0) { myPen.setColor("#FCFCFC"); myPen.drawString(dbgStr, 0, 20); } /* var timeStr = timeWidthTextTbls[timeWidthTblIndex]; context.strokeStyle = "#FCFCFC"; context.lineWidth = 1.4; context.font = "smaller sans-serif"; context.strokeText(timeStr, maxWidth / 5 * 3, 20); */ timeStrPixLen = 150; //当前鼠标位置，对应的时间刻度 if (mouseOverFlag == 1 && mousePosY >= maxHeight /2) { var date = new Date((startTime + parseInt(timeWidth * mousePosX / maxWidth)) * 1000); Y = date.getFullYear() + '-'; M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '; h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'; m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'; s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); var timeStr = Y + M + D + h + m + s; var x = mousePosX; if (mousePosX + timeStrPixLen > maxWidth) x = maxWidth - timeStrPixLen; myPen.setColor("#FCFCFC"); myPen.drawString(timeStr, x, maxHeight/2); } } //画 录像状态条 function drawRecordedStatus() { var rectX = 0; var rectW = 0; //时间宽度值 1min ,30min , 1h, 24h var timeWidth = timeWidthTbls[timeWidthTblIndex]; var startTime = curPlayTime - parseInt(timeWidth / 2); var endTime = curPlayTime + parseInt(timeWidth / 2); var maxHeight = canvasHeight; var maxWidth = canvasWidth; //当前显示区间内录像时间表 var curSenceTbls = new Array(); var tblsNum = 0; //计算录像区域 var arrSize = recordedStatusArr.length; for (var j = 0; j < arrSize; j++) { //大区间 var recStatus = recordedStatusArr[j]; if ((startTime >= recStatus.ptimePeriodsArr[0] && startTime <= recStatus.ptimePeriodsArr[1]) || (endTime >= recStatus.ptimePeriodsArr[0] && endTime <= recStatus.ptimePeriodsArr[1])) { var recordedTimeTbls = recStatus.precordedTimeTbls; for (var i = 0; i < recordedTimeTbls.length; i++) { if (recordedTimeTbls[i][0] < startTime) { if (recordedTimeTbls[i][1] > startTime) { if (recordedTimeTbls[i][1] <= endTime) { curSenceTbls[tblsNum] = new Array(startTime, recordedTimeTbls[i][1]); tblsNum++; } else { curSenceTbls[tblsNum] = new Array(startTime, endTime); tblsNum++; } } } else if (recordedTimeTbls[i][0] >= startTime && recordedTimeTbls[i][0] < endTime) { if (recordedTimeTbls[i][1] <= endTime) { curSenceTbls[tblsNum] = new Array(recordedTimeTbls[i][0], recordedTimeTbls[i][1]); //alert(recordStatusTbls[i][0]+"--"+startTime); tblsNum++; } else { curSenceTbls[tblsNum] = new Array(recordedTimeTbls[i][0], endTime); //alert(recordStatusTbls[i][0]+"--"+recordStatusTbls[i][1]); tblsNum++; } } else { } } } } //没有录像 if (tblsNum <= 0) { myPen.setColor("#00EC00"); myPen.drawString("没有录像", maxWidth / 2, maxHeight / 2); myPen.paint(); } for (var i = 0; i < tblsNum; i++) { vStatusX = (curSenceTbls[i][0] - startTime) / timeWidth * maxWidth; vStatusWidth = (curSenceTbls[i][1] - curSenceTbls[i][0]) / timeWidth * maxWidth; myPen.setColor("#00EC00"); /* myPen.drawLine(vStatusX, vStatusY, vStatusX + vStatusWidth, vStatusY); myPen.drawLine(vStatusX, vStatusY+1, vStatusX + vStatusWidth, vStatusY+1); myPen.drawLine(vStatusX, vStatusY+2, vStatusX + vStatusWidth, vStatusY+2); myPen.drawLine(vStatusX, vStatusY+3, vStatusX + vStatusWidth, vStatusY+3); myPen.drawLine(vStatusX, vStatusY + 4, vStatusX + vStatusWidth, vStatusY + 4); */ myPen.fillRect(vStatusX, vStatusY, vStatusWidth, vStatusHeight-1); myPen.paint(); } } //画刻度 function drawScaleValue() { //时间宽度值 1min ,30min , 1h, 24h var timeWidth = timeWidthTbls[timeWidthTblIndex]; var startTime = curPlayTime - parseInt(timeWidth / 2); var endTime = curPlayTime + parseInt(timeWidth / 2); var maxHeight = canvasHeight; var maxWidth = canvasWidth; //var timeWidthTbls = new Array(60,1800,3600,86400); /*60 5 秒钟一个刻度值 (12个) 1800 30分钟 5 分钟一个刻度值 （6个）3600 1小时 10 分钟一个刻度值 （6个）86400 24小时 2 小时一个刻度值 （12个）*/ var timeWidth = timeWidthTbls[timeWidthTblIndex]; var curScale = 0; var scaleStrPixlen = 18; //经验值var lx,ly; switch (timeWidth) { case 60: var date = new Date(startTime * 1000); var startSecond = date.getSeconds(); for (var i = 0; i < 60; i++) { curScale = startSecond + i; if (curScale >= 60) curScale = curScale - 60; if (curScale % 5 == 0) { //画 刻度值 myPen.setColor("#ADADAD");if((i * maxWidth / 60 - scaleStrPixlen / 2) >0) myPen.drawString(curScale, i * maxWidth / 60 - scaleStrPixlen / 2, maxHeight /5* 3); myPen.paint(); //画 刻度线 myPen.setColor("#ADADAD"); myPen.drawLine(i * maxWidth / 60, maxHeight / 5 * 4 - 3, i * maxWidth / 60, maxHeight); myPen.paint(); } } break; case 1800: var date = new Date(startTime * 1000); var startHour = date.getHours(); var startMin = date.getMinutes(); var startSec = date.getSeconds(); var curSecOffset = startSec; //重点 for (var i = 0; i < 30; i++) { curScale = startMin + i; if (curScale >= 60) curScale = curScale - 60; if (curScale % 5 == 0) {lx=(i * 60 - curSecOffset) * maxWidth / 1800; //画 刻度值 myPen.setColor("#ADADAD");if(lx>=0) myPen.drawString(curScale, lx - scaleStrPixlen / 2, maxHeight /5* 3); myPen.paint(); //画 刻度线 myPen.setColor("#ADADAD");if(lx>=0) myPen.drawLine(lx, maxHeight / 5 * 4 - 3, lx, maxHeight); myPen.paint(); } } break; case 3600: var date = new Date(startTime * 1000); var startHour = date.getHours(); var startMin = date.getMinutes(); var startSec = date.getSeconds(); var curSecOffset = startSec; //var curSecOffset = 60- startSec; //if(curSecOffset==60) //curSecOffset = 0; for (var i = 0; i < 60; i++) { curScale = startMin + i; if (curScale >= 60) curScale = curScale - 60; if (curScale % 10 == 0) {lx = (i * 60 - curSecOffset) * maxWidth / 3600; //画 刻度值 myPen.setColor("#ADADAD");if(lx>=0) myPen.drawString(curScale, lx - scaleStrPixlen / 2, maxHeight / 5 *3); myPen.paint(); //画 刻度线 myPen.setColor("#ADADAD");if(lx>=0) myPen.drawLine(lx, maxHeight / 5 * 4 - 3, lx, maxHeight); myPen.paint(); } } break; case 86400: var date = new Date(startTime * 1000); var startHour = date.getHours(); var startMin = date.getMinutes(); var startSec = date.getSeconds(); //var curSecOffset = 3600 - startMin*60- startSec; var curSecOffset = startMin * 60 + startSec; //if(curSecOffset==3600) //curSecOffset = 0; for (var i = 0; i < 24; i++) { curScale = startHour + i; if (curScale >= 24) curScale = curScale - 24; if (curScale % 2 == 0) { lx = (i * 3600 - curSecOffset) * maxWidth / 86400;//画 刻度值 myPen.setColor("#ADADAD");if(lx>=0)myPen.drawString(curScale, lx - scaleStrPixlen / 2, maxHeight / 5 * 3); myPen.paint(); //画 刻度线 myPen.setColor("#ADADAD");if(lx>=0)myPen.drawLine(lx, maxHeight / 5 * 4 - 3, lx, maxHeight); myPen.paint(); } } break; } }//画缩放按钮+function drawZoomInBtn(){ //时间宽度值 1min ,30min , 1h, 24h var timeWidth = timeWidthTbls[timeWidthTblIndex]; var startTime = curPlayTime - parseInt(timeWidth / 2); var endTime = curPlayTime + parseInt(timeWidth / 2); var maxHeight = canvasHeight; var maxWidth = canvasWidth;//按钮中心坐标var BtnCx = maxWidth/10*9;var BtnCy = maxHeight/5;var BtnWidth = 20;var BtnHeight = 20;var BtnX = BtnCx - BtnWidth/2 ;var BtnY = BtnCy - BtnHeight/2 ;//画外圈myPen.setColor("#4F4F4F");myPen.fillRect(BtnX, BtnY, BtnWidth, BtnHeight);myPen.paint();var BtnWidth2 = 14;var BtnHeight2 = 14;var lineLen = 12;//动画效果if(mouseDownFlag==1){if(mousePosX>=BtnX && mousePosX <= BtnX+BtnWidth && mousePosY >=BtnY && mousePosY <= BtnY +BtnHeight){BtnWidth2 = 20;BtnHeight2 = 20;lineLen = 14;if (timeWidthTblIndex <= 0) {timeWidthTblIndex = 0;}else {timeWidthTblIndex--;}//mouseclickFlag = 0;}}var BtnX2 = BtnCx - BtnWidth2/2 ;var BtnY2 = BtnCy - BtnHeight2/2 ;//画内圈myPen.setColor("#6C6C6C");myPen.fillRect(BtnX2, BtnY2, BtnWidth2, BtnHeight2);myPen.paint();var lhx1 = BtnCx - lineLen/2-1;var lhy1 = BtnCy-1;var lhx2 = BtnCx + lineLen/2-1;var lhy2 = BtnCy-1;//画横myPen.setStroke(2);myPen.setColor("#D0D0D0");myPen.drawLine(lhx1, lhy1, lhx2, lhy2);myPen.paint();//画竖var lsx1 = BtnCx-1;var lsy1 = BtnCy- lineLen/2-1;var lsx2 = BtnCx-1;var lsy2 = BtnCy + lineLen/2-1;myPen.setColor("#D0D0D0");myPen.drawLine(lsx1, lsy1, lsx2, lsy2);myPen.paint();myPen.setStroke(1);}//画缩放按钮-function drawZoomOutBtn(){ //时间宽度值 1min ,30min , 1h, 24h //时间宽度值 1min ,30min , 1h, 24h var timeWidth = timeWidthTbls[timeWidthTblIndex]; var startTime = curPlayTime - parseInt(timeWidth / 2); var endTime = curPlayTime + parseInt(timeWidth / 2); var maxHeight = canvasHeight; var maxWidth = canvasWidth;//按钮中心坐标var BtnCx = maxWidth/10*9-50;var BtnCy = maxHeight/5;var BtnWidth = 20;var BtnHeight = 20;var BtnX = BtnCx - BtnWidth/2 ;var BtnY = BtnCy - BtnHeight/2 ;//画外圈myPen.setColor("#4F4F4F");myPen.fillRect(BtnX, BtnY, BtnWidth, BtnHeight);myPen.paint();var BtnWidth2 = 14;var BtnHeight2 = 14;var lineLen = 12;//动画效果if(mouseDownFlag==1){if(mousePosX>=BtnX && mousePosX <= BtnX+BtnWidth && mousePosY >=BtnY && mousePosY <= BtnY +BtnHeight){BtnWidth2 = 20;BtnHeight2 = 20;lineLen = 14;if (timeWidthTblIndex >= (timeWidthTblNum - 1)) {timeWidthTblIndex = timeWidthTblNum-1;}else {timeWidthTblIndex++;}//mouseclickFlag = 0;}}var BtnX2 = BtnCx - BtnWidth2/2 ;var BtnY2 = BtnCy - BtnHeight2/2 ;//画内圈myPen.setColor("#6C6C6C");myPen.fillRect(BtnX2, BtnY2, BtnWidth2, BtnHeight2);myPen.paint();var lhx1 = BtnCx - lineLen/2-1;var lhy1 = BtnCy;var lhx2 = BtnCx + lineLen/2-1;var lhy2 = BtnCy;//画横myPen.setStroke(2);myPen.setColor("#D0D0D0");myPen.drawLine(lhx1, lhy1, lhx2, lhy2);myPen.paint();myPen.setStroke(1);} /////////////////////////////////////////////////////////////////////////////////////////////////////// //鼠标按下事件,这是传统的事件绑定,它非常简单而且稳定,适应不同浏览器.e表示事件,this指向当前元素. //但是这样的绑定只会在事件冒泡中运行,捕获不行.一个元素一次只能绑定一个事件函数. myMouseCanvas.onmousedown = function (e) { var e = window.event || e var rect = this.getBoundingClientRect(); var mouseX = e.clientX - rect.left; //获取鼠标在canvsa中的坐标 var mouseY = e.clientY - rect.top; mouseZoomDownFlag = 1; mouseDownFlag = 1; mousePosX = mouseX; mouseDownPlayTime = curPlayTime; } //鼠标松开 myMouseCanvas.onmouseup = function (e) { mouseZoomDownFlag = 0; if (mouseDownFlag) { mouseUpPlayTime = curPlayTime; //响应鼠标拖拽状态条 checkTimePeriods(); //重新定位开始播放时间 if (mouseUpPlayTime != mouseDownPlayTime) setNewPlayStartTimeCallback();//alert("mouse up"); mouseDownFlag = 0; } }; //鼠标移动 myMouseCanvas.onmousemove = function (e) { var e = window.event || e var rect = this.getBoundingClientRect(); var mouseX = e.clientX - rect.left; //获取鼠标在canvsa中的坐标 var mouseY = e.clientY - rect.top; //dbgStr = "鼠标状态：" + mouseDownFlag + "鼠标坐标：" + mouseX + "," + mouseY; //鼠标按下状态 if (mouseDownFlag) { //alert("Mouse draging"); if (mousePosX - mouseX > 0) { mouseMoveDir = 1; mouseDownMoveStep = Math.abs(mousePosX - mouseX); if (mouseDownMoveStep >= 2) { mousePosX = mouseX; curPlayTime = curPlayTime + timeWidthStepTbls[timeWidthTblIndex]; //alert("Mouse left step:"+ mouseDownMoveStep); } } else { mouseMoveDir = 0; mouseDownMoveStep = Math.abs(mousePosX - mouseX); if (mouseDownMoveStep >= 2) { mousePosX = mouseX; curPlayTime = curPlayTime - timeWidthStepTbls[timeWidthTblIndex]; //alert("Mouse right step:"+ mouseDownMoveStep); } } } //鼠标移动 mouseOverFlag = 1; mousePosX = mouseX; mousePosY = mouseY; } //鼠标移出区域 myMouseCanvas.onmouseout = function (e) { //mouseDownFlag = 0; //mouseOverFlag = 0; //alert("Mouse out"); } //鼠标进去区域 myMouseCanvas.onmouseover = function (e) { var e = window.event || e var rect = this.getBoundingClientRect(); var mouseX = e.clientX - rect.left; //获取鼠标在canvsa中的坐标 var mouseY = e.clientY - rect.top; mouseOverFlag = 1; mousePosX = mouseX; mousePosY = mouseY; //mouseDownFlag = 0; //alert("Mouse in"); this.style.cursor = "pointer"; } myMouseCanvas.onmousewheel = function (e) { //alert("Mouse wheel"); if (e == undefined) e = window.event; // old IE support var delta = e.wheelDelta / 120; if (delta > 0) { if (timeWidthTblIndex >= (timeWidthTblNum - 1)) { timeWidthTblIndex = timeWidthTblNum-1; } else { timeWidthTblIndex++; } } else { if (timeWidthTblIndex <=0) { timeWidthTblIndex = 0; } else { timeWidthTblIndex--; } } } //单击事件 myMouseCanvas.onclick = function (e) { var e = window.event || e var rect = this.getBoundingClientRect(); var mouseX = e.clientX - rect.left; //获取鼠标在canvsa中的坐标 var mouseY = e.clientY - rect.top; mousePosX = mouseX; mousePosY = mouseY; mouseclickFlag = 1; //alert("click"); } /* 双击事件在进度条上时获取不到，信号 处理方法，添加一层透明的div 于最上层 用于捕获鼠标事件 */ //双击事件 myMouseCanvas.ondblclick = function (e) { var e = window.event || e var rect = this.getBoundingClientRect(); var mouseX = e.clientX - rect.left; //获取鼠标在canvsa中的坐标 var mouseY = e.clientY - rect.top; mousePosX = mouseX; mousePosY = mouseY; mousedblclickFlag = 1; // alert("double click"); }}测试结果：
完整的项目下载路径：
http://download.csdn.net/detail/zhujinghao09/9634299
0 0
- html js 定制进度条 （二）
- html js 定制进度条 （一）
- html css js 进度条
- 静态进度条 上下左右居中 js css html
- 进度条（二）
- 进度条（js实现）
- 简单的进度条，水平进度条（二）
- 定制进度条图像
- 圆形进度条定制
- ProgressBar进度条定制
- ArcIMS学习之 HTML Viewer定制笔记 续二（2.Servlet与请求响应过程）
- HTML进度条
- HTML进度条
- html进度条
- WinCE开始菜单定制（二）
- linux系统定制（二）
- 自定义圆形进度条（二）
- 学习整理——html+css+js可拖动进度条
- 一些JAVA面试知识点
- Java查找算法之二分法查找
- Android学习之shape属性
- 《Java编程思想第四版》笔记---18章（7） I/O 文件锁定，文件压缩
- 数据结构练习题 约瑟夫环—用循环链表实现
- html js 定制进度条 （二）
- 2.4.2节练习
- 《GeekBand》C++设计模式02
- 修改host，上github
- U-Boot Environment Variables
- HDU 1757 矩阵快速幂模版
- Linux分区
- Python生成随机数
- C#之WinForm基础 设置文件对话框只能看到所有类型的文件
