勇士总冠军时钟表之Vue+ Jquery + FontaWesome + Bootstrap

香槟不喝酒

于 2022-06-17 21:46:54 发布

阅读量609

点赞数 14

分类专栏：前端文章标签： bootstrap vue.js jquery

本文链接：https://blog.csdn.net/m0_58501790/article/details/125339556

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

时隔三年勇士再夺总冠军，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，头部和内容，底部此处省略了。

<div class="card">
  <div class="card-header">头部</div>
  <div class="card-body">内容</div> 
  <div class="card-footer">底部</div>
</div>

2.头部
背景颜色：bg-info表示浅蓝色，其他还有很多，百度一下即可。

<div class="card-header bg-info">
	 <h1 style="color:#cccc">勇士总冠军:当前时间</h1>
</div>

3.内容
fa 是font awesome里面的字体图标，fa-car 表示车，fw设置固定图标宽度，mr-2，占据内容两个位置宽度
fa-spinner 表示动态旋转图标，fa-spin能够让图标非常流畅在旋转，而fa-pulse是以8步为一个周期旋转，每转45度停一次，旋转有点别扭，此处不推荐用fa-pulse

<div class="card-body display-4 text-black bg-secondary" id="app">
	<p><i class="fa fa-car fa-fw mr-2" style="color:red;"></i><span class="font-weight-bold">{{adate}}</span></p>
	<p><i class="fa fa-spinner fa-spin fa-fw mr-2" style="color:blue;"></i><span class="font-weight-bold">{{atime}}</span></p>
</div>

完整代码实现：
为便于读者阅读使用，up使用的是cdn，但建议读者下载到本地，方便快捷

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>时钟</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
	<!-- 在引入bootstrap之前要先引入jquery -->
	<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
	<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div class="container d-flex justify-content-center mt-5">
		<!-- 放置一个bootstrap卡片 -->
		<div class="card">
			<!-- 卡片头，设置背景颜色 -->
			<div class="card-header bg-info">
				<h1 style="color:#cccc">迈巴赫座驾:当前时间</h1>
			</div>
			<!-- 卡片内容，设置展示卡片大小，内容颜色 -->
			<div class="card-body display-4 text-black bg-secondary" id="app">
				<!--fontawesome  设置 图标 -->
				<p><i class="fa fa-car fa-fw mr-2" style="color:red;"></i><span class="font-weight-bold">{{adate}}</span></p>
				<p><i class="fa fa-spinner fa-spin fa-fw mr-2" style="color:blue;"></i><span class="font-weight-bold">{{atime}}</span></p>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		let  demo= {
			data(){
				return{
					atime:new Date().toTimeString().substr(0,8),
					adate:new Date().toLocaleString()
				}
			},
			methods:{
				getTime() {
					this.atime = new Date().toTimeString().substr(0,8) //切割字符串得到当前时间
				},
				getDate() {
					this.adate = new Date().toLocaleDateString()
				}
			},
			mounted() {
					//生命周期函数，挂载
					setInterval(this.getTime,1000),  //此处需注意this.getTime 后面不需要加括号，这是初学者很容易犯的错误
					setInterval(this.getDate,1000)
				}
			}
		var vm = Vue.createApp(demo).mount("#app")
	</script>
</body>
</html>