"If at first you don't succeed; call it version 1.0" :-Unknown

Pages

Friday, January 11, 2013

show clock on bottom pf page-current date and time in Jquery and css

show clock on bottom pf page-current date and time in Jquery and css




















<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
              font: Segoe WP;
              }
        .Footer
        {
            position: absolute;
            bottom: 0px;
        }
    </style>
    <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function clock() {
            var d_names = new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");

            var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");

            var d = new Date();
            var curr_day = d.getDay();
            var curr_date = d.getDate();
            var curr_hour = d.getHours();
            var curr_min = d.getMinutes();
            curr_min = (curr_min < 9) ? '0' + curr_min : curr_min;
            curr_hour = (curr_hour < 9) ? '0' + curr_hour : curr_hour;
            var sup = "";
            if (curr_date == 1 || curr_date == 21 || curr_date == 31) {
                sup = "st";
            }
            else if (curr_date == 2 || curr_date == 22) {
                sup = "nd";
            }
            else if (curr_date == 3 || curr_date == 23) {
                sup = "rd";
            }
            else {
                sup = "th";
            }
            var curr_month = d.getMonth();
            var curr_year = d.getFullYear();
            $('#Time').text(curr_hour + " : " + curr_min);
            var SecondLine = d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_year;
            //  alert(SecondLine);
            $('#Day').text(SecondLine);
            //  $('#Day').text(d_names[curr_day]);
            //  $('#Date').html(curr_date + "<SUP>" + sup + "</SUP> ");
            //  $('.MonthYear').html(m_names[curr_month] + '<br/> ' + curr_year);

        }
        $(document).ready(function () {
            clock();
        });
        setInterval(clock, 1000);
        // alert(m_names[curr_month] + '<br/> ' + curr_year);
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="width: 550px" class="Footer">
            <div style="width: 500px; height: 109px; text-align: left; font-size: 119px" id="Time">
            </div>
            <div style="width: 500px; height: 109px; text-align: left; font-size: 50px; padding-left: 13px" id="Day">
            </div>
            <div style="width: 200px; height: auto; text-align: center; float: left; font-size: 36px"
                id="Date">
            </div>
            <div style="width: 300px; height: auto; text-align: center; float: right; font-size: 27px"
                class="MonthYear">
            </div>
        </div>
    </div>
    </form>
</body>
</html>


If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)

No comments: