“通知公告”宽度 308px,高度 280px,右侧有通知时间,时间统一使用JavaScript实现获取当前时间,通知标题宽230px 显示在左侧,时间都靠右显示,如图 2 所示。
时间: 2024-02-25 08:58:44 浏览: 107
显示当前时间的程序。
好的,根据您的描述,可以使用以下HTML和CSS代码实现您的需求,同时结合JavaScript获取当前时间并显示在页面上:
HTML代码:
```html
<div class="notice">
<div class="title">通知标题</div>
<div class="time" id="notice-time"></div>
</div>
```
CSS代码:
```css
.notice {
width: 308px;
height: 280px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
position: relative;
}
.title {
width: 230px;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.time {
position: absolute;
top: 10px;
right: 10px;
font-size: 14px;
color: #999;
}
```
JavaScript代码:
```javascript
// 获取当前时间并格式化
function getCurrentTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var time = year + '-' + addZero(month) + '-' + addZero(date) + ' ' + addZero(hour) + ':' + addZero(minute) + ':' + addZero(second);
return time;
}
// 为个位数的时间补零
function addZero(num) {
if (num < 10) {
return '0' + num;
} else {
return num;
}
}
// 在页面上显示当前时间
function showCurrentTime() {
var timeEle = document.getElementById('notice-time');
var currentTime = getCurrentTime();
timeEle.innerHTML = currentTime;
}
// 每秒刷新时间
setInterval(showCurrentTime, 1000);
```
在页面中引入以上代码,即可实现您的需求。其中,getCurrentTime函数用于获取当前时间并格式化,addZero函数用于为个位数的时间补零,showCurrentTime函数用于在页面上显示当前时间,setInterval函数用于每秒刷新时间。您可以根据需要修改CSS样式和JavaScript代码。
阅读全文