ReWriteDateControll

时间：2016-12-19 21:19:34 阅读：115 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        #Header /*标题样式*/ {
            height: 21px;
            font-family: "宋体";
            font-size: 12px;
        }

        #LDay td /*星期的单元格样式*/ {
            width: 30px;
            height: 30px;
            text-align: center;
            font-family: "宋体";
            font-size: 12px;
        }

        #LBody td /*日期的单元格样式*/ {
            width: 30px;
            height: 30px;
            text-align: center;
            font-family: "宋体";
            font-size: 12px;
            color: #999;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
   
    <script type="text/javascript">
        var today = new Date();
        var year = today.getFullYear();      //本年
        var month = today.getMonth() + 1;    //本月
        var day = today.getDate();
        $(function () {
            calendar(‘‘)
        })
            //实现日历
            function calendar(o) {
               
               
                if (o == ‘subtract‘)
                {
                    month = month - 1;
                    if (month < 1)
                    {
                        month = 12
                        year=year - 1;
                    }
            
                }
                if (o == ‘add‘) {
                    month = month + 1;
                    if (month > 12)
                    {
                        month = 1;
                        year = year + 1;
                    }
                }
                //本日
                $("#showDate").html(year+‘-‘+month+‘-‘+day);
                //本月第一天是星期几（距星期日离开的天数）
                var startDay = new Date(year, month - 1, 1).getDay();

                //本月有多少天(即最后一天的getDate()，但是最后一天不知道，我们可以用“上个月的0来表示本月的最后一天”)
                var nDays = new Date(year, month, 0).getDate();

                //开始画日历
                var numRow = 0;  //记录行的个数，到达7的时候创建tr
                var i;        //日期
                var html = ‘‘;
                html += ‘<table id="Body" width="212"><tbody>‘;
                //第一行
                html += ‘<tr>‘;
                for (i = 0; i < startDay; i++) {
                    html += ‘<td></td>‘;
                    numRow++;
                }
                for (var j = 1; j <= nDays; j++) {
                    //如果是今天则显示红色
                    if (j == day) {
                        html += ‘<td style="color:red" onclick="‘ + "alert(‘今天是" + j + "号‘);" + ‘">‘;
                        html += ‘<input type="checkbox">‘ + j;    //开始加日期
                    }
                    else {
                        html += ‘<td onclick="‘ + "alert(‘你点的是" + j + "号‘);" + ‘">‘;
                        html += ‘<input type="checkbox">‘+j;    //开始加日期
                    }
                    html += ‘</td>‘;
                    numRow++;
                    if (numRow == 7) {  //如果已经到一行（一周）了，重新创建tr
                        numRow = 0;
                        html += ‘</tr><tr>‘;
                    }
                }

                html += ‘</tbody></table>‘;
                document.getElementById("Container").innerHTML = html;
            }
            function addMonth()
            {
                calendar(‘add‘);
            }
            function SubtractMonth()
            {
                calendar(‘subtract‘);
            }
    </script>
</head>


<body>
    <table id="Calendar" width="212">
        <tr>
            <td height="21" bgcolor="#78b3ed" width="212">
                <table id="LHeader" height="21" width="212">
                    <tbody>
                        <tr align="center">
                            <td align="center" onclick="addMonth(‘subtract‘)" width="21">&lt;</td>
                            <td align="center">
                                <span id="showDate">2010.01</span>
                            </td>
                            <td align="center" onclick="SubtractMonth(‘add‘)" width="21">&gt;</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td height="18">
                <table id="LDay" bgcolor="#e7f1fd">
                    <tbody>
                        <tr>
                            <td>日</td>
                            <td>一</td>
                            <td>二</td>
                            <td>三</td>
                            <td>四</td>
                            <td>五</td>
                            <td>六</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td height="120" width="212" id="Container"></td>
        </tr>
    </table>
</body>
</html>

//--------------------------------------------------------------------------第二版带价格------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#Header /*标题样式*/ {
height: 21px;
font-family: "宋体";
font-size: 12px;
}

#LDay td /*星期的单元格样式*/ {
width: 50px;
height: 30px;
text-align: center;
font-family: "宋体";
font-size: 12px;
}

#LBody td /*日期的单元格样式*/ {
width: 30px;
height: 30px;
text-align: center;
font-family: "宋体";
font-size: 12px;
color: #999;
font-weight: bold;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>

<script type="text/javascript">
var today = new Date();
var year = today.getFullYear(); //本年
var month = today.getMonth() + 1; //本月
var day = today.getDate();
$(function () {
calendar(‘‘)
})
//实现日历
function calendar(o) {

if (o == ‘subtract‘)
{
month = month - 1;
if (month < 1)
{
month = 12
year=year - 1;
}

}
if (o == ‘add‘) {
month = month + 1;
if (month > 12)
{
month = 1;
year = year + 1;
}
}
//本日
$("#showDate").html(year+‘-‘+month+‘-‘+day);
//本月第一天是星期几
var startDay = new Date(year, month - 1, 1).getDay();

//本月有多少天
var nDays = new Date(year, month, 0).getDate();

//开始画日历
var numRow = 0; //记录行的个数，到达7的时候创建tr
var i; //日期
var html = ‘‘;
html += ‘<table id="Body" width="350"><tbody>‘;
//第一行
html += ‘<tr>‘;
for (i = 0; i < startDay; i++) {
html += ‘<td></td>‘;
numRow++;
}
for (var j = 1; j <= nDays; j++) {
//如果是今天则显示红色
if (j == day) {
html += ‘<td style="color:red" onclick="‘ + "alert(‘今天是" + j + "号‘);" + ‘">‘;
html += parseInt(Math.random() * 5, 10) + ‘元<input type="checkbox"/>‘ + j; //开始加日期
}
else {
html += ‘<td onclick="‘ + "alert(‘" + j + "号‘);" + ‘">‘;
html += parseInt(Math.random() * 5, 10) + ‘元<input type="checkbox"/>‘ + j; //开始加日期
}
html += ‘</td>‘;
numRow++;
if (numRow == 7) {
numRow = 0;
html += ‘</tr><tr>‘;
}
}

html += ‘</tbody></table>‘;
document.getElementById("Container").innerHTML = html;
}
function addMonth()
{
calendar(‘add‘);
}
function SubtractMonth()
{
calendar(‘subtract‘);
}
</script>
</head>

ReWriteDateControll

原文：http://www.cnblogs.com/zengpeng/p/6198638.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)