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