<!DOCTYPE html>
<html lang="zh-CN">
<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>
</style>
</head>
<body>
<div id="box">
<div class="box2">
<h3>点击我会出现时间</h3>
</div>
</div>
<script>
// 用来描述程序的行为和状态的改变,触发一系列回调函数的响应
// 事件源.addEventListener('事件类型',回调函数)
// 控制整体样式
let box = document.getElementById('box')
box.style.cssText = ('width: 200px; height: 200px; background-color: aqua; margin: 100px auto;transition: all .4s;text-align: center; line-height: 200px;')
let box2 = document.querySelector('.box2')
box2.style.display = 'none'
let i = true
// 控制时间
setInterval(function () {
let time = {
author: 'jikel',
date: new Date(),
year: function () {
return this.date.getFullYear()
},
month: function () {
let month1 = this.date.getMonth() + 1
month1 = month1 < 10 ? '0' + month1 : month1
return month1
},
week: function () {
return this.date.getDate()
},
day: function () {
let day1 = this.date.getDate()
day1 = day1 < 10 ? '0' + day1 : day
return day1
},
h: function () {
let h1 = this.date.getHours()
h1 = h1 < 10 ? '0' + h1 : h1
return h1
},
f: function () {
let f1 = this.date.getMinutes()
f1 = f1 < 10 ? "0" + f1 : f1
return f1
},
s: function () {
let s1 = this.date.getSeconds()
s1 = s1 < 10 ? "0" + s1 : s1
return s1
}
}
box2.innerHTML = `今日时间 -- ${time.h()}:${time.f()}:${time.s()}`
}, 1000)
// 点击事件
box.addEventListener('click', function () {
if (i) {
box.style.borderRadius = '50px'
box.style.boxShadow = ' 0px 5px 10px 3px #D1D1D1'
box.style.backgroundColor = 'gold'
box.style.transform = 'scale(1.5)'
box2.style.display = 'block'
i = false
} else {
box.style.borderRadius = '0px'
box.style.boxShadow = ' 0px 0px 0px 0px #D1D1D1 '
box.style.backgroundColor = 'aqua'
box.style.transform = 'scale(1)'
box2.style.display = 'none'
i = true
}
})
</script>
</body>
</html>