效果图
HTML5代码
html
<!DOCTYPE html>
<html>
<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>Web时钟</title>
<style>
#app{
text-align: center;padding: 50px;
}
.banner{
width: 800px;
height: 150px;
line-height: 150px;
text-align: center;
box-shadow: 5px 5px 10px #888888;
font-size: 40px;
font-weight: bolder;
background-color: #033592;
color: #FFF;
margin: 0px auto;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="banner">
当前日期时间:{{ date | formatDate }};
</div>
</div>
<script src="js/vue.js"></script>
<script>
var padDate=function(val){
return val<10?"0"+val:val;
};
var vm=new Vue({
el:"#app",
data:{
date:null
},
created:function(){
this.date=new Date();
},
mounted:function(){
var _this=this;
this.timer=setInterval(function(){
_this.date=new Date();}
,1000);
},
beforeDestroy:function(){
if(this.timer){
clearInterval(this.timer);
}
},
filters:{
formatDate:function(val){
var currdate =new Date();
var year=currdate.getFullYear();
var month=padDate(currdate.getMonth()+1);
var day =padDate(currdate.getDate());
var hours=padDate(currdate.getHours());
var minutes=padDate(currdate.getMinutes());
var seconds=padDate(currdate.getSeconds());
return year+"-"+month+"-"+day+""+hours+":"+minutes+":"+seconds;
}
}
});
</script>
</body>
</html>