效果

实现思路

1.创建myTime()函数， 获取时间Date对象

var date = new Date();

2.获取元素（此处通过类名获取,返回一个元素的集合，节点列表）

var year = document.getElementsByClassName(‘year‘);

3.获取时间

var date = new Date();

date .toLocaleDateString(); //获取当前日期

date .toLocaleString( ); //获取日期与时间

date .getYear(); //获取当前年份(2位)

date .getFullYear(); //获取完整的年份(4位)

date .getMonth(); //获取当前月份(0-11,0代表1月)

date .getDate(); //获取当前日(1-31)

date .getDay(); //获取当前星期X(0-6,0代表星期天)

date .getTime(); //获取当前时间(从1970.1.1开始的毫秒数)

date .getHours(); //获取当前小时数(0-23)

date .getMinutes(); //获取当前分钟数(0-59)

date .getSeconds(); //获取当前秒数(0-59)

date .getMilliseconds(); //获取当前毫秒数(0-999)

Date.parse(stringDate);//将string类型的时间转换成距离1970年1月1日午夜的毫秒数。

Date.now()，以毫秒的形式返回当前时间

4.创建定时器，每一秒钟运行一次

			setInterval(function() {
				myTime()
			}, 1000);

实现代码

1.html

		<div class="Time">
			<span>
				现在是
			</span>
			<span class="year">

			</span>
			<span>
				年
			</span>
			<span class="month">

			</span>
			<span>
				月
			</span>
			<span class="utc">

			</span>
			<span>
				日
			</span>
			<span class="hours">

			</span>
			<span>
				时
			</span>
			<span class="minutes">

			</span>
			<span>
				分
			</span>
			<span class="seconds">

			</span>
			<span>
				秒
			</span>
			<span class="aaa">
				
			</span>
		</div>
		

2.css

	* {
				margin: 0px;
				padding: 0px;
			}

			.Time {
				padding: 10px;
				text-align: center;
				background: skyblue;
			}

			.Time span {
				/* 通过margin调整span字体间的距离 */
				margin-left: -3px;
				color: #fff;
				font-weight: bold;
			}

3.js

function myTime() {
				// 创建对象
				var date = new Date();
				var year = document.getElementsByClassName(‘year‘);
				var month = document.getElementsByClassName(‘month‘);
				var utc = document.getElementsByClassName(‘utc‘);
				var hours = document.getElementsByClassName(‘hours‘);
				var minutes = document.getElementsByClassName(‘minutes‘);
				var seconds = document.getElementsByClassName(‘seconds‘);
				var aaa = document.getElementsByClassName(‘aaa‘);

				// 获取年份
				year[0].innerHTML = date.getFullYear();
				// 月
				month[0].innerHTML = date.getMonth() + 1;
				// 日
				utc[0].innerHTML = date.getUTCDate();
				// 时
				hours[0].innerHTML = date.getHours();
				// 分
				minutes[0].innerHTML = date.getMinutes();
				// 秒
				seconds[0].innerHTML = date.getSeconds();

			}
			// 定时器,每一秒运行一次
			setInterval(function() {
				myTime()
			}, 1000);

还可以直接用获取日期与时间的方法

				//获取日期与时间
				date.toLocaleString();
				//只获取年月日
				date.toLocaleDateString();

获取当前时间