JS+JQuery 时间控制面板

最新推荐文章于 2023-02-14 18:44:04 发布

love452076852

最新推荐文章于 2023-02-14 18:44:04 发布

阅读量318

点赞数

分类专栏： Ajax_JS_JQuery_JQuery UI_ExtJS_正则文章标签： jQuery CSS XML HTML JavaScript ViewUI

Ajax_JS_JQuery_JQuery UI_ExtJS_正则专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JS+JQuery 上网时间控制效果。。
鼠标在面板上拖动选择时间，点击确定，可以得到封装的一字符串！
跟字符串，可以初始化一个时间控制面板。。

[img]http://dl.iteye.com/upload/attachment/277676/50be166f-898e-3865-8a2a-f38839bd67e3.png[/img]


//上网时间控制核心代码。。。。 
//hong.timeweek.js

// 的唯一标识拼接XML时需要使用
$(document).ready(function() {
			createDIVTIMESET("#Chat");
		});
var _selectColor = 'green';// 选择后的颜色
var _unselectColor = '#EDEDED';// 选择前的颜色

var _selectInColor = 'red';// 选择后鼠标移入
var _unSelectInColor = '#E0FFFF';// 选择前鼠标移入

var _tempIsClickToDiv = false;// /临时变量 用于记录 当前操作 是否为点击选择时间
var _weekClass = [['', ' '], ['Mon', '一'], ['Thes', '二'], ['Wed', '三'],
		['Thurs', '四'], ['Friday', '五'], ['Sat', '六'], ['Sun', '七']];// 代表每一行
/**
 * 初始化 事件注册
 */
function registerEvent(objId) {
	// 点击变色 时间控制
	$(objId+" .setTimeItem a").mouseover(function() {
		(_tempIsClickToDiv) ? _changeColorToDiv(this,objId) : null;
		($(this).css("backgroundColor",
				(($(this).css("backgroundColor") == _selectColor)
						? _selectInColor
						: _unSelectInColor)));
	}).mousedown(function() {
				_changeColorToDiv(this,objId);
			}).mouseup(_changeStateToTiv).mouseout(function() {
		($(this).css("backgroundColor",
				((($(this).css("backgroundColor") == _selectColor) || ($(this)
						.css("backgroundColor") == _selectInColor))
						? _selectColor
						: _unselectColor)));
	});
	// 点击变色 时间控制
	$(document).click(_changeStateToTiv).mouseup(_changeStateToTiv).mousedown(
			function() {
				_tempIsClickToDiv = true;
			});
}
/**
 * 清空
 * 
 * @param {Object}
 *            divID
 */
function clearTimeToDiv(divID) {
	$("#" + divID + " a").css("backgroundColor", _unselectColor);
}
/**
 * 根据 一个DIV 创建一个 时间控件
 * 
 * @param {Object}
 *            obj DIV对象
 */
function createDIVTIMESET(objId) {
	obj = $(objId);
	var obj_v=$(objId+"_V");

	if (obj) {
		try {
			var setITEMCSSHand = "setTimeHand ";// 后面必须有个空格
			var setITEMCSSItem = "setTimeItem ";
			var oldvalue = _convertXMLTOArrayByTime($(obj_v).html(), _weekClass);
			$(obj).html("").css("width", "540px");
			$(_weekClass).each(function(index, value) {
				var targetCSS = value[0];// 标签TAG值或CSS Name
				var html = "<div class='"
						+ ((index == 0) ? setITEMCSSHand : setITEMCSSItem)
						+ targetCSS + "'><div>" + value[1] + "</div>";
				for (var i = 1; i <= 24; i++) {
					html += "<div>";
					if (index == 0) {
						html += (i < 10) ? ("0" + i) : i;
					} else {
						var v1 = (i * 2 - 1), v2 = (i * 2);
						html += "<a style='background-color:"
								+ (_checkNumberInArray(v1, oldvalue[index - 1])
										? _selectColor
										: _unselectColor)
								+ "' id='"
								+ v1
								+ "'></a><a style='background-color:"
								+ (_checkNumberInArray(v2, oldvalue[index - 1])
										? _selectColor
										: _unselectColor) + "' id='" + v2
								+ "'></a>";
					}
					html += "</div>";
				}
				html += "</div>";
				$(obj).html($(obj).html() + html);
			});
		} catch (e) {
		}
	}
	registerEvent(objId);
}

/**
 * 得到时间的值
 * 
 * @param {Object}
 *            divClass
 */
function getTimeByValueToDiv(divId) {
	try {
		var timesString = "";
		// 循环所有的周
		$(_weekClass).each(function(index, domValue) {
			if (index != 0) {
				var times = []// 存取 所有的天
				// 循环所有的天 取出 选中的天
				$("#" + divId + " ." + domValue[0] + " a").each(
						function(index, domElm) {
							if ($(domElm).css("backgroundColor") == _selectColor) {
								times.push(domElm.id);
							}
						});
				var timeStr = "<" + (label = domValue[0]) + "s>";// 取得标签//循环取出的天，然后拼字符串
				timesString += (timeStr + _getXMLDataByTime(times, label)
						+ "</" + label + "s>");
			}
		});
	} catch (e) {
	}
	$("#"+divId+"_V").html(timesString);
	//alert(divId + "=" + timesString);
}

/**
 * 拼接 时间字符串
 * 
 * @param {Object}
 *            times 时间数组
 * @param {Object}
 *            label 标签
 */
function _getXMLDataByTime(times, label) {
	// 0 1.5 00:00-01:30
	var strXML = "";
	if (times.length > 0) {
		var hand = times[0];
		for (var i = 0, len = times.length - 1; i <= len; i++) {
			if (i != len && (parseInt(times[i]) + 1 == parseInt(times[i + 1]))) {
				/** 如果当前与下一个是连续的* */
				continue;
			} else {
				strXML += "<" + label + ">" + this._getTimeString(hand - 1)
						/** 前半小时 需要减1即减半小时* */
						+ "-" + this._getTimeString(times[i]) + "</" + label
						+ ">";
				((i != len) ? hand = times[i + 1] : null)
			}
		}
	}
	return strXML;
}

/**
 * 得到时间字符串
 * 
 * @param {Object}
 *            number 代表时间的数字
 */
function _getTimeString(number) {
	var number2 = parseInt(number = number / 2);
	return ((number < 10) ? "0" : '') + number2.toString()+":"
			+ ((number == number2) ? "00" : "30");
}

/**
 * 改变背景颜色
 * 
 * @param {Object}
 *            that 改变的对象
 */
function _changeColorToDiv(that,objId) {
	that = that.style;
	that.backgroundColor = (((that.backgroundColor == _selectColor) || (that.backgroundColor == _selectInColor))
			? _unselectColor
			: _selectColor);
}

/**
 * 改变状态
 * 
 * @param {Object}
 */
function _changeStateToTiv() {
	_tempIsClickToDiv = false;
}

/**
 * 检查一个数字是否存在于这个数组
 * 
 * @param {Object}
 *            num 数字
 * @param {Object}
 *            arr 数组
 */
function _checkNumberInArray(num, arr) {
	for (var i in arr)
		if (arr[i] == num)
			return true;
	return false;
}

/**
 * 把时间字符串 转换为 时间数组
 * 
 * @param {Object}
 *            valueXML XML 数据
 * @param {Object}
 *            _weekClass TAG 数组
 */
function _convertXMLTOArrayByTime(valueXML, _weekClass) {
	valueXML=valueXML.toUpperCase();
	valueXML=valueXML.replace('\N','');
	var objA = [];
	$(_weekClass).each(function(index, value) {
		var tag = value[0].toUpperCase();
		if (index > 0) {
			// 取出每天的时间字符串
			var startTag = "<" + tag + "S>";
			var index = valueXML.indexOf(startTag) + startTag.length;
			var indexEnd = valueXML.indexOf("</" + tag + "S>");
			var XML = valueXML.substr(index, indexEnd - index);
			var objSub = [];// 把每天转换为 数字
			while (XML.length > tag.length) {
				startTag = "<" + tag + ">";
				index = XML.indexOf(startTag) + startTag.length;
				indexEnd = (XML.indexOf("</" + tag + ">"));
				var arrTimesNumber = _getArrayNumbetByTimeString(XML.substr(
								index, indexEnd - index), objSub);
				XML = XML.substr(indexEnd + tag.length, XML.length - indexEnd);// 字符串转换XML
			}
			objA.push(objSub);
		}
	})
	return objA;
}

/**
 * 返回 代表时间的数组
 * 
 * @param {Object}
 *            timeStr 时间字符串
 * @param {Object}
 *            objSub 数组 里面的数据不有更改，只能添加
 */
function _getArrayNumbetByTimeString(timeStr, objSub) {
	var time1 = timeStr.substr(0, 5);
	var time2 = timeStr.substr(6, 5);
	var tA = parseFloat(parseFloat(time1.substr(0, 2)) + "."
			+ ((parseInt(time1.substr(3, 2)) > 0) ? "5" : "0"))
			* 2 + 1;
	var tB = parseFloat(parseFloat(time2.substr(0, 2)) + "."
			+ ((parseInt(time2.substr(3, 2)) > 0) ? "5" : "0"))
			* 2;
	for (; tA <= tB; objSub.push(tA), tA++);
	return objSub;
}



//页面代码。。。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>fds</title>

    <script type="text/javascript" src="jquery-1.2.6.js"></script>

    <script type="text/javascript" src="hong.timeweek.js"></script>

    <link type="text/css" href="hong.timeweek.css" rel="stylesheet" />

  </head>
  <body>
  <div id="Chat_V"><Mons><Mon>01:00-02:30</Mon></Mons><Thess><Thes>04:30-14:30</Thes></Thess><Weds><Wed>13:30-19:00</Wed></Weds><Thurss><Thurs>15:30-20:00</Thurs></Thurss><Fridays><Friday>03:00-15:00</Friday></Fridays><Sats><Sat>11:00-16:00</Sat></Sats><Suns><Sun>08:00-10:00</Sun><Sun>10:30-11:30</Sun><Sun>12:30-16:00</Sun></Suns></div>
  <div class="time_xs" id="Chat" ></div>
  <input type="button" value="Clear" onclick="clearTimeToDiv('Chat');"/>
  <input type="button" value="Finish" onclick="getTimeByValueToDiv('Chat');" />
  </body>
</html>


.setTimeHand {
    text-align: center;
    vertical-align: middle;
    color: #5DB11E;
    margin-left: 10px;
    height: 23px;
}

.setTimeHand div {
    width: 17px;
    height: 15px;
    border: 1px solid #CFCFCF;
    float: left;
    margin: 1px;
    background-color: #EDEDED;
    color: #454545;
}

.setTimeItem {
    text-align: center;
    vertical-align: middle;
    color: #5DB11E;
    margin-left: 10px;
    height: 20px;
}

.setTimeItem div {
    width: 17px;
    border: 1px solid #B0C4DE;
    float: left;
    margin: 1px;
    background-color: #EDEDED;
    color: #454545;
    height: 15px;
}

.setTimeItem div a {
    float: left;
    width: 8.5px;
    background-color: #EDEDED;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: hand;
    height: 100%;
}

.setTimeItem div a:hover {
    background-color: #90EE90;
}

love452076852

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS+JQuery 时间控制面板

JS+JQuery 上网时间控制效果。。鼠标在面板上拖动选择时间，点击确定，可以得到封装的一字符串！跟字符串，可以初始化一个时间控制面板。。[img]http://dl.iteye.com/upload/attachment/277676/50be166f-898e-3865-8a2a-f38839bd67e3.png[/img][code="JavaScript"]...
复制链接

扫一扫