js实现移动端手机端日历签到效果代码-html代码-BFW代码库

代码语言：html
代码描述：js实现移动端手机端日历签到效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no">
    <style>
        @charset 'utf-8';
    a,
    body {
    	color: #666
    }
    
    .page,
    body {
    	width: 100%
    }
    
    .loading-main .loading-img-main,
    .page {
    	text-align: center
    }
    
    html {
    	height: 100%;
    	margin: 0 auto
    }
    
    body,
    html {
    	-webkit-user-select: element;
    	user-select: element;
    	letter-spacing: 0;
    	background: #f8f9fa;
    	-webkit-touch-callout: none
    }
    
    
    .fn-clear:after {
    	visibility: hidden;
    	height: 0
    }
    
    body {
    	font-family: arial, sans-serif;
    	font-size: 16px;
    	min-height: 100%;
    	-webkit-text-size-adjust: none
    }
    
    body,
    button,
    dd,
    dl,
    dt,
    footer,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    input,
    li,
    nav,
    ol,
    p,
    textarea,
    ul {
    	margin: 0;
    	padding: 0;
    	border: none;
    	outline: none;
    	-webkit-font-smoothing: antialiased
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    	font-size: 100%;
    	font-weight: 400
    }
    
    form {
    	display: inline
    }
    
    ol,
    ul {
    	list-style: none
    }
    
    a {
    	text-decoration: none
    }
    
     
    img {
    	vertical-align: middle;
    	-ms-interpolation-mode: bicubic;
    	border: 0
    }
    
    em,
    strong {
    	font-weight: 400;
    	font-style: normal;
    	font-variant: normal
    }
    
    button,
    input,
    select,
    textarea {
    	font-size: 100%;
    	vertical-align: middle;
    	outline: 0
    }
    
    a,
    button,
    input,
    select,
    textarea {
    	-webkit-tap-highlight-color: transparent
    }
    
    textarea {
    	resize: none
    }
    
    button,
    input[type=button],
    input[type=reset],
    input[type=submit] {
    	cursor: pointer;
    	-webkit-appearance: button;
    	-moz-appearance: button
    }
    
    input:focus:-moz-placeholder,
    input:focus::-webkit-input-placeholder {
    	color: transparent
    }
    
    button::-moz-focus-inner,
    input::-moz-focus-inner {
    	padding: 0;
    	border: 0
    }
    
    table {
    	border-spacing: 0;
    	border-collapse: collapse
    }
    
    .fn-clear {
    	zoom: 1
    }
    
    .fn-clear:after {
    	font-size: 0;
    	display: block;
    	clear: both;
    	content: ' '
    }
    
    .fl,
    .fr {
    	display: inline
    }
    
    .fl {
    	float: left
    }
    
    .fr {
    	float: right
    }
    
    .hide {
    	display: none
    }
    
    .show {
    	display: block
    }
    
    .ellipsis {
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow: ellipsis
    }
    
    .break {
    	word-wrap: break-word;
    	word-break: break-all
    }
    
    .flex,
    .fn-flex {
    	display: -webkit-box;
    	display: box;
    	display: -webkit-flex;
    	display: -ms-flexbox;
    	display: flex
    }
    
    .flex-v,
    .fn-flex.tb {
    	flex-direction: column;
    	-webkit-flex-flow: column;
    	flex-flow: column;
    	-ms-flex-direction: column;
    	-webkit-box-orient: vertical;
    	box-orient: vertical
    }
    
    article,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
    	display: block;
    	clear: all
    }
    
     
    
    .container {
    	max-width: 800px;
    	margin: 0 auto
    }
    
    .page {
    	font-size: 12px;
    	padding: 15px 0
    }
    
    .page>span {
    	color: #666
    }
    
    .page>span.not {
    	color: #ccc
    }
    
     
    
    .flex-1 {
    	-webkit-box-flex: 1;
    	-webkit-flex: 1;
    	-ms-flex: 1;
    	flex: 1
    }
    
    .flex-2 {
    	-webkit-box-flex: 2;
    	-webkit-flex: 2;
    	-ms-flex: 2;
    	flex: 2
    }
    
    .flex-3 {
    	-webkit-box-flex: 3;
    	-webkit-flex: 3;
    	-ms-flex: 3;
    	flex: 3
    }
    
    .flex-align-center {
    	-webkit-box-align: center;
    	-webkit-align-items: center;
    	-ms-flex-align: center;
    	align-items: center
    }
    
    .flex-pack-center {
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	-ms-flex-pack: center;
    	justify-content: center
    }
    
    .flex-pack-justify {
    	-webkit-box-pack: justify;
    	-webkit-justify-content: space-between;
    	-ms-flex-pack: justify;
    	justify-content: space-between
    }
    
    .flex-pack-start {
    	-webkit-box-pack: start;
    	-webkit-justify-content: flex-start;
    	-ms-flex-pack: start;
    	justify-content: flex-start
    }
    
    .flex-pack-end {
    	-webkit-box-pack: end;
    	-webkit-justify-content: flex-end;
    	-ms-flex-pack: end;
    	justify-content: flex-end
    }
    
    .flex-warp {
    	-ms-flex-wrap: wrap;
    	-webkit-flex-wrap: wrap;
    	flex-wrap: wrap
    }
    
    .flex-direction-bottom {
    	flex-direction: column-reverse;
    	-webkit-flex-direction: column-reverse;
    	-webkit-box-pack: end;
    	-ms-box-pack: end
    }
    
    .user-select {
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	user-select: none
    }
    .border-small-top,.border-small-bottom{
    	position: relative;
    }
    .border-small-top:after,
    .border-small-bottom:before {
    	content: "  ";
    	position: absolute;
    	left: 0;
    	top: 0;
    	z-index: 1;
    	width: 200%;
    	height: 1px;
    	background: #ddd;
    	-webkit-transform-origin: 0 0;
    	transform-origin: 0 0;
    	-webkit-transform: scale(.5, .5);
    	transform: scale(.5, .5);
    }
    
    .border-small-top:after {
    	left: 0;
    	top: 0;
    }
    .border-small-bottom:before {
    	left: 0;
    	top: 100%;
    }
    .icon {
    	vertical-align: -0.15em;
    	fill: currentColor;
    	overflow: hidden;
    }
    .top {
      width: 100%;
      height: 12rem;
      background: #007aff;
      margin-bottom: .8rem;
      overflow: hidden;
    }
    .top .out-1 {
      width: 8rem;
      height: 8rem;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      background: rgba(255, 255, 255, 0.4);
      margin: 1rem auto 0 auto;
    }
    .top .out-1 .out-2 {
      width: 7rem;
      height: 7rem;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      background: #ffffff;
      margin: 0 auto;
    }
    .top .out-1 .out-2 .signBtn {
      width: 6.2rem;
      height: 6.2rem;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      border: 1px #7ebdff solid;
    }
    .top .out-1 .out-2 .signBtn strong,
    .top .out-1 .out-2 .signBtn span {
      display: block;
      width: 85%;
      margin: 0 auto;
      text-align: center;
      color: #007aff;
    }
    .top .out-1 .out-2 .signBtn strong {
      height: 3.5rem;
      line-height: 4.5rem;
      font-weight: 600;
      border-bottom: 1px #eee solid;
    }
    .top .out-1 .out-2 .signBtn span {
      height: 2.5rem;
      line-height: 2.5rem;
      font-size: .9rem;
      line-height: 2rem !important;
    }
    .top .out-1:active {
      animation: sign .25s forwards;
      -webkit-animation: sign .25s forwards;
    }
    .tips {
      position: absolute;
      top: 10rem;
      z-index: 999;
      width: 100%;
      color: #fff;
      font-size: .9rem;
      text-align: center;
      padding-bottom: .5rem;
    }
    .Calendar {
      background: #fff;
      padding-bottom: 1rem;
    }
    .Calendar #toyear {
      border-bottom: 1px #e7e7e7 solid;
      width: 96%;
      margin: 0 auto;
      height: 2.5rem;
      text-align: center;
      color: #333;
      font-size: .95rem;
    }
    .Calendar #toyear .year-month {
      height: 100%;
      line-height: 2.5rem;
    }
    .Calendar #toyear #idCalendarPre,
    .Calendar #toyear #idCalendarNext {
      height: 100%;
      line-height: 2.5rem;
      padding: 0 2rem;
      text-align: center;
      font-size: .85rem;
      color: #999;
    }
    .Calendar table,
    .Calendar tr,
    .Calendar td {
      border: 0;
    }
    .Calendar table {
      width: 96%;
      margin: 0 auto;
    }
    .Calendar table tr {
      text-align: center;
      height: 2rem;
    }
    .Calendar table tr td span {
      margin: 0 auto;
      display: block;
      line-height: 1.6rem;
      width: 1.5rem;
      height: 1.5rem;
      font-size: .9rem;
      border-radius: 100%;
    }
    .Calendar table tr .onToday span {
      background: #1485ff;
      color: #fff;
    }
    </style>
</head>

<body>
    <div class="top flex flex-align-end flex-pack-center flex-.........完整代码请登录后点击上方下载按钮下载查看