超级好看菱形百度搜索栏代码：带实时时间显示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超级好看菱形百度搜索栏代码：带实时时间显示</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
<pre><code> .search-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background-color: #fff;
border-radius: 50%;
border: 5px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
padding-top: 100px;
}
.search-container input[type='text'] {
width: 300px;
height: 40px;
padding: 5px;
font-size: 16px;
border: none;
outline: none;
border-radius: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.search-container input[type='submit'] {
width: 100px;
height: 40px;
background-color: #3385ff;
color: #fff;
font-size: 16px;
border: none;
outline: none;
border-radius: 20px;
cursor: pointer;
}
.time-display {
font-size: 36px;
color: #666;
}
</style>
</code></pre>
</head>
<body>
<div class='search-container'>
<form action='https://www.baidu.com/s' method='get' target='_blank'>
<input type='text' name='wd' placeholder='请输入搜索内容' autocomplete='off'>
<br>
<input type='submit' value='搜索'>
</form>
<div class='time-display' id='timeDisplay'></div>
</div>
<pre><code><script>
function updateTime() {
var timeDisplay = document.getElementById('timeDisplay');
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var timeString = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
timeDisplay.textContent = timeString;
}
updateTime();
setInterval(updateTime, 1000);
</script>
</code></pre>
</body>
</html>
<p>本代码通过使用HTML和CSS创建一个圆形的搜索栏，搜索栏内部包含一个输入框和一个搜索按钮。搜索栏的样式通过CSS进行设置，使其看起来非常好看。搜索功能由form标签和input标签的type为'submit'来实现，点击搜索按钮时会跳转到百度搜索页面并显示搜索结果。实时时间的显示通过JavaScript的Date对象和定时器实现，每秒更新一次时间并显示在页面上。</p>
原文地址: https://www.cveoy.top/t/topic/lEhx 著作权归作者所有。请勿转载和采集!