cari

Rumah  >  Artikel  >  hujung hadapan web  >  制作一个会跳动的日历

制作一个会跳动的日历

一个新手
一个新手asal
2017-10-18 09:29:322179semak imbas

一、简介

编写一个会动的日历，日历上面有年月日，周几，时分秒，效果如下：

年月日，周几，时分秒都会随着系统时间的走动而改变

二、代码


<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0; 
            font-size: 0px;
            font-family: &#39;微软雅黑&#39;;
        }
        .contain-wrapper{
            margin: 0 auto;
            padding-top: 70px;
            width: 470px;
            height: 230px;
            background: #000000;
            border-radius: 30px;
        }
        .timer-wrapper p{
            font-size: 44px;
            color: #ffffff;
        }
        .year{
            width: 470px;
            text-align: center;
        }
        .timer-footer{
            width: 460px;
            text-align: center;
        }
        .timer-footer p:nth-child(1){
            display: inline-block;
        }
        .timer-footer p:nth-child(2){
            display: inline-block;
        }
    </style></head><body>
    <p class="contain-wrapper">
        <p class="timer-wrapper">
            <p class="year"></p>
            <p class="timer-footer">
                <p></p>
                <p></p>
            </p>
        </p>
    </p></body><script type="text/javascript">
        
        /*
        *这是一个获取当前日期的函数         */
        function showLocaleDate(objb){            
        var str = objb.getFullYear()+"年"+(objb.getMonth()+1)+"月"+objb.getDate()+"日";            
        return str;
        }        
        var year=document.getElementsByClassName(&#39;timer-wrapper&#39;)[0].getElementsByTagName(&#39;p&#39;)[0];        
        /*
        *这是一个获取星期几的函数         */
        function showLocaleWeek(objC){            
        var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");  
            var week = objC.getDay();  
            var weekString = "星期"+ weekArray[week];            
            return weekString;
        }        
        var wk=document.getElementsByClassName(&#39;timer-wrapper&#39;)[0].getElementsByTagName(&#39;p&#39;)[1];        /*
        *这是一个获取当前时间的函数         */

        function showLocaleTime(objD){            
        var hh = objD.getHours();            
        if(hh<10) hh = &#39;0&#39; + hh;            
        var mm = objD.getMinutes();            
        if(mm<10) mm = &#39;0&#39; + mm;            
        var ss = objD.getSeconds();            
        if(ss<10) ss = &#39;0&#39; + ss;            
        var reflash=hh + ":" + mm + ":" + ss;            
        return reflash;
        }        var now=document.getElementsByClassName(&#39;timer-wrapper&#39;)[0].getElementsByTagName(&#39;p&#39;)[2];        function showTime(){            var today=new Date();
            year.innerHTML=showLocaleDate(today);
            wk.innerHTML=showLocaleWeek(today);
                now.innerHTML=showLocaleTime(today);
                window.setTimeout("showTime()",1000);
        }
        showTime();
        </script>
        </html>

Atas ialah kandungan terperinci 制作一个会跳动的日历 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：script标签中的async和defer用法Artikel seterusnya：box-shadow的使用技巧

Artikel berkaitan

Lihat lagi