本文實例講述了JS+CSS3實現(xiàn)的類似于蘋果iwatch計時器特效。分享給大家供大家參考。具體如下：
帶時間的jQuery日期控件代碼是一款基于jQueryUI實現(xiàn)的，可自定義日期插件語言，這個日期控件的亮點就在于選擇的時間可精確到分鐘。
運行效果圖： -------------------查看效果下載源碼-------------------

小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jQuery帶時間的日期控件代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery帶時間的日期控件代碼</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/admin.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-zh-CN.js"></script>
<style type="text/css">
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
</style>
</head>
<body>
<div class="wrap">
<ul class="sub-nav">
 <li ><a href="javascript:void(0);">基礎(chǔ)信息</a></li>     
 </ul> 
 <ul class="doc-set">
 <li>
 <div class="doc-dt">
  <p>活動時間</p>
 </div>
 <div class="doc-dd">
  <input name="act_start_time" type="text" class="text-box" value="" placeholder="開始時間≥當(dāng)前時間" title="開始時間≥當(dāng)前時間" readonly="readonly" style="cursor:pointer;"/>
  <input name="act_stop_time" type="text" class="text-box" value="" placeholder="結(jié)束時間>開始時間" title="結(jié)束時間>開始時間" readonly="readonly" style="cursor:pointer;"/>
 </div>
 </li> 
</ul>
</div>
<script type="text/javascript">
 $( "input[name='act_start_time'],input[name='act_stop_time']" ).datetimepicker();
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

以上就是為大家分享的jQuery帶時間的日期控件代碼，希望大家可以喜歡。

您可能感興趣的文章: