本文實例講述了JS+CSS3實現的類似于蘋果iwatch計時器特效。分享給大家供大家參考。具體如下：
帶時間的jQuery日期控件代碼是一款基于jQueryUI實現的，可自定義日期插件語言，這個日期控件的亮點就在于選擇的時間可精確到分鐘。
運行效果圖： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的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);">基礎信息</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="開始時間≥當前時間" title="開始時間≥當前時間" readonly="readonly" style="cursor:pointer;"/> <input name="act_stop_time" type="text" class="text-box" value="" placeholder="結束時間>開始時間" title="結束時間>開始時間" 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帶時間的日期控件代碼，希望大家可以喜歡。
新聞熱點
疑難解答
