注：文章原地址：blog.csdn.net/weixin_5237…
HTML、CSS、JS实现炫酷太空人表盘
使用最原始前端语言，简单实现一个炫酷太空人表盘。因为实现过程本身过于简单，下面就直接放上成果图片和部分代码。
- 效果图展示
- HTML代码
<html>
<head>
<title>炫酷太空人表盘</title>
<meta charset="UTF-8">
<link href="./style.css" rel="stylesheet">
<script src="./timeGeneration.js"></script>
</head>
<body>
<div class="time">
<div class="time-h-h" id="hh"></div>
<div class="time-h-l" id="hl"></div>
<div class="time-rect"></div>
<div class="time-m-h" id="mh"></div>
<div class="time-m-l" id="ml"></div>
<div class="time-s-h" id="sh"></div>
<div class="time-s-l" id="sl"></div>
<div class="human"></div>
<div class="date" id="date"></div>
<div class="calendar" id="calendarDate"></div>
</div>
</body>
<script>
function WatchMeter() {
this._initDom() // 初始化dom
this.update() // 更新
this.date = new TimeGeneration()
}
// 修改原型
WatchMeter.prototype = {
constructor: WatchMeter,
// 初始化Dom
_initDom: function () {
this.elem = {}
this.elem.hh = document.getElementById('hh')
this.elem.hl = document.getElementById('hl')
this.elem.mh = document.getElementById('mh')
this.elem.ml = document.getElementById('ml')
this.elem.sh = document.getElementById('sh')
this.elem.sl = document.getElementById('sl')
this.elem.date = document.getElementById('date')
this.elem.calendarDate = document.getElementById('calendarDate')
},
// 更新
update: function () {
var _this = this
setInterval(function () {
_this._render(_this.date.getDate(), _this.date.getCalendarDate(), _this.date.getTime())
}, 1000)
},
// 渲染
_render: function (date, calendarDate, time) {
this._setNumberImage(this.elem.hh, time[0])
this._setNumberImage(this.elem.hl, time[1])
this._setNumberImage(this.elem.mh, time[2])
this._setNumberImage(this.elem.ml, time[3])
this._setNumberImage(this.elem.sh, time[4])
this._setNumberImage(this.elem.sl, time[5])
this.elem.date.innerText = date[2] + " " +date[0] + "/" +date[1]
this.elem.calendarDate.innerText = calendarDate
},
// 设置数字
_setNumberImage: function (elem, value) {
elem.style.backgroundImage = "url(./img/" + value + ".png)";
}
}
var myWatchMeter = new WatchMeter()
</script>
</html>
如有需要
