EasyUI jQuery timespinner widget

在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个时间旋转器。TimeSpinner widget结合了一个可编辑的文本框和两个小按钮，让用户通过增加或减少时间来选择一个时间值。

EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。

EasyUI for jQuery的下载：

https://www.jeasyui.com/download/index.php

语法:

<input class="easyui-timespinner">

属性:

separator。它是小时、分钟和秒之间的分隔符。
showSeconds。它定义了是否显示第二个信息。
hour12：它定义了是否以12小时格式显示。
ampm: 它是显示在输入框上的AM/PM标签。
highlight：这是最初必须突出显示的字段。

方法:

options。它返回选项对象。
setValue。它设置timespinner的值。
getHours。它获取当前的小时值。
getMinutes。它获取当前的分钟值。
getSeconds。它获取当前的秒值。

CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本。

<script type=”text/javascript” src=”jquery.min.js”></script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

示例 1:

<html>
<head>
  
  <!-- EasyUI specific stylesheets-->
  <link rel="stylesheet"
        type="text/css"
        href="themes/metro/easyui.css">
  
  <link rel="stylesheet" 
        type="text/css" 
        href="themes/mobile.css">
  
  <link rel="stylesheet" 
        type="text/css"
        href="themes/icon.css">
  
  <!-- jQuery library -->
  <script type="text/javascript" 
          src="jquery.min.js">
  </script>
  
  <!-- jQuery libraries of EasyUI -->
  <script type="text/javascript"
          src="jquery.easyui.min.js">
  </script>
  
  <!-- jQuery library of EasyUI Mobile -->
  <script type="text/javascript"
          src="jquery.easyui.mobile.js">
  </script>
  
  <script type="text/javascript">
    $('#gfg').timespinner({
      hour12: false
    })
  </script>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <h3>EasyUI jQuery timespinner widget</h3>
  
  <!-- Define the TimeSpinner using markup -->
  <input id="gfg" class="easyui-timespinner">
</body>
</html>

输出:

EasyUI jQuery timespinner widget

示例 2:

<html>
<head>
  
  <!-- EasyUI specific stylesheets-->
  <link rel="stylesheet"
        type="text/css"
        href="themes/metro/easyui.css">
  
  <link rel="stylesheet" 
        type="text/css" 
        href="themes/mobile.css">
  
  <link rel="stylesheet"
        type="text/css"
        href="themes/icon.css">
  
  <!--jQuery library -->
  <script type="text/javascript"
          src="jquery.min.js">
  </script>
  
  <!--jQuery libraries of EasyUI -->
  <script type="text/javascript"
          src="jquery.easyui.min.js">
  </script>
  
  <!--jQuery library of EasyUI Mobile -->
  <script type="text/javascript" 
          src="jquery.easyui.mobile.js">
  </script>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <h3>EasyUI jQuery timespinner widget</h3>
  
  <!-- Define the element to be used 
  as the TimeSpinner -->
  <input id='gfg'>
  <script type="text/javascript">
  
    // Initialize the EasyUI TimeSpinner
    $('#gfg').timespinner({
      hour12: false
    });
  </script>
</body>
</html>

输出:

EasyUI jQuery timespinner widget