绘制日历和让select标签里的文字居中

日历和select文字居中的小知识

怎么绘制日历

绘制日历有两个关键,一个是获取当月有多少天,一个获取当月第一天是星期几,解决这个两个问题,就能把日历画出来了。以下是源码:

            var month = new Date( selectedYear, selectedMonth, 0 );
            var firstDay = new Date( selectedYear, selectedMonth - 1, 1 );          //0 代表一月份,1 代表二月分, 2 代表三月份,依次类推。
            var firstWeekDay = firstDay.getDay();

            var weekPositon = firstWeekDay;

            var daysOfMonth = month.getDate( month );       // 一個月第幾天天 返回一个1 到 31的整数值
            var weekDay = month.getDay();                   // 星期幾 0表示星期天

            // 日曆表格標籤開始
            var html = '<tr>';

            // 填滿前面的
            for( var i = 0; i < firstWeekDay; i++ ){
                html += '<td></td>';
            }


            for( var i = 1; i <= daysOfMonth; i++ ){

                if ( weekPositon % 6 == 0 && weekPositon != 0 ) {

                    html += '<td class="schedule-td boundary" id="date-' + i + '">\
                                <span class="date-num">' + i + '</span>\
                                <div class="schedule-content">\
                                    <div class="schedule-content-excerpt"></div>\
                                    <div class="schedule-content-all"></div>\
                                    <span class="caret-img hidden"></span>\
                                </div>\
                            </td>'

                    html += '</tr>'
                    weekPositon = 0
                    
                    html += '<tr>'

                }else{
                      html += '<td class="schedule-td" id="date-' + i + '">\
                                <span class="date-num">' + i + '</span>\
                                <div class="schedule-content">\
                                    <div class="schedule-content-excerpt"></div>\
                                    <div class="schedule-content-all"></div>\
                                    <span class="caret-img hidden"></span>\
                                </div>\
                            </td>'
                    weekPositon++;
                }

            }

            for( var i = 0; i <= 6 - weekPositon; i++ ){
                html += '<td></td>';
            }

            // 日曆表格結束
            html += '</tr>';
            $( '#shedule-body' ).html( html );

怎么让select标签里的文字居中?

这个问题看起来很简单,通过一句css就能搞定,但是实际上就是不行,而且浏览器存在各种差异。我查到了两种解决方案,一种是

text-align-last:center;

这种方式兼容性不好。还有一种是使用jquery UI的方式。查看下面链接看实现原理。

http://ourjs.com/detail/56a6de9188feaf2d031d2460

http://lvsenlin.iteye.com/blog/1978514

我要分享

曾小乱

作者: 曾小乱

喜欢写点有意思的东西

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据