指定时间选择器 - 获取当前时间
<!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><script>
// 获取当前时间
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 < 10) {
return '0' + num;
} else {
return num;
}
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lHLT 著作权归作者所有。请勿转载和采集!