Heim > Artikel > Web-Frontend > jQuery-Datumssteuerung mit Timecode-Sharing_jquery

jQuery-Datumssteuerung mit Timecode-Sharing_jquery

WBOYOriginal: 2016-05-16 15:42:221231Durchsuche

Das Beispiel in diesem Artikel beschreibt die Spezialeffekte, die dem von JS CSS3 implementierten Apple iwatch-Timer ähneln. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der jQuery-Datumssteuerungscode mit Uhrzeit ist eine anpassbare Datums-Plug-in-Sprache, die auf Basis von jQueryUI implementiert ist. Der Clou dieser Datumssteuerung ist, dass die ausgewählte Zeit auf die Minute genau sein kann.
运行效果图: ------------ --------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.

Der jQuery-Datumskontrollcode mit der für Sie freigegebenen Zeit lautet wie folgt

Das Obige ist der mit Ihnen geteilte jQuery-Datumskontrollcode. Ich hoffe, er gefällt Ihnen.

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Codefreigabe für TAB-Tab-Schiebetür mit abgerundetem Rand, implementiert durch js css (2 Modelle)_Javascript-KenntnisseNächster Artikel：Codefreigabe für TAB-Tab-Schiebetür mit abgerundetem Rand, implementiert durch js css (2 Modelle)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen