效果图
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab栏切换</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/TabChange.css">
</head>
<body>
<div class="box">
<div class="tab">
<ul>
<li>当前时间</li>
<li>认识时间</li>
<li>particular day</li>
</ul>
</div>
<div class="content nowTime" id="nowTime">
<p>现在是：</p>
<p>xxxx年xx月xx日</p>
<p>星期x</p>
<p>xx：xx：xx</p>
</div>
<div class="content meetTime" id="meetTime">
<p>与你相识于：</p>
<p>xxxx年xx月xx日</p>
<p>星期x</p>
<p>xx：xx</p>
</div>
<div class="content Particular" id="Particular">
<p>Particular：</p>
<p>xxxx年xx月xx日</p>
<p>星期x</p>
<p>xx：xx</p>
</div>
</div>
<script src="../js/TabChange.js"></script>
</body>
</html>
css代码
body {
background-image: url(../images/background9.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.box {
/* 定位 */
/* 居中 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 500px;
/* background-color: brown; */
}
.tab {
float: left;
width: 150px;
height: 500px;
background-color: rgba(134, 132, 129, 0.5);
}
.tab li {
margin: 25px 0px;
width: auto;
height: 50px;
border-radius: 10%;
background-color: rgba(90, 92, 88, 0.3);
text-align: center;
line-height: 50px;
}
.tab li:hover {
background-color: rgba(90, 92, 88, 0.6);
}
.content {
float: left;
width: 450px;
height: 500px;
background-color: rgba(193, 204, 204, 0.3);
}
.content p {
margin: 15px 0px;
text-align: center;
font-size: 45px;
font-family: '方正舒体';
color: #000;
}
.content p:first-child {
margin-top: 110px;
}
/* 默认当前时间可见 */
.nowTime {
display: block;
}
.meetTime {
display: none;
}
.Particular {
display: none;
}
js代码
// tab绑定事件
var lis = document.querySelector('.tab').children[0].querySelectorAll('li');
for ( var i=0; i<lis.length; i++ ) {
if ( i==0 ) {
lis[i].onclick = function() {
displayNone();
var nowTime = document.getElementById('nowTime');
nowTime.style.display = 'block';
}
}
if ( i==1 ) {
lis[i].onclick = function() {
displayNone();
var meetTime = document.getElementById('meetTime');
meetTime.style.display = 'block';
}
}
if( i==2 ) {
lis[i].onclick = function() {
displayNone();
var Particular = document.getElementById('Particular');
Particular.style.display = 'block';
}
}
}
// 获取当前时间
function updateNowTime() {
var nowTime = document.getElementById('nowTime');
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
month++;
if ( month < 10 ) month = '0'+month;
var day = date.getUTCDate();
if ( day < 10 ) day = '0'+day;
var weekday = date.getUTCDay();
switch ( weekday ) {
case 1 :
weekday = '星期一';
break;
case 2 :
weekday = '星期二';
break;
case 3 :
weekday = '星期三';
break;
case 4 :
weekday = '星期四';
break;
case 5 :
weekday = '星期五';
break;
case 6 :
weekday = '星期六';
break;
case 7 :
weekday = '星期天';
break;
}
var hour = date.getHours();
if ( hour < 10 ) hour = '0'+hour;
var minute = date.getUTCMinutes();
if ( minute < 10 ) minute = '0'+minute;
var second = date.getUTCSeconds();
if ( second < 10 ) second = '0'+second;
var ps = nowTime.children;
console.log(ps);
for ( var j=1; j<ps.length; j++ ) {
if ( j==1 ) {
ps[j].innerHTML = year+'年'+month+'月'+day+'日';
}
if ( j==2 ) {
ps[j].innerHTML = weekday;
}
if ( j==3 ) {
ps[j].innerHTML = hour+':'+minute+':'+second;
}
}
}
setInterval( updateNowTime, 1000 );
updateNowTime();
// 所有content不可见
function displayNone() {
var contents = document.querySelectorAll('.content');
console.log(contents);
for ( var i=0; i<contents.length; i++ ) {
contents[i].style.display = 'none';
}
}