【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方法,所以会在页面上每间隔一秒动态显示一次.