Home > Article > Web Front-end > Make a jumping calendar

Make a jumping calendar

一个新手Original: 2017-10-18 09:29:322139browse

1. Introduction

Write a moving calendar with year, month, day, day of week, hours, minutes and seconds. The effect is as follows:

## The year, month, day, day of the week, hours, minutes and seconds will change as the system time moves

2. Code

<!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>

The above is the detailed content of Make a jumping calendar. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Async and defer usage in script tagsNext article：Async and defer usage in script tags

See more

Make a jumping calendar

1. Introduction

Related articles