<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>指定时间选择器</title>
	<style>
		body {
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
			font-size: 16px;
			line-height: 1.5;
			margin: 0;
			padding: 0;
		}
		.container {
			max-width: 600px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff;
			box-shadow: 0 5px 10px rgba(0,0,0,0.2);
		}
		h1 {
			font-size: 36px;
			margin-top: 0;
		}
		label {
			display: block;
			margin-bottom: 10px;
			font-size: 20px;
			font-weight: bold;
		}
		input[type="text"] {
			border: none;
			border-radius: 5px;
			padding: 10px;
			font-size: 20px;
			width: 100%;
			box-sizing: border-box;
			background-color: #f2f2f2;
			margin-bottom: 20px;
		}
		input[type="text"]:focus {
			outline: none;
			box-shadow: 0 0 5px rgba(0,0,0,0.2);
		}
		button {
			background-color: #4CAF50;
			color: #fff;
			border: none;
			border-radius: 5px;
			padding: 10px 20px;
			font-size: 20px;
			cursor: pointer;
		}
		button:hover {
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>指定时间选择器</h1>
		<label for="date">请选择时间:</label>
		<input type="text" value="" name="" id="date"><br/>
		<button type="button" onclick="alert('时间已选定')">确定</button>
	</div>
<pre><code>&lt;script&gt;
  // 获取当前时间
  var now = new Date();
  // 格式化时间
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var hour = now.getHours();
  var minute = '00';
  var formattedTime = year + '-' + addZero(month) + '-' + addZero(day) + ' ' + addZero(hour) + ':' + minute;
  // 将格式化后的时间赋值给input元素的value属性
  document.getElementById('date').value = formattedTime;

  // 补零函数,用于确保月份和日期的两位数格式
  function addZero(num) {
    if (num &lt; 10) {
      return '0' + num;
    } else {
      return num;
    }
  }
&lt;/script&gt;
</code></pre>
</body>
</html>
指定时间选择器 - 获取当前时间

原文地址: https://www.cveoy.top/t/topic/lHLT 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录