时隔三年勇士再夺总冠军，UP特意制作一个时钟表来庆祝这激情澎湃时刻！
时钟表主要运用了 Vue+ Jquery + FontaWesome + Bootstrap 技术栈，不难，希望您有所收获！
效果图如下：
Vue
- 获取当前时间，new Date().toTimeString() ，再用切割字符串去前八位substr(0,8)
atime:new Date().toTimeString().substr(0,8)
- 获取日期与时间，new Date().toLocaleString()。
adate:new Date().toLocaleString()
- 使用methods属性给Vue定义方法，其中this表示的就是Vue实例对象
methods:{
getTime() {
this.atime = new Date().toTimeString().substr(0,8) //切割字符串得到当前时间
},
getDate() {
this.adate = new Date().toLocaleDateString()
}
},
- mounted 是一个生命周期函数，挂载，把Vue实例对象挂载起来，引入循环定时器setInterval()函数，表示每一秒钟执行一次挂载到此处的函数或对象，应该不难理解，也可以百度一下具体用法。
mounted() {
//生命周期函数，挂载
setInterval(this.getTime,1000), //此处需注意this.getTime 后面不需要加括号，这是初学者很容易犯的错误
setInterval(this.getDate,1000)
}
}
Bootstrap
在引入bootstrap之前要先引入jquery
1.Bootstrap 运用了卡片card，头部和内容，底部此处省略了。
<divclass="card"><divclass="card-header">头部</div><divclass="card-body">内容</div><divclass="card-footer">底部</div></div>
2.头部
背景颜色：bg-info表示浅蓝色，其他还有很多，百度一下即可。
<divclass="card-header bg-info"><h1style="color:#cccc">勇士总冠军:当前时间</h1></div>
3.内容
fa 是font awesome里面的字体图标，fa-car 表示车，fw设置固定图标宽度，mr-2，占据内容两个位置宽度
fa-spinner 表示动态旋转图标，fa-spin能够让图标非常流畅在旋转，而fa-pulse是以8步为一个周期旋转，每转45度停一次，旋转有点别扭，此处不推荐用fa-pulse
<divclass="card-body display-4 text-black bg-secondary"id="app"><p><iclass="fa fa-car fa-fw mr-2"style="color:red;"></i><spanclass="font-weight-bold">{{adate}}</span></p><p><iclass="fa fa-spinner fa-spin fa-fw mr-2"style="color:blue;"></i><spanclass="font-weight-bold">{{atime}}</span></p></div>
完整代码实现：
为便于读者阅读使用，up使用的是cdn，但建议读者下载到本地，方便快捷
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>时钟</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><linkrel="stylesheet"href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!-- 在引入bootstrap之前要先引入jquery --><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"type="text/javascript"charset="utf-8"></script></head><body><divclass="container d-flex justify-content-center mt-5"><!-- 放置一个bootstrap卡片 --><divclass="card"><!-- 卡片头，设置背景颜色 --><divclass="card-header bg-info"><h1style="color:#cccc">迈巴赫座驾:当前时间</h1></div><!-- 卡片内容，设置展示卡片大小，内容颜色 --><divclass="card-body display-4 text-black bg-secondary"id="app"><!--fontawesome 设置 图标 --><p><iclass="fa fa-car fa-fw mr-2"style="color:red;"></i><spanclass="font-weight-bold">{{adate}}</span></p><p><iclass="fa fa-spinner fa-spin fa-fw mr-2"style="color:blue;"></i><spanclass="font-weight-bold">{{atime}}</span></p></div></div></div><scripttype="text/javascript">let demo={data(){return{atime:newDate().toTimeString().substr(0,8),adate:newDate().toLocaleString()}},methods:{getTime(){this.atime =newDate().toTimeString().substr(0,8)//切割字符串得到当前时间},getDate(){this.adate =newDate().toLocaleDateString()}},mounted(){//生命周期函数，挂载setInterval(this.getTime,1000),//此处需注意this.getTime 后面不需要加括号，这是初学者很容易犯的错误setInterval(this.getDate,1000)}}var vm = Vue.createApp(demo).mount("#app")</script></body></html>
首尾呼应，照应开头！
这是个比较简单的小案例，适合初学者练手。希望各位读者不负众望，努力学习技术，早点实现财富自由，去nba看场总决赛，加油！
祝君: " 百尺竿头 , 更进一步， 勇士 yyds，库里 FMVP !"
本文转载自: https://blog.csdn.net/m0_58501790/article/details/125339556
版权归原作者 香槟不喝酒 所有， 如有侵权，请联系我们删除。
版权归原作者 香槟不喝酒 所有， 如有侵权，请联系我们删除。