【PythonDjango后台实例 第五章】Bootstrap3 在HTML页面中显示调用本地时间并动态显示

本文实现了在html页面上显示动态时间,实现方法非常简单,用Js前端编写一个程序即可实现。

实验环境：

（一）jQuery.js

（二）bootstrap.min.js/bootstrap.min.css

第一步：页面头尾引入CSS/js文件

    

<!-- 头部 -->
<link rel="stylesheet" href="../static/assets/vendor/bootstrap/css/bootstrap.min.css">
<!-- 尾部 -->
<script src="../static/assets/vendor/jquery/jquery.min.js"></script>
<script src="../static/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
第二步: 设置id标签,再写一个js程序搞定,其实主要就是js语法熟悉不熟悉,这是个非常简单的东西

相关代码片段:

<a><i class="lnr lnr-clock"></i> <span id="navbar_time"> </span></a>
<script type="text/javascript">
setInterval(getlocaltime, 1000);
function getlocaltime() {
var localtime = new Date();
var yy = localtime.getFullYear();
var mo = localtime.getMonth()+1;
var dd = localtime.getDate();
var hh = localtime.getHours();
var mm = localtime.getMinutes();
var ss = localtime.getSeconds();

mm = extra(mm);
ss = extra(ss);

document.getElementById("navbar_time").innerHTML = "现在的时间是:"+yy+"年"+mo+"月"+dd+"日"+" "+hh+":"+mm+":"+ss;
}
function extra(x) {
if(x < 10){
return "0" + x;
}else{
return x;
}
}
</script>

这个代码里面唯一可能小白难以理解的就是 setInterval(函数名  刷新时间 1000 = 1s);

这个就是每间隔一秒调用一次函数

第三步:最后实现的效果



因为调用了 setInterval方法,所以会在页面上每间隔一秒动态显示一次.