jquery 选择时间(小时)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
 <title>select hours1</title>
 <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>
 <script language="javascript">
     $(function(){
             var jq_hour_start_select = $(‘#hour_start_select‘);
             var jq_hour_end_select = $(‘#hour_end_select‘);
             $(‘#statistics_btn‘).bind("click",function(){
                     if(‘‘==jq_hour_start_select.val()){
                         alert(‘请选择开始的时间!!‘);
                         jq_hour_start_select.focus();
                         return;
                     }
                     if(‘‘==jq_hour_end_select.val()){
                             alert(‘请选择结束的时间!!‘);
                             jq_hour_end_select.focus();
                             return;
                     }
                     confirm(jq_hour_start_select.val()+‘---‘+jq_hour_end_select.val());

                 });
                 jq_hour_start_select.bind(‘change‘,function(){
                         //记录先前hour_end_select值
                         var  hour_end_select_val = jq_hour_end_select.val();

                         //    先清空,再添加符合条件的
                         if(‘‘!=jq_hour_start_select.val()){
                             jq_hour_end_select.empty();
                             jq_hour_end_select.append($(‘<option value="">请选择</option>‘));
                             for(var i=parseInt(jq_hour_start_select.val())+1;i<25;i++ ){
                                 jq_hour_end_select.append($(‘<option value=‘+i+‘>‘+i+‘时</option>‘));
                             }
                         }

                             //赋予先前选中的值
                             jq_hour_end_select.val([hour_end_select_val]);
                 });
                 jq_hour_end_select.bind(‘change‘,function(){
                         //记录先前hour_start_select值
                         var  hour_start_select_val = jq_hour_start_select.val();

                         //    先清空,再添加符合条件的
                         if(‘‘!=jq_hour_end_select.val()){
                             jq_hour_start_select.empty();
                             jq_hour_start_select.append($(‘<option value="">请选择</option>‘));
                             for(var i=0;i < parseInt(jq_hour_end_select.val());i++ ){
                                 jq_hour_start_select.append($(‘<option value=‘+i+‘>‘+i+‘时</option>‘));
                             }
                         }

                     //赋予先前选中的值
                         jq_hour_start_select.val([hour_start_select_val]);

                 });

         });

     </script>
</head>
<body>
  <div id="mode_div">
      按天统计:
          <select id=‘hour_start_select‘>
              <option value=‘‘>请选择</option>
              <option value=‘0‘>0时</option>
              <option value=‘1‘>1时</option>
              <option value=‘2‘>2时</option>
              <option value=‘3‘>3时</option>
              <option value=‘4‘>4时</option>
              <option value=‘5‘>5时</option>
              <option value=‘6‘>6时</option>
              <option value=‘7‘>7时</option>
              <option value=‘8‘>8时</option>
              <option value=‘9‘>9时</option>
              <option value=‘10‘>10时</option>
              <option value=‘11‘>11时</option>
              <option value=‘12‘>12时</option>
              <option value=‘13‘>13时</option>
              <option value=‘14‘>14时</option>
              <option value=‘15‘>15时</option>
              <option value=‘16‘>16时</option>
              <option value=‘17‘>17时</option>
              <option value=‘18‘>18时</option>
              <option value=‘19‘>19时</option>
              <option value=‘20‘>20时</option>
              <option value=‘21‘>21时</option>
              <option value=‘22‘>22时</option>
              <option value=‘23‘>23时</option>
          </select>
          至
          <select id="hour_end_select">
              <option value=‘‘>请选择</option>
              <option value=‘1‘>1时</option>
              <option value=‘2‘>2时</option>
              <option value=‘3‘>3时</option>
              <option value=‘4‘>4时</option>
              <option value=‘5‘>5时</option>
              <option value=‘6‘>6时</option>
              <option value=‘7‘>7时</option>
              <option value=‘8‘>8时</option>
              <option value=‘9‘>9时</option>
              <option value=‘10‘>10时</option>
              <option value=‘11‘>11时</option>
              <option value=‘12‘>12时</option>
              <option value=‘13‘>13时</option>
              <option value=‘14‘>14时</option>
              <option value=‘15‘>15时</option>
              <option value=‘16‘>16时</option>
              <option value=‘17‘>17时</option>
              <option value=‘18‘>18时</option>
              <option value=‘19‘>19时</option>
              <option value=‘20‘>20时</option>
              <option value=‘21‘>21时</option>
              <option value=‘22‘>22时</option>
              <option value=‘23‘>23时</option>
              <option value=‘24‘>24时</option>
          </select>
            <button id="statistics_btn">统计</button>
  </div>
</body>
</html>

  

时间: 2024-10-25 15:44:39

jquery 选择时间(小时)的相关文章

HTML5

一.新增标签 1.结构标签 header  表示页面中一个内容区块或者整体内容的标题 nav    表示链接导航部分 footer   表示整个页面或者页面中一个内容区块的脚注 一般来说 他会包含创作作者的姓名 文章创作的日期以及创作者的联系信息 section  定义文档或应用程序的一区段  如文章章节 页眉 也叫或者文件的其他部分 article  文档中的一块独立的内容  写文章 aside  侧边栏  制作滚动广告的内容 2. 对话标签 dialog  定义对话  配合 dt dd 使用

一个小时学会jQuery

目录 一.jQuery简介与第一个jQuery程序 1.1.jQuery简介 1.2.jQuery特点 1.3.jQuery版本 1.4.获得jQuery库 1.5.第一个jQuery程序 二.jQuery对象和DOM对象 2.1.DOM对象 2.2.jQuery对象 2.3.DOM转换成jQuery对象 2.4.jQuery对象转换成DOM对象 2.5.DOM对象与jQuery对象区别 三.常用选择器 3.1. 选择器和包装集 3.2.   基本选择器 3.2.1.通过id获取元素 3.2.2

****timeago.js插件:jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例

前端 时间个性化 插件 jquery.timeago.js 关键词 : 时间格式化 刚刚 N分钟前 N小时前 N天前 N月前 N年前 MM-dd hh:mm  或者  yyyy-MM-dd 前端: <span class="time" title="2016-07-23 12:02:32"></span> 用法: $(".time").timeago(); 插件: jquery.timeago.js !function (

大三在校生的传智120天的1200小时.net(八) 关于JQuery

匿名函数在尤其重要 1,jQuery就是js语法写的一些函数,内部仍然用js实现的,所以并不是代替js的.使用jQuery的代码,编写的jQuery的拓展插件仍需要js技术,jq本身就是一堆js函数:write less do more 2,要向使用jq的方法,必须通过$对象.只有普通的dom封装成jq对象,才能调用jq各种方法 $是jq简写,代码中可以使用jQuery代替$ 3,写注释,后续jq代码会越来越多,注释是必要的 4,jq文件普通版本是开发使用,压缩版本是发布使用 5,dom对象可以

大三在校生的传智120天的1200小时.net(十) 关于JQuery(最后一点动画效果*)

1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一个高亮度的(比如普通样式按钮坐标为100,100. 高亮样式按钮坐标为120,120),当鼠标经过,js改变css background-position:100 -100;动态变为120 -120.(至于为什么当你在很多网站要保存一个小图标,却保存成了很大的图片,就是因为网站的图标显示离痛了bac

jquery实现前台倒计时。应用下单24小时后自动取消该订单

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <title>testc</title> &l

大三在校生的传智120天的1200小时.net(九) 关于JQuery

整理jq基础常用(过于基础别喷): 1, $('div input[name]').css('','');//获取层中有name属性的标签 $('div input[name=txtname]').css('','');//获取层中有name属性的,并且属性值为txtname的标签 $('div input[name!=txtname]').css('','');//获取层中有name属性的,并且属性值不为txtname的input标签 $('div input[name^=n]').css('

Js Jquery 时间控件显示小时 分钟 秒

// ui.js 自带的datepicker 插件只能显示日期不能显示时分秒  使用dateTimePicker可以显示时间 效果图: 首先需要引用 js和css 注意 ui.js的顺序要在slide 和timepicker 前面 否者无法运行 <script src="../Scripts/jquery-1.7.1.min.js"></script> <script src="../Content/themes/timepicker/js/jq

精确到秒的JQuery日期控件

项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下,以供需要的朋友参考. 效果图如下: 首先在页面中引用一下库: <link type="text/css" href="css/jquery-ui-1.8.17.custom.css" rel="stylesheet" /> <lin