一、选项卡
1.jpg
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
#box{
width: 400px;
height: 400px;
border:solid #888 1px;
border-radius: 5px;
overflow:hidden;
margin: 50px auto;
}
#title{
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px orangered solid;
}
#title span{
display: block;
text-align: center;
line-height: 50px;
flex: 1;
cursor: pointer;
}
#title span.active{
background: orangered;
color: white;
}
#content{
position: relative;
}
#content p{
position: absolute;
top: 10px;
left: 10px;
opacity: 0;
transition: all .2s;
}
#content p.active{
opacity: 1;
}
</style>
</head>
<body>
<div id="box">
<div id="title">
<span class="active">新闻</span>
<span>动态</span>
<span>通知</span>
</div>
<div id="content">
<p class="active">新闻内容</p>
<p>动态</p>
<p>通知</p>
</div>
</div>
<script>
var _spans = document.getElementsByTagName("span")
var _p = document.getElementsByTagName("p")
//第一个
_spans[0].onclick = function () {
for (var i = 0; i < _spans.length; i++) {
_spans[i].className = ""
}
_spans[0].className = "active"
for (var i =0; i <_p.length; i++) {
_p[i].style.opacity = 0
}
_p[0].style.opacity = 1
}
//第二个
_spans[1].onclick = function () {
for (var i = 0; i < _spans.length; i++) {
_spans[i].className = ""
}
_spans[1].className = "active"
for (var i =0; i <_p.length; i++) {
_p[i].style.opacity = 0
}
_p[1].style.opacity = 1
}
//第三个
_spans[2].onclick = function () {
for (var i = 0; i < _spans.length; i++) {
_spans[i].className = ""
}
_spans[2].className = "active"
for (var i =0; i <_p.length; i++) {
_p[i].style.opacity = 0
}
_p[2].style.opacity = 1
}
</script>
</body>
</html>
二、数字时钟
2.jpg
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#clock{font-size:120px;}
</style>
</head>
<body>
<div id="clock">0000-00-00 00:00:00</div>
<script>
window.onload = function() {
// 获取当前时间的函数
function getTime() {
var date = new Date()
return date.getFullYear() + "-"
+ (date.getMonth() + 1).toString().padStart(2, "0") + "-"
+ date.getDate().toString().padStart(2, "0") + " "
+ date.getHours().toString().padStart(2, "0") + ":"
+ date.getMinutes().toString().padStart(2, "0")+":"
+ date.getSeconds().toString().padStart(2, "0")
}
// 数字时钟
var _clock = document.getElementById("clock")
!function() {
setInterval(function() {
var result = getTime()
_clock.innerText = result
}, 1000)
}();
}
</script>
</body>
网友评论