<%--
  Created by IntelliJ IDEA.
  User: ZJW
  Date: 2019/6/3
  Time: 23:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>AckTime</title>
    <script src="bootstrap/js/jquery-3.3.1.min.js"></script>
    <script>
        var ackTime= "";

        document.onreadystatechange = function(){
            if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入

                console.log('document is onload');
            }
            if(document.readyState == "interactive"){ //DOM构建了就会执行，先与complete执行
                var date=new Date();

                var oSpan=document.getElementById('now');

                if(date.getHours()>=0 && date.getHours()<6){
                    ackTime="1";
                    oSpan.innerHTML="凌晨";
                }else if(date.getHours()>=6&&date.getHours()<12){
                    ackTime="2";
                    oSpan.innerHTML="上午";
                }else if(date.getHours()>=12&&date.getHours()<17){
                    ackTime="3";
                    oSpan.innerHTML="下午";
                }else if(date.getHours()>=17&&date.getHours()<19){
                    ackTime="4";
                    oSpan.innerHTML="傍晚";
                }else if(date.getHours()>=19&&date.getHours()<24){
                    ackTime="5";
                    oSpan.innerHTML="晚上";
                }
                ieSpan.innerHTML=ackTime;
                console.log('document is interactive ,so DOM obj is '+ document.getElementById('img1'));
            }

        };

        $(function(){
            var ieSpan=document.getElementById('ie');
            ieSpan.innerHTML=ackTime;
            $.ajax({
                url:"ackTime.action",
                type:"post",
                async : false,
                data:{"time":ackTime},
                dataType:"json"

            });

        });

    </script>
</head>
<body >
<p>欢迎您，现在是<span id="now"></span></p>
<p>欢迎您，现在是<span id="ie"></span></p>
</body>
</html>
