js实现动态显示时间效果

一、使用JavaScript获取当前时间

在JavaScript中，可以使用new Date()方法创建一个Date对象，该对象获取到的是当前电脑系统的时间。可以将该对象保存到一个变量中，用于后续操作。

示例代码：

var currentTime = new Date();

二、格式化时间

为了在页面中展示时间，需要对时间进行格式化。JavaScript提供了许多方法来格式化时间，其中最常用的方法是以下几种：

• getFullYear(): 获取年份
• getMonth(): 获取月份（0-11）
• getDate(): 获取日期
• getDay(): 获取星期几（0-6）
• getHours(): 获取小时数（0-23）
• getMinutes(): 获取分钟数（0-59）
• getSeconds(): 获取秒数（0-59）

将上述方法获取到的值进行字符串拼接，就可以得到一个格式化后的时间。例如，要将时间格式化为YYYY-MM-DD HH:mm:ss，可以使用以下代码：

var year = currentTime.getFullYear();
var month = currentTime.getMonth() + 1;
var date = currentTime.getDate();
var hour = currentTime.getHours();
var minute = currentTime.getMinutes();
var second = currentTime.getSeconds();

var formatedTime = year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;

三、定时任务刷新时间

为了实现动态展示时间效果，需要实现一个定时任务，在规定的时间间隔内刷新页面上的时间。可以使用setInterval()方法来实现该定时任务。

示例代码：

setInterval(function() {
  var currentTime = new Date();

  var year = currentTime.getFullYear();
  var month = currentTime.getMonth() + 1;
  var date = currentTime.getDate();
  var hour = currentTime.getHours();
  var minute = currentTime.getMinutes();
  var second = currentTime.getSeconds();

  var formatedTime = year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;

  var timeBlock = document.getElementById('time');
  timeBlock.innerHTML = formatedTime;
}, 1000);

上述代码中，setInterval()方法的第一个参数为一个函数，该函数中包含了获取时间、格式化时间以及更新页面中展示时间的逻辑。第二个参数为时间间隔，单位为毫秒，即每个1000毫秒（1秒）执行一次定时任务。

在页面中添加一个id为time的元素，用于展示动态时间效果：

<div id="time"></div>

四、示例说明

下面提供两个示例，分别展示了使用JavaScript实现动态显示时间的效果。

1. 在页面顶部展示动态时间

页面顶部固定一个导航栏，将动态时间展示在导航栏中。

HTML代码：

<nav>
  <div class="logo">我的网站</div>
  <div class="time">
    <span>当前时间：</span>
    <span id="time"></span> 
  </div>
</nav>

CSS代码：

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.logo {
  font-size: 24px;
}

.time {
  font-size: 16px;
}

JavaScript代码：

setInterval(function() {
  var currentTime = new Date();

  var year = currentTime.getFullYear();
  var month = currentTime.getMonth() + 1;
  var date = currentTime.getDate();
  var hour = currentTime.getHours();
  var minute = currentTime.getMinutes();
  var second = currentTime.getSeconds();

  var formatedTime = year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;

  var timeBlock = document.getElementById('time');
  timeBlock.innerHTML = formatedTime;
}, 1000);

1. 动态显示时间，秒数以0/1闪烁

每隔1秒钟切换秒数的样式，使秒数呈现0/1闪烁的效果。

HTML代码：

<div id="time"></div>

CSS代码：

#time {
  font-size: 36px;
  text-align: center;
}

.blink {
  color: red;
}

JavaScript代码：

setInterval(function() {
  var currentTime = new Date();

  var year = currentTime.getFullYear();
  var month = currentTime.getMonth() + 1;
  var date = currentTime.getDate();
  var hour = currentTime.getHours();
  var minute = currentTime.getMinutes();
  var second = currentTime.getSeconds();

  var formatedTime = year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':';

  if(second % 2 === 0) {
    formatedTime += '<span>' + second + '</span>';
  } else {
    formatedTime += '<span class="blink">' + second + '</span>';
  }

  var timeBlock = document.getElementById('time');
  timeBlock.innerHTML = formatedTime;
}, 1000);

在每次刷新时间时，判断秒数是奇数还是偶数，从而决定是否为秒数添加类名为blink的样式，使秒数呈现闪烁效果。