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