STU网页设计

学生网页作业使用HTML+JS实现动态时间显示

更新时间:2019-12-20   文章分类:网页技术课堂

方法一:可显示日期、上午下午、时间秒针动态实时变化
1.JS部分放到<head></head>区间
<script language="javascript">
        var t = null;
        t = setTimeout(time,1000);//开始执行
        function time()
        {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y=dt.getYear()+1900;
            var mm=dt.getMonth()+1;
            var d=dt.getDate();
            var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
 
            var day=dt.getDay();
            var h=dt.getHours();
            var m=dt.getMinutes();
            var s=dt.getSeconds();
            if(h<10){h="0"+h;}
            if(m<10){m="0"+m;}
            if(s<10){s="0"+s;}
if(h<12){  document.getElementById("timeShow").innerHTML =  "你好,上午好!今天是"+y+"年"+mm+"月"+d+"日"+h+":"+m+":"+s+"";}
if(h>= 12){  document.getElementById("timeShow").innerHTML =  "你好,下午好!今天是"+y+"年"+mm+"月"+d+"日"+h+":"+m+":"+s+"";}
if(h>= 20){  document.getElementById("timeShow").innerHTML =  "你好,晚上好!今天是"+y+"年"+mm+"月"+d+"日"+h+":"+m+":"+s+"";}
            t = setTimeout(time,1000); //设定定时器,循环执行
        }
</script>
2.要显示的地方插入<div id="timeShow"></div>

方法二:可显示日期,上午下午等
   <script type="text/javascript">
var today = new Date(); //新建一个Date对象
var date = today.getDate();//查询当月日期
var day = today.getDay();//查询当前星期几
var month = today.getMonth()+1;//查询月份
var year = today.getFullYear();//查询年份
var hour=today.getHours();
var morning="";
 if ( hour<12) morning="你好,上午好!";
 if ( hour>=12) morning="你好,下午好!";
 if ( hour>=20) morning="你好,晚上好!";
var week="";
if (day==0) week='星期日';
if (day==1) week='星期一';
if (day==2) week='星期二';
if (day==3) week='星期三';
if (day==4) week='星期四';
if (day==5) week='星期五';
if (day==6) week='星期六';
document.write(morning+"今天是" +year+"年"+month+"月"+date+"日 "+week+" ");
</script>

STU网页公众号

STU网页设计专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生dreamweaver网页成品...

qq code back_top

微信扫码咨询