点击上方蓝字"优派编程"选择“加为星标”，第一时间关注原创干货
基于SVG+JAVASCRIPT实现网红华为太空人表盘GT2（附有源码）
https://www.fang1688.cn/study-code/1775.html
基于SVG+JavaScript实现网红华为太空人表盘GT2
引入代码
-
<link href=
"./assets/css/style.css" rel=
"stylesheet">
-
<script src=
"./assets/js/timeGeneration.js"></script>
HTML代码
-
<div class=
"jun-meter">
-
<div class=
"jun-time-h-h" id=
"hh"></div>
-
<div class=
"jun-time-h-l" id=
"hl"></div>
-
<div class=
"jun-time-rect"></div>
-
<div class=
"jun-human"></div>
-
<div class=
"jun-time-m-h" id=
"mh"></div>
-
<div class=
"jun-time-m-l" id=
"ml"></div>
-
<div class=
"jun-time-s-h" id=
"sh"></div>
-
<div class=
"jun-time-s-l" id=
"sl"></div>
-
<div class=
"jun-date" id=
"date"></div>
-
<div class=
"jun-calendar-date" id=
"calendarDate"></div>
-
</div>
-
JS代码
-
function WatchMeter() {
-
// 初始化dom
-
this._initDom()
-
// 更新
-
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(./assets/img/" + value +
".svg)";
-
}
-
}
-
-
var myWatchMeter =
new WatchMeter()
-
往期推荐
-
我为什么还坚持做公众号？（一）
-
PYTHON 人脸识别 + 手机推送，老板来了你就会收到短信提示
-
2020大数据学习资料,全套源码无加密网盘下载
-
中国大学mooc课件的下载方法
-
php是世界上最好的语言
-
基于PYTHON 爬虫的慕课视频下载
-
-
送福利了！关注下方的公众号：“优派编程”，搜索关键词“下载”，即可获得软件app下载资源和python、java等编程学习资料~
-
更多课程和学习资料请登录“方包博客”———http:
//fang1688.cn
-
-
-
更多资源请关注公众号或点击下方“阅读原文”，回复关键词获取
转载：https://blog.csdn.net/m0_50487958/article/details/115302629
查看评论