zoukankan      html  css  js  c++  java
  • JavaScript制作时钟特效

    需求说明:制作显示年、月、日、星期几并且显示上午(AM)和下午(PM)的

    12进制的时钟,具体效果如下所示:

    代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <meta  http-equiv="Content-Type" content="text/html charset=utf-8">
    <html>
    <head>
        <title>获取日期</title>
        <style type="text/css">
            p{
                font-weight: bold;
            }
        </style>
        <script type="text/javascript" >
           function fun(){
    //            新建一个date对象
                var date =new Date();
                var year = date.getFullYear();
                var month = date.getMonth();
                var day = date.getDate();
                var hour = date.getHours();
                var minutes = date.getMinutes();
                var seconds = date.getSeconds();
                var week = date.getDay();
               if(week==1){
                   week="";
               }if(week==2){
                   week="";
               }
               if(week==3){
                   week="";
               }
               if(week==4){
                   week="";
               }
               if(week==5){
                   week="";
               }
               if(week==6){
                   week="";
               }
               if(week==7){
                   week="";
               }
                var am="";
                if(hour>=0 && hour<=12){
                    am = "AM";
                }else{
                    am = "PM"
                }
                document.getElementById("date").innerHTML=year+""+month+""+day+""+" "+hour+":"+minutes+":"+seconds+" "+am+" 星期"+week;
    
            }
            onload = function(){
                setInterval("fun()",100);
            }
    
        </script>
    </head>
    <body>
        <h1>你好,欢迎访问贵美商城!</h1>
        <p id="date"></p>
    </body>
    </html>
  • 相关阅读:
    mysql联合索引命中条件
    Shiro知识初探(更新中)
    Java中使用MongoTemplate进行分批处理数据
    Java中String时间范围比较
    使用ReentrantLock
    使用Condition
    python的坑--你知道吗?
    python基础--函数全解析(1)
    CSS基本语法及页面引用
    HTML学习汇总
  • 原文地址:https://www.cnblogs.com/sincoolvip/p/5661375.html
Copyright © 2011-2022 走看看