时间分钟选择框

最新推荐文章于 2021-06-04 05:21:25 发布

wuxq0505

最新推荐文章于 2021-06-04 05:21:25 发布

阅读量182

点赞数

分类专栏： js应用文章标签：时间分钟选择框

本文链接：https://blog.csdn.net/wuxq0505/article/details/84096649

版权

js应用专栏收录该内容

30 篇文章 0 订阅

订阅专栏

功能预览：

<html>
<script language=javascript src="datetwo.js"></script>
<table align="center">
<tr>
<td>
<body>
  (1)选择日期和小时及分钟 <input type="text" name="datehm1" readOnly onClick="setDayHM(this);" value="请单击此处">
  (2)选择日期和小时及分钟 <input type="text" name="datehm2" readOnly onClick="setDayHM(this);" value="请单击此处">
  (3)选择日期和小时及分钟 <input type="text" name="datehm3" readOnly onClick="setDayHM(this);" value="请单击此处">
    </body>


</td>
</tr>
</table>
</html>

//月、时、分选择下拉框
var s_tiannet_select2 = "width:46px;display:none;";
//日期选择控件体的样式
var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
"border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";
//显示日的td的样式
var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
//字体样式
var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";
//链接的样式
var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";
//横线
var s_tiannet_line = "border-bottom:1 solid #6699CC";
//------------------ 变量定义 ---------------------------//
var now = new Date();
//var month = now.getMonth() + 1;
//var date = now.getDate();


var tiannetDateNow = new Date();
var tiannetDay = tiannetDateNow.getDate();
var tiannetHour = 0;//tiannetDateNow.getHours();
var tiannetMinute = 0;//tiannetDateNow.getMinutes();
var tiannetArrDay=new Array(42);          //定义写日期的数组
var tiannetTimeSplit = ":";     //时间的分隔符号
var tiannetOutObject;      //接收日期时间的对象
var arrTiannetHide = new Array();//被强制隐藏的标签
var m_bolShowHour = false;//是否显示小时
var m_bolShowMinute = false;//是否显示分钟

//用户主调函数－选择日期和小时及分钟
function setDayHM(obj){
//清空文本框
obj.value = "";
tiannetOutObject = obj;
m_bolShowHour = true;
m_bolShowMinute = true;
//如果标签中有值，则将日期和小时及分钟初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
var time = strValue.substring(0,6);
var arr = time.split(tiannetTimeSplit);

tiannetHour = arr[0];
tiannetMinute = arr[1];
if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);
if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);
}
tiannetPopCalendar();
}

function tiannetPopCalendar(){
	
//隐藏下拉框，显示相对应的head
hideElementsById(new Array("selTianHour","selTianMinute"),true);

tiannetWriteHead();

showTime();

var dads = document.all.divTiannetDate.style;
var iX, iY;

var h = document.all.divTiannetDate.offsetHeight;
var w = document.all.divTiannetDate.offsetWidth;
//计算left
if (window.event.x + h > document.body.offsetWidth - 10    )
iX = window.event.x - h - 5 ;
else
iX = window.event.x + 5; 
if (iX <0) 
iX=0;
//计算top
iY = window.event.y;
if (window.event.y + w > document.body.offsetHeight - 10   )
iY = document.body.scrollTop + document.body.offsetHeight - w - 5 ;
else
iY = document.body.scrollTop +window.event.y + 5; 
if (iY <0) 
iY=0;
dads.left = iX;
dads.top = iY;

tiannetShowControl();
}
document.write('<div id="divTiannetDate" style="'+s_tiannet_body+'" style="">');
document.write('<div align="center" id="divTiannetDateText" Author="tiannet" style="padding-top:2px;">');
document.write('<span id="tiannetHourHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
    'οnclick="spanHourCEvent();">&nbsp;时</span>');
document.write('<select id="selTianHour" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
    ' onChange="tiannetHour=this.value;tiannetWriteHead();document.all.tiannetHourHead.style.display=\'\';' +
    'this.style.display=\'none\';">');
for(var i=0;i <= 23;i ++){
document.writeln('<option value="' + i + '">' + i + '时</option>');
}
document.write('</select>');
document.write('<span id="tiannetMinuteHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
    'οnclick="spanMinuteCEvent();">&nbsp;&nbsp;分</span>');
document.write('<select id="selTianMinute" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
    ' onChange="tiannetMinute=this.value;tiannetWriteHead();document.all.tiannetMinuteHead.style.display=\'\';'+
    'this.style.display=\'none\';">');
for(var i=0;i <= 59;i ++){
document.writeln('<option value="' + i + '">' + i + '分</option>');
}
document.write('</select>');
//输出一条横线
   document.write('<div style="'+s_tiannet_line+'"></div>');
   document.write('<table border=0 cellspacing=1 cellpadding=0  bgcolor=white onselectstart="return false">');
   document.write (' <tr align=center id="trTiannetDay5" >');
   document.write('<td align="center" id="tdTiannetDay35" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" ' 
    +' style="' + s_tiannet_day + '">&nbsp;</td>');
   document.write('<td align="center" id="tdTiannetDay36" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" ' 
    +' style="' + s_tiannet_day + '">&nbsp;</td>');
   document.write('<td align="right" colspan="5"><a href="javascript:tiannetClear();" style="' + s_tiannet_link + '">清空</a>'+
    '&nbsp;<a href="javascript:tiannetHideControl();" style="' + s_tiannet_link + '">关闭</a>' +
    '&nbsp;<a href="javascript:tiannetSetValue(true);" style="' + s_tiannet_link + '">确定</a>&nbsp;' +
    '</td>');
   document.write (' </tr>');
   document.write('</table>');
document.write('</div>');
document.write('</div>');
//单击小时span标签响应
function spanHourCEvent(){
hideElementsById(new Array("selTianHour","selTianMinute"),false);
}
//向span标签中写入时、分等数据
function tiannetWriteHead(){
	
if( m_bolShowHour ) document.all.tiannetHourHead.innerText = " "+tiannetHour + "时";
if( m_bolShowMinute ) document.all.tiannetMinuteHead.innerText = tiannetMinute + "分";
tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}
//单击分钟span标签响应
function spanMinuteCEvent(){
hideElementsById(new Array("selTianHour","selTianMinute"),true);
}
//显示日历控件(同时隐藏会遮挡的标签)
function tiannetShowControl(){
document.all.divTiannetDate.style.display = "";
tiannetHideObject("SELECT");
tiannetHideObject("OBJECT");
}
//根据标签名称隐藏标签。如会遮住控件的select，object
function tiannetHideObject(strTagName) {

x = document.all.divTiannetDate.offsetLeft;
y = document.all.divTiannetDate.offsetTop;
h = document.all.divTiannetDate.offsetHeight;
w = document.all.divTiannetDate.offsetWidth;

for (var i = 0; i < document.all.tags(strTagName).length; i++)
{

var obj = document.all.tags(strTagName)[i];
if (! obj || ! obj.offsetParent)
   continue;
// 获取元素对于BODY标记的相对坐标
var objLeft   = obj.offsetLeft;
var objTop    = obj.offsetTop;
var objHeight = obj.offsetHeight;
var objWidth = obj.offsetWidth;
var objParent = obj.offsetParent;

while (objParent.tagName.toUpperCase() != "BODY"){
   objLeft += objParent.offsetLeft;
   objTop   += objParent.offsetTop;
   objParent = objParent.offsetParent;
}
//alert("控件左端:" + x + "select左端" + (objLeft + objWidth) + "控件底部:" + (y+h) + "select高:" + objTop);

var bolHide = true;
if( obj.style.display == "none" || obj.style.visibility == "hidden" || obj.getAttribute("Author") == "tiannet" ){
   //如果标签本身就是隐藏的，则不需要再隐藏。如果是控件中的下拉框，也不用隐藏。
   bolHide = false;
}
if( ( (objLeft + objWidth) > x && (y + h + 20) > objTop && (objTop+objHeight) > y && objLeft < (x+w) ) && bolHide ){
   //arrTiannetHide.push(obj);//记录被隐藏的标签对象
   arrTiannetHide[arrTiannetHide.length] = obj;
   obj.style.visibility = "hidden";
}


}
}
//取出空格
function tiannetTrim(str) {
return str.replace(/(^\s*)|(\s*$)/g,"");
}
//是否显示时间
function showTime(){
hideElementsById(new Array("selTianHour","selTianMinute"),false);
}
//根据标签id隐藏或显示标签
function hideElementsById(arrId,bolHide){
	
var strDisplay = "";
if(bolHide) strDisplay = "none";
for(var i = 0;i < arrId.length;i ++){
var obj = document.getElementById(arrId[i]);
obj.style.display = strDisplay;
}
}
//给接受日期时间的控件赋值
//参数bolHideControl - 是否隐藏控件
function tiannetSetValue(bolHideControl){
var value="";
if( m_bolShowHour ){
var hour = tiannetHour;
if( hour < 10 && hour.toString().length == 1 ) hour = "0" + hour;
value =  hour;
}
if( m_bolShowMinute ){
var minute = tiannetMinute;
if( minute < 10 && minute.toString().length == 1 ) minute = "0" + minute;
value += tiannetTimeSplit + minute;
}
tiannetOutObject.value = value;
//document.all.divTiannetDate.style.display = "none";
if( bolHideControl ) {
tiannetHideControl();
}
}
//隐藏日历控件(同时显示被强制隐藏的标签)
function tiannetHideControl(){
document.all.divTiannetDate.style.display = "none";
tiannetShowObject();
arrTiannetHide = new Array();//将被隐藏的标签对象清空
}
//显示被隐藏的标签
function tiannetShowObject(){
for(var i = 0;i < arrTiannetHide.length;i ++){
//alert(arrTiannetHide[i]);
arrTiannetHide[i].style.visibility = "";
}
}

//清空
 function tiannetClear(){
 tiannetOutObject.value = "";
 tiannetHideControl();
}

//任意点击时关闭该控件
function document.onclick(){ 
 with(window.event.srcElement){ 
if (tagName != "INPUT" && getAttribute("Author") != "tiannet")
tiannetHideControl();
 }
}
//按ESC键关闭该控件
function document.onkeypress(){
if( event.keyCode == 27 ){
 tiannetHideControl();
}
}

wuxq0505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时间分钟选择框

功能预览： &lt;html&gt;&lt;script language=javascript src="datetwo.js"&gt;&lt;/script&gt;&lt;table align="center"&gt;&lt;tr&gt;&lt;td&gt;&lt;body&gt; (1)选择日
复制链接

扫一扫