以下是 HTML5手机端万年历特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5手机端万年历下载</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/swiper-3.3.1.min.css">
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
</head>
<body>
<!-- 加载ing -->
<div class="loading loading1 covers" >
<div class="loading-bj"></div>
<p>加载中...</p>
</div>
<!-- 加载ing END -->
<section class="out-wrap">
<div class="header-main">
<section class="header">
<div class="child return"><!-- <i></i> --></div>
<div class="child date">
<em class="f34" id="ymym">2016年06月</em>
<i></i>
</div>
</section>
<section class="day">
<section class="grid clearfix">
<div class="day-left clearfix">
<h1 id="top_shu">20</h1>
<div class="top-contrl">
<p><em id="top_week">星期二</em></p>
<div><i id="top_yue">八月廿十</i></div>
<!-- <p><em id="ymym" class="date">2016年06月</em><span></span></p>
<div><i id="top_yue">八月廿十</i><em id="top_week">星期二</em></div> -->
</div>
</div>
<div class="day-right clearfix">
<div class="yun">
<span class="js_jin">今</span>
</div>
</div>
</section>
</section>
<!-- end day -->
</div>
<!-- end header -->
<section class="content">
<section class="week">
<ul class="clearfix f28">
<li><a href="#">日</a></li>
<li><a href="#">一</a></li>
<li><a href="#">二</a></li>
<li><a href="#">三</a></li>
<li><a href="#">四</a></li>
<li><a href="#">五</a></li>
<li><a href="#">六</a></li>
</ul>
</section>
<section class="calenda">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<table id="now1" class="tables">
<tr class="">
<td class=" list"><i>12</i><em>中秋</em></td>
</tr>
</table>
</div>
<div class="swiper-slide">
<table id="now2" class="tables">
<tr class="">
<td class=" list"><i>12</i><em>中秋</em></td>
<td class=" list"><i>12</i><em>中秋</em></td>
<td class=" list"><i>12</i><em>中秋</em></td>
<td class=" list"><i>12</i><em>中秋</em></td>
<td class=" list"><i>12</i><em>中秋</em></td>
<td class=" list"><i>12</i><em>中秋</em></td>
<td class=" list"><i>12</i><em>中秋</em></td>
</tr>
</table>
</div>
<div class="swiper-slide">
<table id="now3" class="tables">
<tr class="">
<td class="list"><i>12</i><em>中秋</em></td>
</tr>
</table>
</div>
</div>
</div>
</section>
<!-- end calenda -->
</section>
<!-- end content -->
<section class="prorup"></section>
<!-- 弹窗 -->
<div class="tc"></div>
<div class="tc-innner">
<h2>
<!-- <div class="title-right">
<div class="gl zblck active">公历</div>
<div class="nl zblck">农历</div>
</div> -->
选择日期
</h2>
<div class="current-time">
<i class="i-year">1900</i><i class="i-month">1</i><i class="i-date">1</i>
</div>
<div class="swiper-box">
<i class="i1"></i>
<i class="i2"></i>
<i class="i3"></i>
<div class="swiper-box-li">
<div class="swiper-container2 nbxs">
<div class="swiper-wrapper year">
<div class="swiper-slide">1900年</div>
<div class="swiper-slide">1901年</div>
<div class="swiper-slide">1902年</div>
<div class="swiper-slide">1903年</div>
<div class="swiper-slide">1904年</div>
<div class="swiper-slide">1905年</div>
<div class="swiper-slide">1906年</div>
<div class="swiper-slide">1907年</div>
<div class="swiper-slide">1908年</div>
<div class="swiper-slide">1909年</div>
<div class="swiper-slide">1910年</div>
<div class="swiper-slide">1911年</div>
<div class="swiper-slide">1912年</div>
<div class="swiper-slide">1913年</div>
<div class="swiper-slide">1914年</div>
<div class="swiper-slide">1915年</div>
<div class="swiper-slide">1916年</div>
<div class="swiper-slide">1917年</div>
<div class="swiper-slide">1918年</div>
<div class="swiper-slide">1919年</div>
<div class="swiper-slide">1920年</div>
<div class="swiper-slide">1921年</div>
<div class="swiper-slide">1922年</div>
<div class="swiper-slide">1923年</div>
<div class="swiper-slide">1924年</div>
<div class="swiper-slide">1925年</div>
<div class="swiper-slide">1926年</div>
<div class="swiper-slide">1927年</div>
<div class="swiper-slide">1928年</div>
<div class="swiper-slide">1929年</div>
<div class="swiper-slide">1930年</div>
<div class="swiper-slide">1931年</div>
<div class="swiper-slide">1932年</div>
<div class="swiper-slide">1933年</div>
<div class="swiper-slide">1934年</div>
<div class="swiper-slide">1935年</div>
<div class="swiper-slide">1936年</div>
<div class="swiper-slide">1937年</div>
<div class="swiper-slide">1938年</div>
<div class="swiper-slide">1939年</div>
<div class="swiper-slide">1940年</div>
<div class="swiper-slide">1941年</div>
<div class="swiper-slide">1942年</div>
<div class="swiper-slide">1943年</div>
<div class="swiper-slide">1944年</div>
<div class="swiper-slide">1945年</div>
<div class="swiper-slide">1946年</div>
<div class="swiper-slide">1947年</div>
<div class="swiper-slide">1948年</div>
<div class="swiper-slide">1949年</div>
<div class="swiper-slide">1950年</div>
<div class="swiper-slide">1951年</div>
<div class="swiper-slide">1952年</div>
<div class="swiper-slide">1953年</div>
<div class="swiper-slide">1954年</div>
<div class="swiper-slide">1955年</div>
<div class="swiper-slide">1956年</div>
<div class="swiper-slide">1957年</div>
<div class="swiper-slide">1958年</div>
<div class="swiper-slide">1959年</div>
<div class="swiper-slide">1960年</div>
<div class="swiper-slide">1961年</div>
<div class="swiper-slide">1962年</div>
<div class="swiper-slide">1963年</div>
<div class="swiper-slide">1964年</div>
<div class="swiper-slide">1965年</div>
<div class="swiper-slide">1966年</div>
<div class="swiper-slide">1967年</div>
<div class="swiper-slide">1968年</div>
<div class="swiper-slide">1969年</div>
<div class="swiper-slide">1970年</div>
<div class="swiper-slide">1971年</div>
<div class="swiper-slide">1972年</div>
<div class="swiper-slide">1973年</div>
<div class="swiper-slide">1974年</div>
<div class="swiper-slide">1975年</div>
<div class="swiper-slide">1976年</div>
<div class="swiper-slide">1977年</div>
<div class="swiper-slide">1978年</div>
<div class="swiper-slide">1979年</div>
<div class="swiper-slide">1980年</div>
<div class="swiper-slide">1981年</div>
<div class="swiper-slide">1982年</div>
<div class="swiper-slide">1983年</div>
<div class="swiper-slide">1984年</div>
<div class="swiper-slide">1985年</div>
<div class="swiper-slide">1986年</div>
<div class="swiper-slide">1987年</div>
<div class="swiper-slide">1988年</div>
<div class="swiper-slide">1989年</div>
<div class="swiper-slide">1990年</div>
<div class="swiper-slide">1991年</div>
<div class="swiper-slide">1992年</div>
<div class="swiper-slide">1993年</div>
<div class="swiper-slide">1994年</div>
<div class="swiper-slide">1995年</div>
<div class="swiper-slide">1996年</div>
<div class="swiper-slide">1997年</div>
<div class="swiper-slide">1998年</div>
<div class="swiper-slide">1999年</div>
<div class="swiper-slide">2000年</div>
<div class="swiper-slide">2001年</div>
<div class="swiper-slide">2002年</div>
<div class="swiper-slide">2003年</div>
<div class="swiper-slide">2004年</div>
<div class="swiper-slide">2005年</div>
<div class="swiper-slide">2006年</div>
<div class="swiper-slide">2007年</div>
<div class="swiper-slide">2008年</div>
<div class="swiper-slide">2009年</div>
<div class="swiper-slide">2010年</div>
<div class="swiper-slide">2011年</div>
<div class="swiper-slide">2012年</div>
<div class="swiper-slide">2013年</div>
<div class="swiper-slide">2014年</div>
<div class="swiper-slide">2015年</div>
<div class="swiper-slide">2016年</div>
<div class="swiper-slide">2017年</div>
<div class="swiper-slide">2018年</div>
<div class="swiper-slide">2019年</div>
<div class="swiper-slide">2020年</div>
<div class="swiper-slide">2021年</div>
<div class="swiper-slide">2022年</div>
<div class="swiper-slide">2023年</div>
<div class="swiper-slide">2024年</div>
<div class="swiper-slide">2025年</div>
<div class="swiper-slide">2026年</div>
<div class="swiper-slide">2027年</div>
<div class="swiper-slide">2028年</div>
<div class="swiper-slide">2029年</div>
<div class="swiper-slide">2030年</div>
<div class="swiper-slide">2031年</div>
<div class="swiper-slide">2032年</div>
<div class="swiper-slide">2033年</div>
<div class="swiper-slide">2034年</div>
<div class="swiper-slide">2035年</div>
<div class="swiper-slide">2036年</div>
<div class="swiper-slide">2037年</div>
<div class="swiper-slide">2038年</div>
<div class="swiper-slide">2039年</div>
<div class="swiper-slide">2040年</div>
<div class="swiper-slide">2041年</div>
<div class="swiper-slide">2042年</div>
<div class="swiper-slide">2043年</div>
<div class="swiper-slide">2044年</div>
<div class="swiper-slide">2045年</div>
<div class="swiper-slide">2046年</div>
<div class="swiper-slide">2047年</div>
<div class="swiper-slide">2048年</div>
<div class="swiper-slide">2049年</div>
</div>
</div>
</div>
<div class="swiper-box-li">
<div class="swiper-container3 nbxs">
<div class="swiper-wrapper month">
<div class="swiper-slide">1月</div>
<div class="swiper-slide">2月</div>
<div class="swiper-slide">3月</div>
<div class="swiper-slide">4月</div>
<div class="swiper-slide">5月</div>
<div class="swiper-slide">6月</div>
<div class="swiper-slide">7月</div>
<div class="swiper-slide">8月</div>
<div class="swiper-slide">9月</div>
<div class="swiper-slide">10月</div>
<div class="swiper-slide">11月</div>
<div class="swiper-slide">12月</div>
</div>
</div>
</div>
<div class="swiper-box-li">
<div class="swiper-container4 nbxs">
<div class="swiper-wrapper date">
<div class="swiper-slide">1日</div>
<div class="swiper-slide">2日</div>
<div class="swiper-slide">3日</div>
<div class="swiper-slide">4日</div>
<div class="swiper-slide">5日</div>
<div class="swiper-slide">6日</div>
<div class="swiper-slide">7日</div>
<div class="swiper-slide">8日</div>
<div class="swiper-slide">9日</div>
<div class="swiper-slide">10日</div>
<div class="swiper-slide">11日</div>
<div class="swiper-slide">12日</div>
<div class="swiper-slide">13日</div>
<div class="swiper-slide">14日</div>
<div class="swiper-slide">15日</div>
<div class="swiper-slide">16日</div>
<div class="swiper-slide">17日</div>
<div class="swiper-slide">18日</div>
<div class="swiper-slide">19日</div>
<div class="swiper-slide">20日</div>
<div class="swiper-slide">21日</div>
<div class="swiper-slide">22日</div>
<div class="swiper-slide">23日</div>
<div class="swiper-slide">24日</div>
<div class="swiper-slide">25日</div>
<div class="swiper-slide">26日</div>
<div class="swiper-slide">27日</div>
<div class="swiper-slide">28日</div>
<div class="swiper-slide">29日</div>
<div class="swiper-slide">30日</div>
<div class="swiper-slide">31日</div>
</div>
</div>
</div>
</div>
<div class="tc-bot">
<div class="tc-bot-left">回到今天</div>
<div class="tc-bot-right">确定</div>
<i></i>
</div>
</div>
</section>
<script type="text/javascript" src="js/common.js"></script>
<script>
//全局的年月日，适用于任何时候获取今天的年月日。（很重要）
var sev_m, sev_y, sev_d, active = 3;
var mySwiper = new Swiper('.swiper-container', {
initialSlide: 1,
loop: true,
speed: 400,
followFinger: false,
prevButton: '.js_prev',
nextButton: '.js_next',
onSlideChangeStart: function(swiper) {
//swiper.params.allowSwipeToPrev = false;
swiper.lockSwipes();
},
onSlideChangeEnd: function(swiper) {
var nows = $(".swiper-slide-active").find("table").attr("id");
if (nows == 'now2')
return;
nows = parseInt(nows.substr(1, 1));
//console.log(active,nows);
if (nows == active)
return;
if (active == 4 && nows == 5) {
var fors = 1;
sev_m++;
if (sev_m > 12) {
sev_m = 1;
sev_y++;
}
var nowweak = new Date(sev_y, sev_m - 1, 1).getDay();
get_first(nowweak, sev_y, sev_m, 0, "d2");
var lastm = sev_m - 1;
var lasty = sev_y;
if (lastm < 1) {
lastm = 12;
lasty--;
}
var nm = sev_m + 1;
var ny = sev_y;
if (nm > 12) {
nm = 1;
ny++;
}
var nowweak = new Date(ny, nm - 1, 1).getDay();
var lastweek = new Date(lasty, lastm - 1, 1).getDay();
get_first(lastweek, lasty, lastm, 0, "d" + fors);
get_first(nowweak, ny, nm, 0, "d3");
$("#ymym").html(sev_y + "年" + sev_m + "月");
active = 5;
} else if (active == 2 && nows == 1) {
var fors = 5;
var nextweak = new Date(sev_y, sev_m - 1, 1).getDay();
get_first(nextweak, sev_y, sev_m, 0, "d" + fors);
sev_m--;
if (sev_m < 1) {
sev_m = 12;
sev_y--;
}
var nowweak = new Date(sev_y, sev_m - 1, 1).getDay();
get_first(nowweak, sev_y, sev_m, 0, "d4");
var nm = sev_m - 1;
var ny = sev_y;
if (nm < 1) {
nm = 12;
ny--;
}
var nowweak = new Date(ny, nm - 1, 1).getDay();
//get_first(nowweak, ny, nm, 0, "d4");
get_first(nowweak, ny, nm, 0, "d3");
$("#ymym").html(sev_y + "年" + sev_m + "月");
active = 1;
} else if (active == 5 && nows == 3) {
var fors = 4;
var lastm = sev_m;
var lasty = sev_y;
sev_m++;
if (sev_m > 12) {
sev_m = 1;
sev_y++;
}
var nm = sev_m + 1;
var ny = sev_y;
if (nm > 12) {
nm = 1;
ny++;
}
var nowweak = new Date(ny, nm - 1, 1).getDay();
get_first(nowweak, ny, nm, 0, "d" + fors);
var nowweak = new Date(lasty, lastm - 1, 1).getDay();
get_first(nowweak, lasty, lastm, 0, "d2");
$("#ymym").html(sev_y + "年" + sev_m + "月");
active = 3;
} else if (active == 1 && nows == 3) {
var fors = 2;
var lastm = sev_m;
var lasty = sev_y;
sev_m--;
if (sev_m < 1) {
sev_m = 12;
sev_y--;
}
var nm = sev_m - 1;
var ny = sev_y;
if (nm < 1) {
nm = 12;
ny--;
}
var nowweak = new Date(ny, nm - 1, 1).getDay();
get_first(nowweak, ny, nm, 0, "d" + fors);
var nowweak = new Date(lasty, lastm - 1, 1).getDay();
get_first(nowweak, lasty, lastm, 0, "d4");
$("#ymym").html(sev_y + "年" + sev_m + "月");
active = 3;
} else if (active == 1 && nows == 5) {
var fors = 3;
var lastm = sev_m;
var lasty = sev_y;
sev_m++;
if (sev_m > 12) {
sev_m = 1;
sev_y++;
}
var nm = sev_m + 1;
var ny = sev_y;
if (nm > 12) {
nm = 1;
ny++;
}
var nowweak = new Date(ny, nm - 1, 1).getDay();
get_first(nowweak, ny, nm, 0, "d" + fors);
$("#ymym").html(sev_y + "年" + sev_m + "月");
active = 5;
} else if (active == 5 && nows == 1) {
var fors = 3;
sev_m--;
if (sev_m < 1) {
sev_m = 12;
sev_y--;
}
var lastm = sev_m;
var lasty = sev_y;
var nm = sev_m - 1;
var ny = sev_y;
if (nm < 1) {
nm = 12;
ny--;
}
var nowweak = new Date(ny, nm - 1, 1).getDay();
var lastweak = new Date(lasty, sev_m - 1, 1).getDay();
get_first(nowweak, ny, nm, 0, "d" + fors);
console.log(lasty,lastm)
get_first(lastweak, lasty, sev_m, 0, "d4");
$("#ymym").html(sev_y + "年" + sev_m + "月");
active = 1;
} else if (active > nows) {
var fors = nows - 1;
if (fors < 1)
fors = 5;
sev_m--;
if (sev_m < 1) {
sev_m = 12;
sev_y--;
}
var nm = sev_m - 1;
var ny = sev_y;
if (nm < 1) {
nm = 12;
ny--;
}
var nowweak = new Date(ny, nm - 1, 1).getDay();
get_first(nowweak, ny, nm, 0, "d" + fors);
$("#ymym").html(sev_y + "年" + sev_m + "月");
active = nows;
} else if (active < nows) {
var fors = nows + 1;
if (fors > 5)
fors = 1;
sev_m++;
if (sev_m > 12) {
sev_m = 1;
sev_y++;
}
var nm = sev_m + 1;
var ny = sev_y;
if (nm > 12) {
nm = 1;
ny++;
}
var nowweak = new Date(ny, nm - 1, 1).getDay();
get_first(nowweak, ny, nm, 0, "d" + fors);
$("#ymym").html(sev_y + "年" + sev_m + "月");
active = nows;
}
var trLength = $("#d"+nows).find("tr").length;
if(trLength==6){
$(".swiper-container").css("paddingBottom",".45rem");
}else{
$(".swiper-container").css("paddingBottom","");
}
swiper.unlockSwipes();
}
})
</script>
<script>
var yl = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
window.onload = function() {
$("#now3").attr("id", "d1");
$("#now1").attr("id", "d2");
$("#now2").attr("id", "d3");
$("#now3").attr("id", "d4");
$("#now1").attr("id", "d5");
var globledate = new Date();
var y = globledate.getFullYear();
var m = globledate.getMonth() + 1;
var d = globledate.getDate();
sev_m = m;
sev_y = y;
sev_d = d;
var nowweak = new Date(y, m - 1, 1).getDay();
if (nowweak == 7) nowweak = 0;
get_first(nowweak, y, m, d, "d3");
set_top(0);
m = m + 1;
if (m > 12) {
m = 1;
y += 1;
}
nowweak = new Date(y, m - 1, 1).getDay();
get_first(nowweak, y, m, 0, "d4");
m = sev_m - 1;
if (m < 1) {
m = 12;
y = sev_y - 1;
}
nowweak = new Date(y, m - 1, 1).getDay();
get_first(nowweak, y, m, 0, "d2");
$("#ymym").html(sev_y + "年" + sev_m + "月");
$(".js_jin").click(function() {
active = 3;
var globledate = new Date();
var y = globledate.getFullYear();
var m = globledate.getMonth() + 1;
var d = globledate.getDate();
sev_m = m;
sev_y = y;
sev_d = d;
var nowweak = new Date(y, m - 1, 1).getDay();
if (nowweak == 7) nowweak = 0;
get_first(nowweak, y, m, d, "d3");
set_top(0);
m = m + 1;
if (m > 12) {
m = 1;
y += 1;
}
nowweak = new Date(y, m - 1, 1).getDay();
get_first(nowweak, y, m, 0, "d4");
m = sev_m - 1;
if (m < 1) {
m = 12;
y = sev_y - 1;
}
nowweak = new Date(y, m - 1, 1).getDay();
get_first(nowweak, y, m, 0, "d2");
$("#ymym").html(sev_y + "年" + sev_m + "月");
mySwiper.slideTo(2, 500, false);
});
mySwiper.unlockSwipes();
};
//$(window).ajaxStart(function(){
// $(".covers").show();
// })
// $(window).ajaxStop(function(){
// $(".covers").hide();
// });
function jump(yyyy, mm, dd) {
sev_y = parseInt(yyyy);
sev_m = parseInt(mm);
sev_d = parseInt(dd);
active = 3;
var globledate = new Date(yyyy, parseInt(mm) - 1, parseInt(dd));
//var nowweak = globledate.getDay();
var y = globledate.getFullYear();
var m = globledate.getMonth() + 1;
var d = globledate.getDate();
//console.log("globledate:",y,m,d);
var sev_m_tmp = m;
var sev_y_tmp = y;
var sev_d_tmp = d;
var nowweak = new Date(y, m - 1, 1).getDay();
if (nowweak == 7) nowweak = 0;
get_first(nowweak, y, m, d, "d3");
//set_top(0);
m = m + 1;
if (m > 12) {
m = 1;
y += 1;
}
nowweak = new Date(y, m - 1, 1).getDay();
get_first(nowweak, y, m, 0, "d4");
m = sev_m - 1;
if (m < 1) {
m = 12;
y = sev_y - 1;
}
nowweak = new Date(y, m - 1, 1).getDay();
get_first(nowweak, y, m, 0, "d2");
$("#ymym").html(sev_y + "年" + sev_m + "月");
$(".covers").hide();
mySwiper.slideTo(2, 500, false);
click_sev();
}
function click_sev() {
$("#d3").find("td").each(function() {
if ($(this).attr("data_y") == sev_y && $(this).attr("data_m") == sev_m && $(this).attr("data_d") == sev_d) {
$(this).click();
}
});
}
function get_first(a, b, c, d, e) {
var str = '<tr>';
if ((c - 2) < 0) {
var ldays = 31;
var lm = 12;
var lb = b - 1;
} else {
var ldays = yl[c - 2];
var lm = c - 1;
var lb = b;
}
if (c == 12) {
var xdays = 31;
var xm = 1;
var xb = b + 1;
} else {
var xdays = yl[c];
var xm = c + 1;
var xb = b;
}
if (ldays == 28) {
if ((lb % 4 == 0 && lb % 100 != 0) || (lb % 100 == 0 && lb % 400 == 0)) {
ldays = 29;
}
}
if (xdays == 28) {
if ((xb % 4 == 0 && xb % 100 != 0) || (xb % 100 == 0 && xb % 400 == 0)) {
xdays = 29;
}
}
var dd;
if (yl[c - 1] == 28) {
if ((b % 4 == 0 && b % 100 != 0) || (b % 100 == 0 && b % 400 == 0)) {
dd = 29;
} else {
dd = 28;
}
} else {
dd = yl[c - 1];
}
var num = 1;
for (var i = a; i > 0; i--) {
var bday = ldays - i + 1;
var ly = LunarDate.GetLunarDayDetail(lb, lm, bday);
var jq = getjq(lb, lm, bday);
if (jq) {
ly = '<font color="#00b7ec">' + jq;
}
var jd = "";
var hb = lb + "-" + lm + "-" + bday;
// if (fj.indexOf(hb) >= 0) {
// jd = "<span class='fangjia'></span>";
// }
// if (sb.indexOf(hb) >= 0) {
// jd = "<span class='shangban'></span>";
// }
// if (gj.indexOf(hb) >= 0) {
// ly = '<font color="#00b7ec">' + gjs[gj.indexOf(hb)];
// }
str += ' <td data_y="' + lb + '" data_m="' + lm + '" data_d="' + bday + '" class="list not_this js_up"><i>' + bday + '</i><em>' + ly + '</em>' + jd + '</td>';
if (num % 7 == 0) {
str += '</tr><tr>';
}
num++;
}
for (var i = 1; i <= dd; i++) {
var bday = ldays - i + 1;
var ly = LunarDate.GetLunarDayDetail(b, c, i);
var jq = getjq(b, c, i);
if (jq) {
ly = '<font color="#00b7ec">' + jq;
}
var jd = "";
var hb = b + "-" + c + "-" + i;
if (new Date().getDate() == i && b == new Date().getFullYear() && c == (new Date().getMonth() + 1)) {
str += ' <td data_y="' + b + '" data_m="' + c + '" data_d="' + i + '" class="list today"><i>' + i + '</i><em>' + ly + '</em>' + jd + '</td>';
} else {
str += ' <td data_y="' + b + '" data_m="' + c + '" data_d="' + i + '" class="list"><i>' + i + '</i><em>' + ly + '</em>' + jd + '</td>';
}
if (num % 7 == 0) {
str += '</tr><tr>';
}
num++;
}
var last = 42 - a - dd;
if(last<=6){
for (var i = 1; i <= last; i++) {
var ly = LunarDate.GetLunarDayDetail(xb, xm, i);
var jq = getjq(xb, xm, i);
if (jq) {
ly = '<font color="#00b7ec">' + jq;
}
var jd = "";
var hb = xb + "-" + xm + "-" + i;
str += ' <td data_y="' + xb + '" data_m="' + xm + '" data_d="' + i + '" class="list not_this js_down"><i>' + i + '</i><em>' + ly + '</em>' + jd + '</td>';
if (num % 7 == 0) {
str += '</tr><tr>';
}
num++;
}
}
if(str.substring(str.length-4,str.length)=="<tr>"){
str = str.substring(0,str.length-4);
}
document.getElementById(e).innerHTML = str;
bind_click(e);
}
function bind_click(a) {
$("#" + a).find("td").unbind("click");
$("#" + a).find("td").each(function() {
if ($(this).hasClass('not_this')) {
$(this).click(function() {
jump($(this).attr('data_y'), $(this).attr('data_m'), $(this).attr('data_d'));
});
} else {
$(this).click(function() {
set_top($(this));
});
}
});
}
function set_top(a) {
if (!a) {
var weeks = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
var data = new Date();
var weekk = weeks[data.getDay() - 1];
var yue = LunarDate.GetLunarDay(data.getFullYear(), data.getMonth(), data.getDate());
var shu = data.getDate();
document.getElementById("top_shu").innerHTML = shu;
sev_d = parseInt(shu);
document.getElementById("top_week").innerHTML = weekk;
document.getElementById("top_yue").innerHTML = yue;
} else {
var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var y = a.attr("data_y");
var m = parseInt(a.attr("data_m")) - 1;
if (m < 0) m = 11;
var d = parseInt(a.attr("data_d"));
var weekk = weeks[new Date(y, m, d).getDay()];
var ms = parseInt(a.attr("data_m"));
var yue = LunarDate.GetLunarDay(y, ms, d);
document.getElementById("top_shu").innerHTML = d;
sev_d = parseInt(d);
document.getElementById("top_week").innerHTML = weekk;
document.getElementById("top_yue").innerHTML = yue;
$(".xuanzhong").removeClass('xuanzhong');
a.addClass("xuanzhong");
}
}
var LunarDate = {
madd: new Array(0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334),
HsString: '甲乙丙丁戊己庚辛壬癸',
EbString: '子丑寅卯辰巳午未申酉戌亥',
NumString: "一二三四五六七八九十",
MonString: "正二三四五六七八九十冬腊",
CalendarData: new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95),
Year: null,
Month: null,
Day: null,
TheDate: null,
GetBit: function(m, n) {
return (m >> n) & 1;
},
e2c: function() {
this.TheDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
var total, m, n, k;
var isEnd = false;
var tmp = this.TheDate.getFullYear();
total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + this.madd[this.TheDate.getMonth()] + this.TheDate.getDate() - 38;
if (this.TheDate.getYear() % 4 == 0 && this.TheDate.getMonth() > 1) {
total++;
}
for (m = 0;; m++) {
k = (this.CalendarData[m] < 0xfff) ? 11 : 12;
for (n = k; n >= 0; n--) {
if (total <= 29 + this.GetBit(this.CalendarData[m], n)) {
isEnd = true;
break;
}
total = total - 29 - this.GetBit(this.CalendarData[m], n);
}
if (isEnd)
break;
}
this.Year = 1921 + m;
this.Month = k - n + 1;
this.Day = total;
if (k == 12) {
if (this.Month == Math.floor(this.CalendarData[m] / 0x10000) + 1) {
this.Month = 1 - this.Month;
}
if (this.Month > Math.floor(this.CalendarData[m] / 0x10000) + 1) {
this.Month--;
}
}
},
GetcDateString: function(tip) {
if (tip == 1) {
var ts = (this.Day < 11) ? "初" : ((this.Day < 20) ? "十" : ((this.Day < 30) ? "廿" : "三十"));
if (this.Day % 10 != 0 || this.Day == 10) {
ts += this.NumString.charAt((this.Day - 1) % 10);
}
return ts;
}
var tmp = "";
// tmp += this.HsString.charAt((this.Year - 4) % 10);
// tmp += this.EbString.charAt((this.Year - 4) % 12);
// tmp += "年 ";
if (this.Month < 1) {
//tmp += "(闰)";
tmp += this.MonString.charAt(-this.Month - 1);
} else {
tmp += this.MonString.charAt(this.Month - 1);
}
tmp += "月";
tmp += (this.Day < 11) ? "初" : ((this.Day < 20) ? "十" : ((this.Day < 30) ? "廿" : "三十"));
if (this.Day % 10 != 0 || this.Day == 10) {
tmp += this.NumString.charAt((this.Day - 1) % 10);
}
return tmp;
},
GetLunarDay: function(solarYear, solarMonth, solarDay) {
if (solarYear < 1921 || solarYear > 2020) {
return "";
} else {
solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
this.e2c(solarYear, solarMonth, solarDay);
return this.GetcDateString(0);
}
},
GetLunarDayDetail: function(solarYear, solarMonth, solarDay) {
if (solarYear < 1921 || solarYear > 2020) {
return "";
} else {
solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
this.e2c(solarYear, solarMonth, solarDay);
return this.GetcDateString(1);
}
}
};
function getjq(yyyy, mm, dd) {
if(yyyy==2016&&mm==12&&dd==7){
return "大雪";
}
if(yyyy==2016&&mm==12&&dd==6){
return "";
}
mm = mm - 1;
var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
var tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2 + 1] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
var tmp2 = tmp1.getUTCDate();
var solarTerms = "";
if (tmp2 == dd)
solarTerms = solarTerm[mm * 2 + 1];
tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
tmp2 = tmp1.getUTCDate();
if (tmp2 == dd)
solarTerms = solarTerm[mm * 2];
return solarTerms;
}
$(function() {
$(".prorup").on("click", function() {
$(".prorup").hide();
$(".jie").hide();
$(".layer").hide();
});
$(".jqclass").click(function() {
var riziss = $(this).attr('data');
var srt = riziss.split("-");
$(".prorup").hide();
$(".layer").hide();
jump(srt[0], srt[1], srt[2]);
$(".jie").hide();
});
});
$('.date').on('click', function() {
$('.tc').show();
$('.tc-innner').show();
tc();
});
var e = 1;
function tc() {
var b, c, d;
var myDate = new Date();
if (e == 0) {
b = myDate.getFullYear() - 1900;
c = myDate.getMonth();
d = myDate.getDate()-1;
} else {
b = sev_y - 1900;
c = sev_m - 1;
d = sev_d - 1;
}
e = 1;
var mySwiper = new Swiper('.swiper-container2', {
direction: 'vertical',
initialSlide: b,
slidesPerView: 'auto',
roundLengths: true,
centeredSlides: true,
watchSlidesProgress: true,
watchSlidesVisibility: true,
freeMode: true,
freeModeMomentumRatio: 1,
freeModeSticky: true,
onTouchMove: function(swiper) {
var b1 = $('.year').children('.swiper-slide-active').html();
$('.i-year').html(b1);
},
onSlideChangeEnd: function(swiper) {
var b1 = $('.year').children('.swiper-slide-active').html();
$('.i-year').html(b1);
},
});
var mySwiper = new Swiper('.swiper-container3', {
direction: 'vertical',
initialSlide: c,
slidesPerView: 'auto',
roundLengths: true,
centeredSlides: true,
watchSlidesProgress: true,
watchSlidesVisibility: true,
freeMode: true,
freeModeMomentumRatio: 1,
freeModeSticky: true,
onTouchMove: function(swiper) {
var b1 = $('.month').children('.swiper-slide-active').html();
$('.i-month').html(b1);
},
onSlideChangeEnd: function(swiper) {
var b1 = $('.month').children('.swiper-slide-active').html();
$('.i-month').html(b1);
},
});
var mySwiper = new Swiper('.swiper-container4', {
direction: 'vertical',
initialSlide: d,
slidesPerView: 'auto',
roundLengths: true,
centeredSlides: true,
watchSlidesProgress: true,
watchSlidesVisibility: true,
freeMode: true,
freeModeMomentumRatio: 1,
freeModeSticky: true,
onTouchMove: function(swiper) {
var b1 = $('.date').children('.swiper-slide-active').html();
$('.i-date').html(b1);
},
onSlideChangeEnd: function(swiper) {
var b1 = $('.date').children('.swiper-slide-active').html();
$('.i-date').html(b1);
},
});
};
$('.tc-bot-left').click(function() {
e = 0;
tc();
});
$('.tc-bot-right').click(function() {
$('.tc').hide();
$('.tc-innner').hide();
var yyyy = parseInt($('.year').children('.swiper-slide-active').html());
var mm = parseInt($('.month').children('.swiper-slide-active').html());
var dd = parseInt($('.date').children('.swiper-slide-active').html());
if (mm != sev_m || yyyy != sev_y || dd != sev_d) {
jump(yyyy, mm, dd);
};
});
$(".tc").on("click",function(){
$(".tc-innner").hide();
$(this).hide();
});
</script>
</body>
</html>JS代码(common.js):
//- 设置html标签font-size (function(doc,win){
var _root = doc.documentElement,resizeEvent = 'orientationchange' in window ? 'orientationchange':'resize',resizeCallback = function(){
var clientWidth = _root.clientWidth,fontSize = 100;
if (!clientWidth) return;
if (clientWidth < 750){
fontSize = 100 * (clientWidth / 375);
}
else{
fontSize = 100 * (750 / 375);
}
_root.style.fontSize = fontSize + 'px';
}
;
if (!doc.addEventListener) return;
win.addEventListener(resizeEvent,resizeCallback,false);
doc.addEventListener('DOMContentLoaded',resizeCallback,false);
}
)(document,window);
//字体大小的自适应，加上class=autosize即可 $(function(){
function e(){
var e = document.documentElement.clientWidth;
var font_size = e * .04 + "px";
var font_size_small = e * .03 + "px";
var font_size_big = e * .05 + "px";
//var padding = e * .01;
//if(padding>10){
padding = 10}
$('.autosize').css('font-size',font_size);
$('.autosize2').css('font-size',font_size_small);
$('.autosize3').css('font-size',font_size_big);
//$('.swiper-slide img').css('padding',padding);
}
e();
$(window).on("orientationchange,resize",function(){
e();
}
)}
);
CSS代码(common.css):
/* CSS Document */
@charset "utf-8";*{padding:0;margin:0;/*border:0;*/
-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent;-ms-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;tap-highlight-color:transparent;}
*:not(input,textarea){-webkit-touch-callout:none;-webkit-user-select:none;}
/*移动端*/
html{font-size:625%;font-size:100px;}
body{font-size:0.16rem;}
body{font-family:Arial,"Microsoft Yahei","微软雅黑";-webkit-font-smoothing:antialiased;}
html,body{height:100%;}
blockquote,body,dd,dir,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,input[type=checkbox],input[type=radio],input[type=range],listing,menu,ol,p,plaintext,pre,ul,xmp{margin:0;}
button,dir,fieldset,input,input[type=button],input[type=checkbox],input[type=file],input[type=hidden],input[type=image],input[type=password],input[type=radio],input[type=range],input[type=reset],input[type=search],input[type=submit],isindex,legend,menu,ol,textarea,ul{padding:0;}
html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent;}
input,select,textarea{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;border:0;border-radius:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
button,input,select{color:inherit}
button,input,select,textarea{font-family:inherit;font-weight:inherit;font-size:inherit;margin:0;}
address,cite,dfn,em,i,var{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;font-family:normal;}
fieldset,iframe{border:0;}
ol,ul{list-style:none}
a{color:#333;text-decoration:none;}
/*IE7不支持的清除浮动*/
.clearfix:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0;}
* html .clearfix{zoom:1;}
/*全版本兼容清楚浮动*/
.clears{clear:both;line-height:0px;overflow:hidden;font-size:0px;height:0px;}
input,textarea,select{font-family:Verdana,Arial,"Microsoft Yahei","微软雅黑";}
a{color:#333;text-decoration:none;}
a:hover{color:inherit;}
.mui-flex{display:-webkit-box;/* OLD - iOS 6-,Safari 3.1-6 */
display:-moz-box;/* OLD - Firefox 19- (buggy but mostly works) */
display:-ms-flexbox;/* TWEENER - IE 10 */
display:-webkit-flex;/* NEW - Chrome */
display:flex;/* NEW,Spec - Opera 12.1,Firefox 20+ */
-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.mui-flex .mui-flex{display:-webkit-box !important;/* OLD - iOS 6-,Safari 3.1-6 */
display:-moz-box !important;/* OLD - Firefox 19- (buggy but mostly works) */
display:-ms-flexbox !important;/* TWEENER - IE 10 */
display:-webkit-flex !important;/* NEW - Chrome */
display:flex !important;/* NEW,Spec - Opera 12.1,Firefox 20+ */
-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.mui-flex,.mui-flex *,.mui-flex:after,.mui-flex:before{box-sizing:border-box}
.mui-flex.vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
.mui-flex.vertical.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}
.mui-flex.vertical >.cell{width:auto}
.mui-flex.vertical > .cell > .inner{position:absolute;width:100%;height:100%}
.mui-flex.horizental{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}
.mui-flex.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}
.mui-flex.justify-start{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
.mui-flex.justify-end{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}
.mui-flex.justify-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.mui-flex.justify-between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
.mui-flex.justify-around{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}
.mui-flex.align-start{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}
.mui-flex.align-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}
.mui-flex.align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.mui-flex.align-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}
.mui-flex.align-stretch .cell{height:auto !important}
.mui-flex.center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.mui-flex > .cell{-webkit-box-flex:1;/* OLD - iOS 6-,Safari 3.1-6 */
-moz-box-flex:1;/* OLD - Firefox 19- */
/*width:20%;/!* For old syntax,otherwise collapses. *!/*/
-webkit-flex:1;/* Chrome */
-ms-flex:1;/* IE 10 */
flex:1;/* NEW,Spec - Opera 12.1,Firefox 20+ */
width:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%;display:block;padding:0;position:relative}
.mui-flex.vertical > .cell{width:auto;height:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;/*max-height:100%;*/
/*max-width:inherit;*/
display:block;padding:0;position:relative}
.mui-flex > .cell.fixed{-webkit-box-flex:0 !important;-webkit-flex:none !important;-ms-flex:none !important;flex:none !important;width:auto}
.mui-flex > .cell.self-start{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}
.mui-flex > .cell.self-end{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}
.mui-flex > .cell.self-center{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}
.cat{-webkit-box-flex:3;-moz-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;}
/*common font*/
.f12{font-size:.06rem;}
.f14{font-size:.07rem;}
.f16{font-size:.08rem;}
.f18{font-size:.09rem;}
.f20{font-size:.1rem;}
.f22{font-size:.11rem;}
.f24{font-size:.12rem;}
.f26{font-size:.13rem;}
.f28{font-size:.14rem;}
.f30{font-size:.15rem;}
.f32{font-size:.16rem;}
.f34{font-size:.17rem;}
.f36{font-size:.18rem;}
.f38{font-size:.19rem;}
.f40{font-size:.2rem;}
.f48{font-size:.24rem;}
.f60{font-size:.3rem;}
/*comment margin-top*/
.m12{margin-top:.06rem;}
.m20{margin-top:.1rem;}
.m22{margin-top:.11rem;}
/*comment height*/
.h66{height:.33rem;}
.h90{height:.45rem;}
.covers{position:fixed;width:100%;height:100%;left:0px;top:0px;background:rgba(0,0,0,.8);text-align:center;z-index:99999999;display:none;}
.covers img{width:450px;height:340px;margin-top:100px;}
CSS代码(index.css):
/* CSS Document */
@charset "utf-8";.grid{width:94%;margin:0 auto;}
.header-main{width:100%;position:fixed;top:0;left:0;z-index:10;}
.header{background:#DA5751;height:44px;border-bottom:1px solid #f07575;width:94%;padding:0 3%;display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap;align-items:center;color:#fff;/* position:fixed;top:0;left:0;z-index:10;*/
}
.header .child.return{display:flex;display:-webkit-flex;display:-ms-flexbox;justify-content:flex-start;flex:0;-ms-flex:0;-webkit-flex:0;flex-grow:0;flex-shrink:0;flex-basis:20%;}
.header .child.return i{width:.12rem;height:.2rem;background:url(../images/BACK.png) no-repeat;background-size:cover;}
.header .child.date{display:flex;display:-webkit-flex;display:-ms-flexbox;justify-content:center;align-items:center;flex:0;-ms-flex:0;-webkit-flex:0;flex-grow:0;flex-shrink:0;flex-basis:60%;}
.header .child.date i{display:inline-block;width:.09rem;height:.05rem;background:url(../images/calendar_bottom.png) no-repeat;background-size:cover;margin-left:.1rem;}
.header .child.almanac{display:flex;display:-webkit-flex;display:-ms-flexbox;justify-content:flex-end;flex:0;-ms-flex:0;-webkit-flex:0;flex-grow:0;flex-shrink:0;flex-basis:20%;}
.share img{width:.3rem;height:.3rem;vertical-align:middle;}
/*start day*/
.content{padding-top:1.89rem;}
.day{height:.77rem;background:#DA5751;color:#fff;}
.day .grid{width:94%;height:100%;padding:0 3%;display:flex;display:-webkit-flex;display:-ms-flexbox;align-items:center;}
.day-left{display:flex;display:-webkit-flex;display:-ms-flexbox;flex:0;flex-grow:0;flex-shrink:0;flex-basis:56%;-webkit-flex:0;-webkit-flex-grow:0;-webkit-flex-shrink:0;-webkit-flex-basis:56%;}
.day-right{display:flex;display:-webkit-flex;display:-ms-flexbox;flex:0;flex-grow:0;flex-shrink:0;flex-basis:44%;-webkit-flex:0;-webkit-flex-grow:0;-webkit-flex-shrink:0;-webkit-flex-basis:44%;align-items:center;justify-content:flex-end;-webkit-justify-content:flex-end;-ms-justify-content:flex-end;}
.day-left h1{font-size:.6rem;padding-right:.08rem;}
.day-left .top-contrl p{display:flex;display:flex;display:-webkit-flex;align-items:center;flex-wrap:wrap;-webkit-align-items:center;-webkit-flex-wrap:wrap;margin-top:.1rem;}
.top-contrl p span{width:.1rem;height:.06rem;background:url(../images/cotrl-bottom.png) no-repeat;background-size:cover;/* margin-left:.1rem;*/
}
.top-contrl i{font-size:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.day-left p em{font-size:.15rem;}
.day-left p i{margin-top:.01rem;display:block;font-size:.2rem;}
/*.day-right{float:right;height:100%;}
*/
.day-right .yun{height:100%;display:flex;display:-webkit-flex;display:-ms-flexbox;align-items:center;-webkit-align-items:center;}
.day-right .yun span{display:inline-block;width:.3rem;height:.3rem;line-height:.3rem;text-align:center;border:2px solid #fff;border-radius:50%;margin-left:.15rem;/*align-self:center;*/
}
.note{width:100%;height:.68rem;border-bottom:1px solid #ddd;background:#fff;}
.note .grid{padding:.12rem 0;display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap;justify-content:space-between;}
.note .grid .note-left{flex:0;flex-grow:0;flex-shrink:0;flex-basis:75%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.note .grid .note-right{display:flex;display:-webkit-flex;display:-ms-flexbox;align-items:center;flex:0;flex-grow:0;flex-shrink:0;flex-basis:25%;justify-content:flex-end;color:#333;}
.note .grid .note-right i{width:.07rem;height:.13rem;background:url(../images/calendar_arrow_right.png) no-repeat;background-size:cover;margin-left:.11rem;}
.note .grid .note-left p{width:100%;font-size:.14rem;line-height:1.6;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.note .grid .note-left p.yi i{color:#06b5f8;}
.note .grid .note-left p.ji i{color:#ec5252;}
.week ul{width:98%;padding:0 1%;display:flex;display:-webkit-flex;display:-ms-flexbox;height:.48rem;}
.week ul li{display:flex;display:-webkit-flex;display:-ms-flexbox;flex:auto;-ms-flex:auto;-webkit-flex:auto;justify-content:center;align-items:center;font-size:.13rem;}
.tables{font-size:.14rem;color:#666;font-family:"微软雅黑";display:flex;display:-webkit-flex;display:-ms-flexbox;}
.tables tbody{width:100%;}
.tables tbody tr{width:98%;padding:0 1%;display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap;-webkit-flex-wrap:wrap;}
.tables tbody tr td{border:2px solid #fff;flex:0;flex-grow:0;flex-shrink:0;flex-basis:13%;justify-content:center;padding:.04rem 0;position:relative;}
.tables .list i{display:flex;display:-webkit-flex;display:-ms-flexbox;font-size:.24rem;justify-content:center;}
.tables .list em{display:flex;display:-webkit-flex;display:-ms-flexbox;font-size:.12rem;justify-content:center;}
.swiper-slide table tr{text-align:center;height:.58rem;margin-bottom:.08rem;}
tr .not_this{color:#ccc !important;}
.today{background:#ec5252;color:#fff;border-radius:8px;}
.xuanzhong{border:2px solid #f20 !important;border-radius:8px;}
tr td:first-child{color:#f00;}
tr td:last-child{color:#f00;}
td{position:relative;}
td .fangjia{display:block;width:.14rem;height:.14rem;background:url(../images/calendar_img_relax.png) no-repeat;background-size:contain;position:absolute;right:0;top:0;}
td .shangban{display:block;width:.14rem;height:.14rem;background:url(../images/calendar_img_work.png) no-repeat;background-size:contain;position:absolute;right:0;top:0;}
/*******弹窗******/
.prorup{width:100%;height:100%;background:#000;position:fixed;top:0;left:0;z-index:12;opacity:0.4;display:none;}
.layer{position:fixed;width:94%;top:1.26rem;left:50%;margin-left:-47%;z-index:14;display:none;}
.layer .san{width:100%;display:block;height:.07rem;}
.layer .san i{display:inherit;width:0;height:0;border-left:.06rem solid transparent;border-right:.06rem solid transparent;border-bottom:.08rem solid #fff;float:right;margin-right:.6rem;}
.layer .jia{width:100%;background:#fff;border-radius:8px;}
.jia ul{width:100%;display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap;}
.jia ul li{height:.54rem;float:left;text-align:center;color:#333;flex:0;flex-grow:0;flex-shrink:0;flex-basis:49.8%;}
.jia ul li:first-of-type{border:0;}
.jia ul li:nth-child(2n){border-bottom:1px solid #eee;}
.jia ul li:nth-child(2n+1){border-right:1px solid #eee;border-bottom:1px solid #eee;}
.jia ul li span{display:block;font-size:.14rem;margin-top:.08rem;}
.jia ul li em{font-size:.12rem;}
.jie{position:fixed;width:94%;top:1.26rem;left:50%;margin-left:-47%;z-index:14;display:none;}
.jie .san{width:100%;display:block;height:.07rem;position:relative;}
.jie .san i{display:inherit;width:0;height:0;border-left:.06rem solid transparent;border-right:.06rem solid transparent;border-bottom:.08rem solid #fff;position:absolute;right:0;top:0;margin-right:.1rem;}
.jie .solar{width:100%;background:#fff;border-radius:8px;}
.jie .solar .solar-title{height:.5rem;text-align:center;color:#ec5252;line-height:.5rem;}
.solar ul{width:100%;}
.solar ul li{float:left;width:24.7%;text-align:center;line-height:.4rem;font-size:.14rem;color:#333;border-top:1px solid #eee;border-right:1px solid #eee;}
.solar ul li:nth-child(4){border-right:0;}
.solar ul li:nth-child(8){border-right:0;}
.solar ul li:nth-child(12){border-right:0;}
.solar ul li:nth-child(16){border-right:0;}
.solar ul li:nth-child(20){border-right:0;}
.solar ul li:nth-child(24){border-right:0;}
.dibu{height:.5rem;width:100%;}
.footer ul{width:100%;position:fixed;bottom:0;left:0;z-index:10;display:flex;display:-webkit-flex;display:-ms-flexbox;height:.49rem;border-top:1px solid #e3e3e3;background:#fff;}
.footer ul li{display:flex;display:-webkit-flex;display:-ms-flexbox;flex:auto;-ms-flex:auto;-webkit-flex:auto;align-items:center;position:relative;}
.footer ul li a{width:100%;display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap;justify-content:center;}
.footer ul li:nth-child(1) a i{display:inline-block;width:.21rem;height:.21rem;background:url(../images/btn_calendar_selected.png) no-repeat;background-size:cover;}
.footer ul li:nth-child(2) a i{display:inline-block;width:.21rem;height:.21rem;background:url(../images/btn_huangli.png) no-repeat;background-size:cover;}
.footer ul li a em{display:flex;display:-webkit-flex;display:-ms-flexbox;width:100%;justify-content:center;margin-top:.04rem;}
.footer ul li:nth-child(1) a{color:#ec5252;}
.footer ul li:nth-child(1):before{content:" ";position:absolute;right:0;top:15%;height:70%;background:#e3e3e3;width:1px;}
/*弹窗*/
.tc{width:100%;height:100%;background:rgba(0,0,0,0.4);position:fixed;top:0;left:0;bottom:0;z-index:12;display:none;}
.tc-innner{background:#fff;width:3.05rem;height:2.95rem;position:fixed;top:50%;left:50%;margin:-1.475rem 0 0 -1.525rem;z-index:14;border-radius:4px;overflow:hidden;display:none;}
.tc-innner h2{height:0.5rem;width:100%;box-sizing:border-box;padding:0 0.15rem;font-size:0.19rem;color:#ec5252;line-height:0.5rem;font-weight:normal;}
.title-right{float:right;width:1.1rem;height:0.24rem;border:1px #ec5252 solid;box-sizing:border-box;border-radius:10px;margin-top:0.125rem;overflow:hidden;}
.title-right .zblck{width:50%;height:100%;color:#ec5252;font-size:0.14rem;line-height:0.22rem;text-align:center;float:left;}
.title-right .active{background:#ec5252;color:#fff;}
.current-time{text-align:center;height:0.32rem;line-height:0.32rem;font-size:0.15rem;color:#666;}
.swiper-box{height:1.6rem;margin:0 0.15rem;box-sizing:border-box;margin-top:0.05rem;position:relative;}
.swiper-box i{width:100%;height:1px;background:#e3e3e3;display:block;position:absolute;left:0;}
.swiper-box .i1{top:0;}
.swiper-box .i2{top:0.53rem;}
.swiper-box .i3{top:1.06rem;}
.swiper-box-li{width:33%;float:left;text-align:center;overflow:hidden;}
.nbxs{height:1.6rem;}
.nbxs .swiper-slide{height:0.53rem;line-height:0.53rem;}
.nbxs .swiper-slide-active{color:#ec5252;}
.tc-bot{height:0.5rem;border-top:1px #e3e3e3 solid;position:relative;}
.tc-bot>div{float:left;width:50%;line-height:0.5rem;font-size:0.19rem;text-align:center;}
.tc-bot-left{color:#999;}
.tc-bot-right{color:#ec5252;}
.tc-bot i{display:block;width:1px;height:0.2rem;background:#e3e3e3;position:absolute;top:0.14rem;left:50%;margin-left:1px;}
/*loading*/
.loading{width:1.53rem;height:1.15rem;position:fixed;top:50%;left:50%;background:rgba(0,0,0,0.8);border-radius:6px;margin-left:-0.765rem;margin-top:-0.575rem;z-index:9999999999999999999999999999;}
.loading-bj{background:url(../images/loading.png);width:0.35rem;height:0.35rem;background-size:0.35rem;margin:0.3rem auto 0;animation:rotateIn 1s .2s linear infinite;-moz-animation:rotateIn 1s .2s linear infinite;-webkit-animation:rotateIn 1s .2s linear infinite;}
.loading p{color:#fff;font-size:0.14rem;text-align:center;margin-top:0.1rem;}
@-webkit-keyframes rotateIn{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
@-moz-keyframes rotateIn{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
.reduction-bj{background:url(../images/reduction.png);width:0.36rem;height:0.36rem;background-size:0.36rem;margin:0.3rem auto 0;}
.jg{background:url(../images/jg.png);background-size:0.36rem;}
.back2{background:url(../images/back.png) center no-repeat;background-size:0.12rem 0.2rem;}
分享到QQ
分享到微博
微信扫一扫
