jQuery手机移动端日历

1、新建html文档。

2、书写hmtl代码。

<div class="box">

<section class="date">

<div class="head">

<div class="prev">上一月</div>

<div class="tomon"><span class="year"></span>年 <span class="month"></span>月</div>

<div class="next">下一月</div>

</div>

<ol><li>周日</li><li>周一</li><li>周二</li><li>周三</li><li>周四</li><li>周五</li><li>周六</li></ol>

<ul>

<li>日期</li><li>日期</li><li>日期</li><li>日期</li><li>日期</li><li>日期</li><li>日期</li>

<li>日期</li><li>日期</li><li>日期</li><li>日期</li>

</ul>

</section>

</div>

3、书写hmtl代码。

*{margin: 0;padding: 0;font-style: normal;}

.clear{clear: both;}

html,body{font-size: 62.5%;font-family: "Microsoft YaHei", "SimSun", Helvetica, Arial, sans-serif;background: #f1f5f8;}

.box{width: 100%;height: 100%;}

.head{width: 100%;height:4.5rem;cursor: pointer;}

.head .prev,.head .next{width: 20%;text-align: center;float: left;line-height: 4.5rem;font-size:1.6rem;}

.head .tomon{width: 60%;float: left;text-align: center;line-height: 4.5rem;font-size: 1.6rem;}

.date ol{width: 100%;height: 4rem;background: #005bac;padding: 0;}

.date ol li{display:block;float: left;width: 14.2857%;text-align: center;font-size: 1.6rem;color: #fff;border: none;padding: 0;line-height: 4rem;height: 4rem;}

.date ul{width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;}

.date ul li{display: block;width: 14.2857%;height: 4.5rem;text-align: center;font-size: 1.6rem;background: #fff;position: relative;}

.date ul li i{font-size: 10px;position: absolute;right: 0;bottom:0.3rem;display:block;height: 15px;line-height: 15px;width: 100%;text-align: center;color: #e35925;}

.date ul li span{display: block;width: 100%;height: 100%;line-height: 4.5rem;text-align: center;}

.date ul .no_date{background: #fafafa;color: #999;line-height:4.5rem;}

.date ul .act_wk{color: #e35925;}

.date ul .act_date{background: #ff6600;color: #fff;}

.date ul .act_ds{background: #005bac;color: #fff;}

4、书写并添加js代码。

<script src="js/jquery-1.8.3.min.js"></script>

<script src="js/mobile_date.js"></script>

5、代码整体结构。

6、查看效果。