body,p {
margin:0;
}
body {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,0.8);
color:#fff;
user-select:none;
}
.clear:after {
content:'';
display:block;
clear:both;
}
.wrapper {
width:600px;
margin:0 auto;
}
h1 {
text-align:center;
font-size:60px;
}
.break,.session {
width:200px;
text-align:center;
font-size:26px;
font-weight:200;
}
.break {
float:left;
}
.session {
float:right;
}
.break span,.session span {
padding:0 10px;
}
.break-minus,.break-add,.session-minus,.session-add {
cursor:pointer;
}
.circle {
position:relative;
width:300px;
height:300px;
border-radius:50%;
border:3px solid orange;
margin:100px auto;
text-align:center;
}
.name,.time {
position:relative;
font-size:34px;
margin:65px 0;
z-index:100;
}
.bg {
position:absolute;
top:10px;
left:10px;
width:280px;
height:280px;
border-radius:50%;
overflow:hidden;
}
.bg-inner {
position:absolute;
bottom:0;
width:100%;
height:0;
background:orange;
}
函数式开发,功能清晰明了,内有明确注释。
入口函数如下:
function init() {
$('.break-num').text(breaktime);
$(".session-num").text(sessiontime);
$('.name').text(model);
$('.time').text(showtime);
bindevent();
}