`
xiangqian0505
  • 浏览: 322355 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

时间 分钟 选择框

时间 分钟 选择框 
阅读更多

功能预览：

 

 

 

 

 

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

 

<!--StartFragment --> 

//月、时、分选择下拉框
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;" '+
    'onclick="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;" '+
    'onclick="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();
}
}
 
分享到：
| webservices设置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery时间选择框

    本文将详细讲解如何利用jQuery创建一个功能完善的时间选择框，支持选择时、分、秒，以及相关的实现技巧。 首先，我们要了解jQuery时间选择框的基本概念。时间选择框通常是一个用户界面组件，允许用户通过交互来选取...

    带时间的日期选择框(JS)

    在网页开发中，用户界面经常需要提供一种方式让用户选择日期和时间，这通常通过日期选择框（DatePicker）实现。"带时间的日期选择框(JS)"是针对这种需求的一个JavaScript库，名为Datetime.js。这个库允许用户不仅...

    vue+elementui实现日期时间控件分钟固定步长（完整案例及效果图）.zip

    在提供的资源中，`index.vue`文件应该包含上述代码，而`固定步长.gif`则是一个动态图，展示了用户在选择日期时间时，分钟选择器只显示5分钟的步长，如00、05、10、15等，而不是默认的1分钟步长。这样的视觉效果可以...

    易语言日期时间框例程源码,易语言日期时间框模块

    在易语言中，日期时间框是一个常用的用户界面组件，用于显示和选择日期或时间。本模块提供了一套完整的日期时间框操作例程和源码，有助于开发者更好地理解和应用这一组件。 首先，"日期时间框模块"是易语言中用于...

    易语言日期时间框源码.zip

    日期时间框是易语言中用于处理日期和时间操作的一个控件，它允许用户选择或输入特定的日期和时间，并能进行相关的计算和格式化。 在易语言中，日期时间框提供了丰富的功能，如获取当前系统日期和时间、设置日期时间...

    易语言高级日期时间框

    在易语言中，"高级日期时间框"可能包含了丰富的功能，比如日期范围选择、时间精确到分钟甚至秒、自定义格式化日期时间显示等。开发者可以利用它来提供更加友好和便捷的用户交互体验。 `SendMessage`函数是Windows ...

    android自定义日期和时间的提示框

    在Android开发中，创建自定义的日期和时间提示框是一个常见的需求，这允许用户以直观的方式选择特定的日期和时间。对于初学者来说，理解如何实现这样的功能是至关重要的，因为这能提升用户体验并增强应用的交互性。...

    JQuery的时间提示框

    我们将获取当前时间，并将其显示在提示框内，同时设置一个定时器，每分钟更新一次时间。 ```javascript $(document).ready(function() { function updateTime() { var currentTime = new Date(); var hours = ...

    易语言编辑框模拟时间框源码.rar

    这类模拟时间框可能包括小时、分钟、秒的滚动条或下拉菜单，以及AM/PM切换等，用户可以通过交互选择特定时间，然后获取选中的时间值。 在这个"易语言编辑框模拟时间框源码.rar"压缩包中，包含的源码很可能是实现了...

    Vue2x的下拉时间选择器小时分钟秒支持灵活的时间格式

    在创建下拉时间选择器时，我们将定义一个Vue组件，包含小时、分钟和秒的选择器。 - 组件数据属性将包括当前选中的小时、分钟和秒，以及可能的格式选项。 - 使用`v-model`指令来双向绑定选定的时间值，使得当用户...

    强大的时间控件（精确到天、小时、分钟都可以）

    3. 日历视图：提供一个日历界面，用户可以点击日期和时间选择框，直观地选取日期和时间。 4. 数字键盘输入：允许用户直接输入时间值，但需要有良好的验证机制防止输入错误。 二、时间控件的精度 时间控件的精度取...

    javascript经典特效---准确的时间选择框.rar

    在网页设计中，时间选择框是常见的用户界面元素，它允许用户方便地选取时间，通常包括小时、分钟和秒。"准确的时间选择框"这个主题，涉及到JavaScript如何创建、定制和优化这种用户交互组件。 首先，要实现一个准确...

    qml实现简单的时间选择控件

    3. **分钟选择器**：类似地，创建两个按钮来调整分钟。注意需要考虑分钟跨过59的情况。 ```qml Button { text: "+" onClicked: { currentTime.minute += 1; if (currentTime.minute &gt;= 60) { currentTime....

    WPF带时间的日期选择控件

    在Windows Presentation Foundation (WPF)框架中，标准的DatePicker控件仅允许用户选择日期，而无法选择具体的时间。这在很多需要精确到小时、分钟甚至秒的场景下显得不足。"WPF带时间的日期选择控件"正是为了解决这...

    易语言自创日期时间框源码

    开发者需要考虑如何设计直观的界面，如日期选择的展示方式（日历视图、下拉框等）和时间选择的精度（小时、分钟、秒）。 6. **源码组织**：良好的代码组织能提高代码的可读性和可维护性。源码应该有清晰的结构，每...

    laydate自定义小时范围和分钟段

    例如，工作时间通常为8:00至17:00，且只允许选择0分钟和30分钟的整数倍。要实现这一功能，我们需要对laydate的配置进行定制。 1. **自定义小时范围**： laydate允许通过`max`和`min`属性来限制可选的日期或时间...

    jQuery日期时间选择器精确到分钟

    "jQuery日期时间选择器精确到分钟"就是这样一个功能，它允许用户在界面上精确地选择日期和时间，包括小时和分钟，以提高用户体验。 jQuery本身并不内置这样的日期时间选择器，但有很多插件可以帮助实现这一功能，...

    日期选择控件，时间选择，asp时间插入

    时间选择控件则更专注于小时、分钟和秒的选择，有时甚至包括时区。在ASP.NET中，可以使用`TimePicker`控件，或者结合JavaScript库，如Bootstrap datetimepicker或moment.js来实现。这些库通常会提供API，允许开发者...

    js日期时间选择

    对于日期时间选择框，通常我们会使用HTML的`&lt;input type="date"&gt;`和`&lt;input type="time"&gt;`元素，它们提供了基本的日期和时间选择功能。但这些原生元素的功能有限，无法满足复杂的定制需求，如精确到秒或者提供自定义...

Magicbox
Global site tag (gtag.js) - Google Analytics