time.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!-- 时间设置模块 -->
  2. <div class="layui-card">
  3. <div class="layui-card-header">时间设置(建议本地服使用)</div>
  4. <div class="layui-card-body">
  5. <form class="layui-form" id="timeForm">
  6. <!-- 日期和时间输入框(同一行) -->
  7. <div class="layui-form-item">
  8. <label class="layui-form-label">日期:</label>
  9. <div class="layui-input-inline">
  10. <input type="text" id="datetimeInput" placeholder="yyyy-MM-dd HH:mm:ss" class="layui-input"
  11. autocomplete="off">
  12. </div>
  13. <div class="layui-input-inline">
  14. <button class="layui-btn layui-btn-normal" type="button" onclick="submitDateTime()">设置日期</button>
  15. </div>
  16. <label class="layui-form-label">时间:</label>
  17. <div class="layui-input-inline">
  18. <input type="text" id="timeInput" placeholder="HH:mm:ss" class="layui-input" autocomplete="off">
  19. </div>
  20. <div class="layui-input-inline">
  21. <button class="layui-btn layui-btn-normal" type="button" onclick="submitTime()">设置时间</button>
  22. </div>
  23. </div>
  24. <!-- 时间偏移量输入框和按钮 -->
  25. <div class="layui-form-item">
  26. <label class="layui-form-label">时间偏移:</label>
  27. <div class="layui-input-inline">
  28. <input type="number" id="timeOffsetInput" placeholder="时间偏移量(秒)" class="layui-input"
  29. autocomplete="off">
  30. </div>
  31. <div class="layui-input-inline">
  32. <button class="layui-btn layui-btn-normal" type="button" onclick="submitTimeOffset()">设置偏移</button>
  33. </div>
  34. <div class="layui-input-inline">
  35. <button class="layui-btn layui-btn-danger" type="button" onclick="resetTime()">重置时间</button>
  36. </div>
  37. </div>
  38. </form>
  39. </div>
  40. </div>
  41. <script>
  42. // 使用 Layui 的事件监听机制
  43. layui.use(['form', 'laydate'], function () {
  44. var form = layui.form;
  45. var laydate = layui.laydate;
  46. var layer = layui.layer;
  47. // 初始化日期时间选择器(日期和时间)
  48. laydate.render({
  49. elem: '#datetimeInput',
  50. type: 'datetime',
  51. format: 'yyyy-MM-dd HH:mm:ss',
  52. trigger: 'click'
  53. });
  54. // 初始化时间选择器(仅时间)
  55. laydate.render({
  56. elem: '#timeInput',
  57. type: 'time',
  58. format: 'HH:mm:ss',
  59. trigger: 'click'
  60. });
  61. });
  62. // 设置日期时间
  63. function submitDateTime() {
  64. var datetimeValue = $("#datetimeInput").val();
  65. if (!datetimeValue) {
  66. layer.msg("请选择日期时间", { icon: 2 });
  67. return;
  68. }
  69. var params = [
  70. "date",
  71. datetimeValue
  72. ];
  73. toTimeSubmitForm(params); // 调用统一的 submitForm 方法
  74. }
  75. // 设置时间
  76. function submitTime() {
  77. var timeValue = $("#timeInput").val();
  78. if (!timeValue) {
  79. layer.msg("请设置时间", { icon: 2 });
  80. return;
  81. }
  82. var params = [
  83. "set",
  84. timeValue
  85. ];
  86. toTimeSubmitForm(params); // 调用统一的 submitForm 方法
  87. }
  88. // 重置时间
  89. function resetTime() {
  90. $("#datetimeInput").val("");
  91. $("#timeInput").val("");
  92. $("#timeOffsetInput").val("");
  93. var params = [
  94. "reset"
  95. ];
  96. toTimeSubmitForm(params);
  97. }
  98. // 设置时间偏移量(单位为秒)
  99. function submitTimeOffset() {
  100. var timeOffsetValue = $("#timeOffsetInput").val();
  101. if (!timeOffsetValue) {
  102. layer.msg("请输入时间偏移量(秒)", { icon: 2 });
  103. return;
  104. }
  105. // 验证是否为数值
  106. if (isNaN(timeOffsetValue)) {
  107. layer.msg("偏移量必须为数值(秒)", { icon: 2 });
  108. return;
  109. }
  110. var params = [
  111. "offset",
  112. timeOffsetValue
  113. ];
  114. toTimeSubmitForm(params); // 调用统一的 submitForm 方法
  115. }
  116. // 提交表单
  117. function toTimeSubmitForm(params) {
  118. var commond = "/gm time " + params.join(" ");
  119. submitForm(commond); // 调用统一的 submitForm 方法
  120. }
  121. </script>