javcascript 手写 日历

效果图：

html:

        

            

                
年月
                

                

            
            

                
日
                
一
                
二
                
三
                
四
                
五
                
六
            
            

                

                

            
        

js绘制日历：

//calendar start
var Calendar = function (id, first) {
    this.$container = document.getElementById(id);
    this.fullyear = 0;
    this.month = 0;
    this.week = 0;
    this.curday = 0;
    this.days = 0;
    this.index = 1;
    if (first != 1 && first != -1) {
        this.init(first);
    }
};
Calendar.prototype.init = function (first) {
    var date = new Date();
    this.fullyear = date.getFullYear();
    this.month = date.getMonth() + 1;
    this.week = date.getDay();
    this.curday = date.getDate();
    if (first == 1 || first == -1) { } else {
        this.days = this.getDays(this.fullyear, this.month);
    }
    this.fillDate();
};
Calendar.prototype.getDays = function (fullyear, month) {
    var day = new Date(fullyear, month, 0);
    //获取天数：
    var days = day.getDate();
    return days;
};
Calendar.prototype.setIndex = function (index) {
    this.index = index;
};
Calendar.prototype.setPreMonth = function (id, first) {
    var monher = this.month;

    this.calendar = new Calendar(id, -1);
    this.calendar.setIndex(0);
};
Calendar.prototype.setNextMonth = function (id, first) {
    var monher = this.month;
    this.calendar = new Calendar(id, 1);
    this.calendar.setIndex(1);
};

var htmlHeight = "";
var currentShowYear = '';
var currentShowMonth = '';
var totalMonthDays = '';
var currentMonNoO = '';
Calendar.prototype.fillDate = function (whitch) {
    var fullyear;
    if (whitch == 1) {
        fullyear = this.fullyear;
        var mon = ++this.month,
            month = mon < 10 ? '0' + mon : '' + mon;
        index = this.index;
        if (this.month > 12) {
            this.month = '0' + 1;
            fullyear = ++this.fullyear;
        }
        if (month == 13) {
            month = '0' + 1;
        }
        var day1 = new Date(fullyear, month, 0);
        days = day1.getDate();//当月总天数
        totalMonthDays = days;
    } else if (whitch == -1) {//上个月
        fullyear = this.fullyear;
        var premon = --this.month;
        month = premon < 10 ? '0' + premon : '' + premon;
        index = this.index;
        if (this.month < 1) {
            this.month = 12;
            fullyear = --this.fullyear;
        }
        if (month == 0) {
            month = 12;
        }
        var day2 = new Date(fullyear, month, 0);
        days = day2.getDate();
        totalMonthDays = days;
    } else {
        fullyear = this.fullyear,
        month = this.month < 10 ? '0' + this.month : '' + this.month;
        index = this.index;
        var day3 = new Date(fullyear, month, 0);
        days = day3.getDate();
        totalMonthDays = days;
    }
    var $fullyear = this.$container.getElementsByClassName('fullyear')[0],
        $month = this.$container.getElementsByClassName('dateItem')[0].getElementsByClassName('monthData')[0].getElementsByClassName('month')[0],
        $daylist = this.$container.getElementsByClassName('daylist')[index];
    $daylist.setAttribute('data-month', month);
    $fullyear.innerHTML = fullyear;
    $month.innerHTML = month;
    currentShowYear = fullyear;
    currentShowMonth = month;
    currentMonNoO = this.month
    var date = new Date(),
        startWeek;
    date.setMonth(month - 1);
    date.setDate(1);
    startWeek = date.getDay();
    var before = new Date(this.fullyear + '/' + this.month + '/1').getDay(),/* 把这个替换掉 var before = startWeek,*/
        end = 7 - (before + days) % 7;
    var beforeMonth = month - 1,
        beforeYear = fullyear;
    if (beforeMonth == 0) {
        beforeMonth = 12;
        beforeYear -= 1;
    }
    var beforeDays = this.getDays(beforeYear, beforeMonth);
    var i, data = '';
    //去年的日期
    var qunian = new Date().getFullYear() - 1;
    var beforeLastWeek = new Date(currentShowYear + '/' + currentShowMonth + '/1').getDay();//获得去年的每月一号是周几

    var dateOther = new Date();
    var yearother = date.getFullYear();//今年

    if (fullyear != yearother) {//非今年
        for (i = beforeLastWeek - 1; i > -1; i--) {/*上个月的日期*/
            data += '
' + (beforeDays - i) + '
';
        }

    } else {//今年
        for (i = before - 1; i > -1; i--) {/*上个月的日期*/
            data += '
' + (beforeDays - i) + '
';
        }
    }

    for (i = 0; i < days; i++) {/*当前月的日期*/
        var d = i + 1;
        d = d < 10 ? '0' + d : '' + d;
        data += '
' + (i + 1) + '
';
    }

    if (fullyear == qunian) {
        for (i = 0; i <= end; i++) {/*下个月的日期*/
            data += '
' + (i + 1) + '
';
        }
    } else {
        for (i = 0; i < end; i++) {/*下个月的日期*/
            data += '
' + (i + 1) + '
';
        }
    }
    $daylist.innerHTML = data;
    this.signAction(days);
    var checkBottm = this.$container.getElementsByClassName('daylist')[this.index].getElementsByClassName('monthData');
    var checkBottmAll = this.$container.getElementsByClassName('daylist')[this.index].getElementsByClassName('borderScale');
    var checkBottmHeight = checkBottm[checkBottm.length - 1].parentNode;
    var checkBottmAllHeight = checkBottmAll[checkBottmAll.length - 1].parentNode;
    var boffsettop = checkBottmAllHeight.offsetTop;
    var btop = checkBottmHeight.offsetTop;
    if (boffsettop != btop) {
        var lastcount = 0;
        for (var i = 0, l = checkBottmAll.length; i < l; i++) {
            if (checkBottmAll[i].parentNode.offsetTop >= boffsettop) {
                lastcount = i;
                checkBottmAll[i].parentNode.style.display = "none";
            }
        }
        for (var i = 0, l = checkBottmAll.length - lastcount; i < l; i++) {
            checkBottmAll[i + lastcount].parentNode.style.display = "none";
        }
    }
};

Calendar.prototype.signAction = function (days) {
    var $month = this.$container.getElementsByClassName('daylist')[this.index].getElementsByClassName('monthData');
    var cname,todayDay;
    var monDate = new Date();
    var yearnow = monDate.getFullYear();
    var monnow = monDate.getMonth() + 1;
    var weeknow = monDate.getDay();
    var curnow = monDate.getDate();
    for (var i = 0; i < days; i++) {
        cname = $month[i].className;
        todayDay = $month[i].dataset.day;
        if ($month[i].innerText == curnow && todayDay.split('-')[0] == yearnow && todayDay.split('-')[1] == monnow) {
            //今天的日期加边框样式
            cname += ' curBlue greenfill';
        }
        $month[i].className = cname;
    }
    androidCss();
};

//控制日历的，点击左滑显示上个月的日期，点击右滑显示下个月的日期
var CalendarControl = function (id) {
    this.$container = document.getElementById(id);
    this.$dayContainer = this.$container.getElementsByClassName('dayContainer')[0];
    this.calendar = new Calendar(id);
    this.curMonth = new Date().getMonth() + 1;
    this.index = this.curMonth;
    this.$pre = this.$container.getElementsByClassName('pre')[0];
    this.$next = this.$container.getElementsByClassName('next')[0];
    this.init(id);

};
CalendarControl.prototype.init = function (id) {
    var datem = new Date();
    var mon = datem.getMonth() + 1;

    var __cls = this;
    this.$pre.addEventListener('click', function () {
        __cls.preAction(id);
    }, false);
    this.$next.addEventListener('click', function () {
        __cls.nextAction(id);
    }, false);
};
CalendarControl.prototype.preAction = function (id) {
    this.index--;
    this.calendar.setIndex(0);
    this.calendar.fillDate(-1);
    this.calendar.setPreMonth(id, -1);
    var __cls = this,
        left;
    moveLeft();
    this.$next.style.display = 'block';
};
CalendarControl.prototype.nextAction = function (id) {
    this.index++;
    if (this.index == this.curMonth) {
        this.$next.style.display = 'none';
    }
    this.calendar.setIndex(1);
    this.calendar.fillDate(1);
    this.calendar.setNextMonth(id, 1);
    var __cls = this,
        left;
    moveRight();
}
var leftheight = 0;
var rightheight = 0;
function moveLeft() {
    $("#calendar .dayContainer").find(".daylist").eq(0).css({ 'height': 'auto' });
    leftheight = $("#calendar .dayContainer").find(".daylist").eq(0).height();
    $("#calendar").find(".dayContainer").css({ "margin-left": "-100%" });
    $("#calendar").find(".dayContainer").animate({ "margin-left": "0%" }, 300);
    if (leftheight < rightheight) {
        $("#calendar .dayContainer").find(".daylist").eq(1).css({ "height": leftheight });
    }
}
function moveRight() {
    $("#calendar .dayContainer").find(".daylist").eq(1).css({ 'height': 'auto' });
    rightheight = $("#calendar .dayContainer").find(".daylist").eq(1).height();
    $("#calendar").find(".dayContainer").css({ "margin-left": "0%" });
    $("#calendar").find(".dayContainer").animate({ "margin-left": "-100%" }, 300);
    if (leftheight > rightheight) {
        $("#calendar .dayContainer").find(".daylist").eq(0).css({ "height": leftheight });
    }
}
//最重要的，调用并显示日历
var calendarDate = new CalendarControl('calendar');

css文件:(里面包含了日历的css,但是也有其他页面的css,我没认真筛选，都贴在这里)

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-touch-callout: none;
    user-select: none
}
html, body{
	margin:0;
	padding:0;
	background-color:#fff;
}
body{
	font:15px/1.2 '微软雅黑', sans-serif;
}
a{
	text-decoration: none;
}
em{
	font-weight: normal;
	font-style:normal;
	font-size: 100%;
}
h1, h2, h3, h4, h5, h6{
	margin-top:0;
	margin-bottom:0;
	font-size:100%;
	font-weight: normal;
}
p{
	margin-top:0;
	margin-bottom:0;
}
dl, ul, ol{
	margin-top:0;
	margin-bottom:0;
	margin-left:0;
	padding-left:0;
	list-style:none;
}
dd{
	margin-left:0;
}
img{
	border:none;
}


/*=common*/
.center{
	text-align: center;
}
.ellipsis{
	width:100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow:ellipsis;
}

.breakword{
	word-break:break-all;
}

.middle{
	height:100%;
	display: table-cell;
	vertical-align: middle;
	line-height: 22px;
}

footer.center{
	visibility: hidden;
}

.scale, .borderScale{
	position: relative;
}
.scale:after{
	content:"";
	position: absolute;
	bottom: 1px;
	left: -1px;
	right:0px;
	/* border-bottom:1px solid transparent; */
	-webkit-transform:scaleY(0.5);
	-webkit-transform-origin:0 0;
}


/*=layerout*/
.container{
	padding:0 20px;
	margin:0;
}
.item{
	margin:20px 0 0 0;
	position: relative;
}
.contentItem{
	overflow: hidden;
	position:  relative;
}



/*=component*/
.user{
	padding:20px;
	border-bottom: 0.5px solid #d8d8d8;
}
.person{
	position: relative;
	padding:0 65px;
	height:50px;
	top: 4px;
}
.person .middle{
	height:50px;
}
.avatar{
	position: absolute;
	top:0;
	left:0;
	width: 49px;
	height: 49px;
}
.avatar img{
	width:100%;
	height:100%;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	border: 0.5px solid #979797;
}
.avatar:after{
	border-radius:60px;
	-webkit-border-radius:60px;
}
.vipState{
	text-align: center;
	position: absolute;
	width:50px;
	height:28px;
	line-height: 28px;
	position: absolute;
	top:50%;
	margin-top:-14px;
	right:0;
	border-radius: 3px;
}

.title{
	height:14px;
	line-height: 14px;
	padding:0 0 0 12px;
	position: relative;
}
.subtitle{
	position: absolute;
	top:-2px;
	right:0;
}
.title:before{
	content:"";
	position: absolute;
	top:0;
	left:0;
	width:3px;
	height:14px;
	border-radius:7px;
	-webkit-border-radius:7px;
}
.leaderBoard{
	float:right;
	padding-left:20px;
	background:url('../../../Images/ting/board.png') 0 50% no-repeat;
	background-size:15px 13px;
}
.headinfo{
	position: absolute;
	left:70px;
	top:50%;
}
.headinfo .userid{
	color:#8c8c8c;
	font-size: 12px;
}

.headinfo .desc{
	font-size: 13px;
	padding-top:4px;
}
.lineContainer{
	margin: 12px 7px 0 40px;
	box-sizing:border-box;
	height:180px;
	border-width:0 1px 1px 1px;
	border-style:solid;
	border-right-style:dashed;
	position: relative;
}
#polyLine{
	position: absolute;
	top: 3px;
	left:0px;
	height:180px;
	width: 100%;
}
.line{
	position: absolute;
	width:100%;
	height: 34px;
	left:0;
	top:0;
}
.percent{
	text-align: right;
	position: absolute;
	width:3em;
	height:100%;
	margin-left: -40px;
	margin-top:-0.5em;
	text-align: left;
}
.ln0{
	top:0%;
}
.ln1{
	top:20%;
}
.ln2{
	top:40%;
}
.ln3{
	top:60%;
}
.ln4{
	top:80%;
}
.ln5{
	top:100%;
	border-top:none;
}

.dataContainer{
	height: 68px;
	margin-left:40px;
	top: 12px;
	left:0;
	position: relative;
}
.date{
	text-align: center;
	position: absolute;
	top:0;
	left: 0px;
	width: auto;
	margin-left: -6px;
	width: 18.5px;
}
.week{
	display: block;
	margin-top:8px;
}
.dn1{
	left: 16.66%;
}
.dn2{
	left: 33.33%;
}
.dn3{
	left: 49.6%;
}
.dn4{
	left: 66.266%;
}
.dn5{
	left: 83.3333%;
}
.dn6{
	left: 98%;
}


.number{
	padding:0 10px 0 100px;
	height:57px;
	margin:40px 0 0 0;
	background:url('../../../Images/ting/icons.png') 0 0 no-repeat;
	background-size:83px 228px;
	position: relative;
}
.number p{
	position: absolute;
	left: 100px;
	top: 50%;
}


.ting_dub_play {
    background: url('/Images/ting/ting_dub_play.png') 0 0 no-repeat;
}
.ting_dub_zan {
    background: url('/Images/ting/ting_dub_zan.png') 0 0 no-repeat;
}
.ting_dub_article {
    background: url('/Images/ting/ting_dub_article.png') 0 0 no-repeat;
}
.ting_dub_time {
    background: url('/Images/ting/ting_dub_time.png') 0 0 no-repeat;
}
.dub_number {
    padding: 0 10px 0 100px;
    height: 64px;
    margin: 40px 0 0 0;
    background-size: 84px 64px;
    position: relative;
}

    .dub_number p {
        position: absolute;
        left: 100px;
        top: 50%;
    }
.book {
    background-position: 0 -57px;
}
.vocabulary{
	background-position: 0 -114px;
}
.article{
	background-position: 0 -171px;
}



.dateItem{
	height:30px;
	line-height: 30px;
	text-align: center;
	position: relative;
	margin-bottom: 20px;
}
.direct{
	width:30px;
	height:30px;
	background:url('../../../Images/ting/direct.png') 0 0 no-repeat;
	background-size:30px 60px;
	position: absolute;
	top:0;
	cursor: pointer;
}
.pre{
	background-position: 0 0;
	left:0;
}
.next{
	background-position: 0 -30px;
	right:0;
	display: none;
}

.calendar{
	width:100%;
}
.dayContainer{
	width:200%;
	margin-left:-100%;
}
.daylist{
	width: 50%;
	min-height:100px;
	float:left;
}

.weeklist, .daylist{
	text-align: center;
	overflow: hidden;
	/* padding-right: 30px; */
	box-sizing:border-box;
	position: relative;
}
.weeklist{	
	text-align: left;
	margin:2px 0;
	font-size: 12px;
}


.weeklist li, .daylist li{
	float:left;
	width: 14.28%;
	padding-right: 0px;
	/* padding-left: 1%; */
	text-align: center;
}
.weeklist li:nth-child(7), .daylist li:nth-child(7n){
	/* width: 30px; */
	/* margin-right: 0px; */
}
.weeklist li:nth-child(6), .daylist li:nth-child(7n+6){
	margin-right: 0%;
}

.daylist li{
	position: relative;
	margin:12px 0;
	height:30px;
}
.daylist span{
	width:28px;
	height:28px;
	line-height: 30px;
	position: absolute;
	top:0;
	left: 50%;
	border-radius: 30px;
	-webkit-border-radius:30px;
	text-align: center;
	border: 1px solid #AAADB9;
	line-height: 27px;
	font-size: 15px;
	margin-left: -15px;
}
.daylist span:after{
	border-radius: 40px;
	-webkit-border-radius:40px;
}
.daylist span:before{
	content:"";
	position: absolute;
	width: 12px;
	height: 12px;
	top: -4px;
	right: -3px;
	background-repeat: no-repeat;
	background-size:12px 36px;
	z-index: 10;
	/* box-shadow: 0 0 1px #333 inset; */
	border-radius: 50%;
	-webkit-border-radius: 50%;
}
.daylist span.sign:before{
	background-image:url('../../../Images/ting/sign.png');
	background-position: 0 0;
	box-shadow: 0 0 0.5px #61c768 inset;
}
.daylist span.cur.sign:before{
	background-position: url('../../../Images/ting/sign.png');
	background-position: 0 0px;
}
.daylist span.unsign:before{
	/* background-image:url('../../../Images/ting/sign.png'); */
	background-position: 0 -24px;
}
#vip{
	margin-top: -8px;
	font-size: 13px;
}

.pie{
	position: relative;
	height:186px;
	width:100%;
	margin-bottom:35px;
}
#pie,#dub_pie{
	position: absolute;
	top:0;
	left:50%;
	width:186px;
	height:186px;
	margin-left:-98px;
}
.listen{
	margin-bottom:30px;
}
.leader{
	position: absolute;
	text-align: center;
	width: 140px;
	height:102px;
	top:50%;
	left:50%;
	margin-left: -74px;
	margin-top:-51px;
	font-weight: 600;
}
.totalPercent, .dub_totalPercent {
    display: block;
    margin: 15px 0;
    font-weight: bold;
    text-align: center;
}

.totalListen{
	margin-top:16px;
}


.channelItem{
	height:100px;
	line-height: 28px;
	padding:0 10px 0 118px;
	box-sizing:border-box;
	margin:40px 0 0 0;
	position: relative;
}
.channelItem .middle{
	height:100px;
}
.channelItem canvas{
	position: absolute;
	top:0;
	left:0;
	width:100px;
	height: 100px;
}
.channelImg{
	position: absolute;
	width:42px;
	height:42px;
	left:29px;
	top:50%;
	margin-top:-21px;
	background-size:42px 42px;
}

.recommand{
	position: relative;
	width:100%;
	max-width:335px;
	margin:15px auto;
}
.recTitle{
	text-align: center;
	position: absolute;
	width:60%;
	height:30px;
	line-height: 30px;
	left:50%;
	top:50%;
	margin-top:-15px;
	margin-left:-30%;
	padding:0 15px;
	box-sizing:border-box;
	border-radius: 20px;
	-webkit-border-radius:20px;
}
.recImg{
	border:3px;
	width:100%;
}


/*=font*/
.totalPercent, .dub_totalPercent {
    font-size: 36px;
}
.recentTotal{
	font-size:22px;
}
.data, .total, .day, .listen, .channelPercent{
	font-size:18px;
}
.name, .monthData{
	font-size:16px;
}
.vip, .title, .date, .totalListen, .number{
	font-size:14px;
}
.recTitle{
	font-size:13px;
}
.leader{
	font-size:12px;
}
.email{
	font-size:11px;
}
.unvip, .percent, .week{
	font-size:13px;
}
.otherinfo{
	width:100%;
	height:26px;
	line-height: 26px;
	color:##4f5c69;
	text-align: center;
	margin:40px 0;
}

/*=color*/
body{
	color:#4f5c69;
}
.user:after{
	/* border-bottom-color:#D8D8D8; */
}
.avatar:after{
	/* border-color:#979797; */
}
.daylist span{
	color:#AAADB9;
}
.daylist span.sign{
	color:#fff;
	background-color:#76DD7D;
	border-color: #61c768;
}
.daylist span.unsign{
	color:#FF6E6B;
	background-color:#fff;
	border: 1px solid #ff6e7b;
}
.daylist span.unmonth{
	color:#D2D2D6;
	border: 1px solid #D2D2D6;
}
    .daylist span.cur {
        color: #FFAB42;
        border-color: #FFAB42;
    }
        .daylist span.cur.sign {
            color: #fff;
            background-color: #39ae43;
            border-color: #39ae43;
        }
.daylist span:after{
	border-color:#AAADB9;
}
.daylist span.sign:after{
	border-color:#61C768;
}
.daylist span.unsign:after{
	border-color:#FF6E6B;
}
.daylist span.unmonth:after{
	border-color:#D2D2D6;
}
.daylist span.cur:after{
	border-color:#FFAB42;
}

.name{
	color:#444444;
	padding-bottom: 4px;
	max-height:18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width:180px;
}
.email{
	color:#8c8c8c;
}
.vipState{
	color:#fff;
}
.vip{
	background-color:#00AFFF;
}
.unvip{
	background-color:#FDB157;
}

.title{
	color:#607c99;
}
.title:before{
	background-color:#1191E6;
}
.title:after{
	border-bottom-color:#D8D8D8;
}
.day{
	color:#FDAE26;
}

.lineContainer{
	border-color: #D8D8D8;
}
.line{
	border-top:1px dashed #D8D8D8;
}
.percent, .date{
	color:#495159;
} 
.week, .weeklist{
	color:#7f858a;
}
.data, .total, .day, .recentTotal, .channelPercent{
	color:#01c4f4;
	padding:0 0.3em;
	font-weight: bold;
}
.leader{
	color:#93A4BC;
}
.recTitle{
	color:#fff;
	border:1px solid #fff;
	background-color:rgba(0, 0, 0, 0.1);
}


.fr .totalPercent, .dub_totalPercent {
    color: #3188FF;
}

.listenc{
	margin-bottom:20px;
    width:97%;
}
.firstitem{
	margin:30px 0 0 0;
}
#shareme{
	width:100%;
	height:44px;
	background: #1191E6;
	position:fixed;
	bottom:0;
	left:0;
	text-align: center;
	z-index: 20;
}
#shareme a{
	height:44px;
	line-height: 44px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	/*background: url('../../../Images/ting/share_icon.png') 43% 50% no-repeat;*/
	background-size: 21px 19px;
	display: block;
}
@media all and (min-width:660px){	
	.number{
		font-size:15px;
		box-sizing:border-box;
		width:50%;
		float:left;
	}
	.channelItem{
		width:50%;
		float:left;
	}
	.recommand{
		width:50%;
		float:left;
		padding:0 15px;
		box-sizing:border-box;
		max-width: 100%;
	}
	.infoclear{
		clear:both;
	}
}
.daylist span.signtoday{
	background: #ffbf6e;
	color:#fff;
}
.daylist span.signtoday:before{
	background: url('../../../Images/ting/sign.png');
	background-position: 0px -12px;
	box-shadow: 0 0 0.5px #ffab42 inset;
	background-size: 12px 36px;
}
.shareinfo{
	
	height:44px;
	margin:0 auto;
	position: relative;
	padding-left: 32px;
	display: inline-block;
}
.shareinfo img{
	margin-right:10px;
	width:22px;
	margin-top:2px;
	position: absolute;
	left: 0;
	/* margin-left: -18px; */
	top:50%;margin-top:-9px;
}
.sign .title{
	margin-bottom:0;
}
.listenitem{
	margin:40px 0 0 0;
}

#beforeinfo{
	width: 132px;
	height:36px;
	text-align: center;
	line-height: 36px;
	font-size:14px;
	border:1px solid #8a8fa3;
	border-radius:20px;
	-webkit-border-radius:20px;
	position: absolute;
	left:50%;
	margin-left: -66px;
	z-index:10;
	background: #fff;
	top:50%;
	margin-top:18px;
}
.words{
	margin:10px 0 60px 0;
}
#weichat{
	position: relative;
	top:-30px;
	margin-bottom: -10px;
}
.weicrcode{
	width:100%;
	height:auto;
	display: block;
}
#pie_con{width:186px;height:186px;margin:0 auto;}

p#p_playDuration {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 36px;
}

/*用户自定义统计时间*/
.sevenOrmonth {
    color: #555;
}

    .sevenOrmonth > div {
        display: inline-block;
        padding:0 8px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #E0E0E0;
        border-radius: 1px;
        margin-right: 10px;
        color: #919191;
    }

.userChangeInput {
    /*font-size: 20px;
    width:160px;*/
}

.userChange_groupinput {
    padding-bottom: 10px;
}

    .userChange_groupinput input {
        font-size: 18px;
        outline: none;
        color: #919191;
    }

.sevenOrmonth {
    padding-bottom: 20px;
}

input[type="date"]:before {
    content: attr(placeholder);
    color: #ccc;
}

::-webkit-input-placeholder {
    color: #ccc;
}

.start_dateinput, .end_dateinput {
    display: inline-block;
    border: 1px solid #E0E0E0;
    border-radius: 1px;
    height:24px;
    line-height:24px;
    padding:0 24px 0 8px;
}

.date_input2, .date_input1 {
}

.title_span {
    color: #607c99;
    display:inline-block;
    padding-bottom:10px;
}

.select_day {
    border: 1px solid #637F9B!important;
}

.unfixed {
    position: absolute;
    left: auto;
    bottom: 0;
}
.arrow {
    width: 6px;
    height: 6px;
    border-top: 1px solid #BCBCBC;
    border-left: 1px solid #BCBCBC;
    position: absolute;
    right: 8px;
    top: 7px;
    transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
}

/*confrim*/
.confirm {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    top: 0;
    z-index: 9999;
    display: none;
}
.confirm>div{
    overflow:hidden;
}
.confirm_header{
    text-align:center;
}
    .confirm_header > p:first-child {
        font-family: '黑体';
        font-weight: bold;
        padding-top: 15px;
    }
    .confirm_title{
        font-size:12px;
        margin-top:5px;
    }
    .confirm > div {
        position: absolute;
        width: 250px;
        height: 110px;
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -125px;
        background: #fff;
        border-radius: 10px;
    }

        .confirm > div > div:first-child {
            height: 70px;
            text-align: center;
            font-size: 16px;
        }

.confrim_click {
    width: 100%;
    border-top: 1px solid #eee;
    position:relative;
}

    .confrim_click > span {
        width: 50%;
        text-align: center;
        line-height: 39px;
        color: #007aff;
        font-family: '黑体';
        position:absolute;
    }
    .confrim_click > span:first-child{
        left:0;
    }
        .confrim_click > span:last-child {
            right:0;
        } 

        .confrim_click > span:first-child {
            border-right: 1px solid #eee;
        }



/*by wjl 2017.11.15*/
.shareDiv{
    display:none;
}
.pie,.listen{
    display:none;
}

/*补签提示*/
#btn_prompt {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 122px;
    padding: 8px 15px;
    background: #fffbfb;
    margin-left: -61px;
    margin-top: -20px;
    z-index: 1000000;
    text-align: center;
    display: none;
}

    #btn_prompt p {
        margin: 0px;
    }

.w_error {
    background: #fffbfb;
    border: 1px solid #ffb6b1;
    color: #ff7b7b !important;
    box-shadow: 3px 3px 6px #ffe3e3;
}

.w_success {
    color: #00c292;
    border: 1px solid #b7dfd5;
    background: #f5fffc;
    box-shadow: 3px 3px 6px #c6f7eb;
}

/*iphoneX兼容*/
.AdaptationIphoneX {
    display: none;
    z-index: 999999;
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    #shareme {
        bottom: 34px !important;
    }

    .AdaptationIphoneX {
        display: block;
    }


}
.container h2.title {
    display:inline-block;
}
.container .totaldays {
    position: absolute;
    top: -2px;
    right: 33%;
}
.container .totaldays, .container .subtitle {
    font-size: 14px !important;
}
.empty_line {
    height: 14px;
    border-bottom: 0.5px solid #d8d8d8;
    margin-bottom: 20px;
}
.two_section {
    font-size: 14px;
    line-height: 14px;
    display: inline-block;
    position: absolute;
    right: 0;
    margin-top: 1px;
}
.continues {
    display: inline-block;
}