js实现简单的网页时钟-蒲公英云

js实现简单的网页时钟

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>网页时钟</title>
        <!--
            定时器：有两种定时器
            属于window对象的两个方法：
                window.setInterval("任务"，毫秒值)：每经过多少毫秒执行此任务（重复执行）
                window.setTimeout("任务"，毫秒值)：经过多少毫秒后执行一次
            步骤：
            1.创建Date对象拼接时分秒
            2.获取span标签对象
            3.设置span标签对象的innerHTML属性
            4.设置定时器：每经过1000毫秒执行任务（前面的1.2.3）
        -->
    </head>
    <body>
        当前系统时间为：<span id = "spanTip"></span>
    </body>
    <script>
        /*function genDate(){ //如何设置span标签的innerHTML属性 //1.通过id属性获取span标签 //注意：span标签对象的获取一定要先加载span标签 var spanTip = document.getElementById("spanTip"); //2.设置span标签对象的innerHTML属性 spanTip.innerHTML = "hello！"; }*/
        function genDate(){ 
        //1.创建Date对象拼接时分秒
        var date = new Date();
        //拼接时间
        var dateStr = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 &nbsp"+
        date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
        //2.获取span标签对象
        var spanTip = document.getElementById("spanTip");
        //3.设置span标签对象的innerHTML属性
        spanTip.innerHTML = dateStr;
        }
        //4.设置定时器：每经过1000毫秒执行任务（前面的1.2.3）
        window.setInterval("genDate()",1000);
    </script>
</html>