HTML部分：
<div id="box">
<div id="top">
<span id="span1">
<</span>
<span id="span2">确定</span>
<input type="text" id="inp1" onchange="get1()">年
<input type="text" id="inp2" onchange="get2()">月
<span id="span3">重选</span>
<span id="span4">></span>
</div>
<div id="nav">
<ul id="ul1">
<li>周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
<li>周五</li>
<li>周六</li>
<li>周日</li>
</ul>
</div>
<div id="cont">
<ul id="ul2">
</ul>
</div>
</div>
<div id="sbox"></div>
CSS样式部分：
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
#box {
width: 420px;
height: 314px;
border: 1px solid #f00;
text-align: center;
margin: 0 auto;
background: url("./7735908_161703348144_2.jpg") no-repeat center center;
//图片自己找
background-size: 100%;
}
/* top部分 */
#top {
overflow: hidden;
}
#span1 {
float: left;
margin-left: 20px;
cursor: pointer;
}
#span2 {
margin-right: 20px;
cursor: pointer;
}
#span3 {
margin-left: 20px;
cursor: pointer;
}
#span4 {
float: right;
margin-right: 20px;
cursor: pointer;
}
#inp1 {
width: 40px;
line-height: 20px;
text-align: center;
}
#inp2 {
width: 40px;
line-height: 20px;
text-align: center;
}
/* nav部分 */
#nav {
width: 420px;
}
#nav #ul1 {
overflow: hidden;
}
#nav #ul1 li {
width: 60px;
line-height: 40px;
float: left;
border-bottom: 1px solid #ccc;
}
/* cont部分 */
#cont #ul2 li {
width: 59px;
height: 30px;
line-height: 30px;
float: left;
box-sizing: border-box;
}
#cont #ul2 :first-child {
border: 1px solid #0094ff;
}
/* sbox样式 */
#sbox {
width: 420px;
height: 20px;
border: 1px solid #f00;
margin: 0 auto;
text-align: center;
}
需要引用的文件：
<script src="./jquery-1.12.2.js"></script>
<script src="./template-web.js"></script>
<script src="./day.js"></script>
JS部分
var index = 0; var year = document.getElementById("inp1").value; var month = document.getElementById("inp2").value; var str = ""; var daydate = 0; var date = new Date(); var week = date.getDay(); window.onload = function () { coptime() }; function get1() { var check = /^\d+$/; var inp1 = document.getElementById("inp1"); var inp1value = document.getElementById("inp1").value; if (!check.test(inp1value) && inp1value != "") { alert("请输入正确的时间格式") } } function get2() { var check = /^(?:1[0-2]|[1-9])$/; var inp1 = document.getElementById("inp2"); var inp1value = document.getElementById("inp2").value; if (!check.test(inp1value) && inp1value != "") { alert("请输入正确的时间格式") } else { checktime() } } function checktime() { var inp1value = document.getElementById("inp2").value; if (inp1value % 2 == 0) { var value1 = document.getElementById("inp1").value; if (inp1value == 2) { if (value1 % 4 == 0 && value1 % 100 != 0 || value1 % 400 == 0) { var data = template("tmpl2", { arr3: arr3 }); index = 3; $("#ul2").html(data) } else { var data = template("tmpl3", { arr4: arr4 }); index = 4; $("#ul2").html(data) } } else { if (inp1value == 8) { var data = template("tmpl1", { arr2: arr2 }); $("#ul2").html(data); index = 1 } else { if (inp1value % 2 == 0 && inp1value > 8) { var data1 = template("tmpl1", { arr2: arr2 }); $("#ul2").html(data1); index = 4 } else { var data = template("tmpl", { arr1: arr1 }); $("#ul2").html(data); index = 1 } } } } else { if (inp1value % 2 != 0) { if (inp1value > 8) { var data = template("tmpl", { arr1: arr1 }); $("#ul2").html(data); index = 1 } else { var data1 = template("tmpl1", { arr2: arr2 }); $("#ul2").html(data1); index = 4; checkposition() } } } } function coptime() { var date = dayjs().format("YYYY-M-DD"); var target = date.split("-"); var b = target[1]; document.getElementById("inp1").value = target[0]; year = target[0]; var c = document.getElementById("inp2").value = target[1]; month = target[1]; checktime(); daydate = target[2]; if (index == 4) { for (var i = 0; i < arr4.length; i++) { if (arr1[i] == daydate) { $("#ul2>li").eq(i).css("border", "1px solid #0094ff").siblings().css("border", "none") } } } else { if (index == 1) { for (var i = 0; i < arr1.length; i++) { if (arr1[i] == daydate) { $("#ul2>li").eq(i).css("border", "1px solid #0094ff").siblings().css("border", "none") } } } else { if (index == 2) { for (var i = 0; i < arr2.length; i++) { if (arr2[i] == daydate) { $("#ul2>li").eq(i).css("border", "1px solid #0094ff").siblings().css("border", "none") } } } else { for (var i = 0; i < arr3.length; i++) { if (arr3[i] == d) { $("#ul2>li").eq(i).css("border", "1px solid #0094ff").siblings().css("border", "none") } } } } } } var sure = document.getElementById("span2"); var cancel = document.getElementById("span3"); function gettime() { str = "这是你选择的时间:" + year + "年" + month + "月" + daydate + "日"; $("#sbox").html(str) } function checkposition() { var month1 = document.getElementById("inp2").value - 1; var year1 = document.getElementById("inp1").value; var firstday = new Date(year1, month1, 1); var monthfirstweek = firstday.getDay(); if (monthfirstweek == 0) { $("#ul2>li").eq(0).css("margin-left", "354px") } else { if (monthfirstweek == 1) { $("#ul2>li").eq(0).css("margin-left", "0px") } else { if (monthfirstweek == 2) { $("#ul2>li").eq(0).css("margin-left", "59px") } else { if (monthfirstweek == 3) { $("#ul2>li").eq(0).css("margin-left", "118px") } else { if (monthfirstweek == 4) { $("#ul2>li").eq(0).css("margin-left", "177px") } else { if (monthfirstweek == 5) { $("#ul2>li").eq(0).css("margin-left", "236px") } else { if (monthfirstweek == 6) { $("#ul2>li").eq(0).css("margin-left", "295px") } } } } } } } } sure.onclick = function () { gettime() }; $("#ul2").on("click", "li", function () { $(this).css("border", "1px solid #0094ff").siblings().css("border", "none"); daydate = $(this).html() }); cancel.onclick = function () { location.reload() }; var left = document.getElementById("span1"); left.onclick = function () { var f = document.getElementById("inp2").value; var g = document.getElementById("inp1").value; daydate = 1; if (1 < f < 12) { document.getElementById("inp2").value = f - 1; month = f - 1; year = g; daydate = 1; if (month == 0) { month = 12 } if (f < 2) { document.getElementById("inp2").value = 12; document.getElementById("inp1").value = g - 1; year = g - 1 } } get2(); checkposition() }; var right = document.getElementById("span4"); right.onclick = function () { var f = document.getElementById("inp2").value; var g = document.getElementById("inp1").value; daydate = 1; if (1 < f < 12) { document.getElementById("inp2").value = 1 + parseInt(f); month = parseInt(f) + 1; year = g; daydate = 1; if (month == 13) { month = 1 } if (f > 11) { document.getElementById("inp2").value = 1; document.getElementById("inp1").value = parseInt(g) + 1; year = Number(g) + 1 } } get2(); checkposition() }; var str = ""; var ul2 = document.getElementById("ul2"); var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]; var arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]; var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]; var arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]; var arr5 = [0, 1, 2, 3, 4, 5, 6];