js制作显示时间

最新推荐文章于 2023-12-28 16:20:53 发布

sam80000

最新推荐文章于 2023-12-28 16:20:53 发布

阅读量1k

点赞数

分类专栏：前端知识点文章标签： javascript js

本文链接：https://blog.csdn.net/sam80000/article/details/114574546

版权

前端知识点专栏收录该内容

35 篇文章 2 订阅

订阅专栏

一、制作思路

1.运用setInterval(显示时间函数,毫秒数)定时器方法，每隔一秒显示执行一次显示时间的方法。

二、执行代码

 <style type="text/css">
     #div1{
         width:600px; height: 100px; border: 1px black solid; text-align: center;
         font-size: 20px; margin:200px auto; padding-top: 50px;
     }
 </style>
<script type="text/javascript">
    setInterval(function(){
        var huoqu=document.getElementById("div1");  //获取id为div1的标签内容
        huoqu.innerHTML=showtime();     //替换内容为显示的时间
    },1000);

function showtime() {
    //生成时间对象，什么也不传，获取当前系统的时间
    var D = new Date();

    var nian = D.getFullYear();   //获取年
    var yue = D.getMonth() + 1;       //获取月 0-11
    var ri = D.getDate();       //获取日
    var xingqi = numOfChinese(D.getDay());      //获取星期几 0-6，0是星期日

    var shi = changeNum(D.getHours());      //获取小时
    var fen = D.getMinutes();     //获取分钟
    var miao = D.getSeconds();    //获取秒

    /* 
        对数字进行调整
    */

    //把星期的数字换成汉字
    function numOfChinese(num) {
        var arr = ['日', '一', '二', '三', '四', '五', '六'];
        return arr[num];
    }
    //小时前面加上0
    function changeNum(num) {
        if (num < 10) {
            return "0" + num;
        } else {
            return num;
        }
    }
  var str= '现在时间是'+nian+'年'+yue+"月"+ri+'日，星期'+xingqi+"  "+shi+'时'+fen+"分"+miao+"秒";
   return str;
}
</script>


<body>
    <div id=div1>显示时间</div>
</body>

sam80000

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js制作显示时间

一、制作思路1.运用setInterval(显示时间函数,毫秒数)定时器方法，每隔一秒显示执行一次显示时间的方法。二、执行代码 <style type="text/css"> #div1{ width:600px; height: 100px; border: 1px black solid; text-align: center; font-size: 20px; margin:200px auto; padding-top: 50px;
复制链接

扫一扫

专栏目录