HTML+CSS3 纯代码实现转盘效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="/Scripts/jquery-1.10.2.min.js"></script> <link rel="stylesheet" href="">
<style>
*{
padding:0;
margin:0;
font: 24px/24px "Microsoft Yahei";
color:white;
}
body{
background:#202020;
}
.main{
width: 1520px;
height:900px;
background:#06192A;
margin:0 auto;
border:2px solid white;
}
.main header{
height: 150px;
border-bottom:2px solid #637382;
}
.main header h1{
text-align:center;
font-weight:bolder;
position: relative;
bottom:0;
padding-top: 104px;
}
.main section{
width:1350px;
/*border-bottom:2px solid #637382;*/
margin:0 auto;
/*padding-top:50px;
padding-left:98.5px;*/ display:inline-block;
padding-top: 50px;
padding-left: 170px;
} .main section .round{
width:300px;
height:300px;
position: relative;
/*background:gray;*/
border-radius:50%; margin-right: 150px;
margin-bottom: 30px;
float:left;
} .main section .round ul{
list-style: none;
margin: 0;
padding: 0;
} .main section .round ul.mark li{
width:2px;
height:18px;
display:block;
background:white;
position: absolute;
top:50%;
left:50%;
} .main section .round ul.mark li:nth-child(odd){
height:26px;
top: calc(50% - 4px);
} .digits::before{
width: 34px;
height: 34px;
position: absolute;
border-radius:50%;
top:calc(50% - 8px);
left:calc(50% - 17px);
content:"";
background:#003951;
} .digits::after{
position: absolute;
top: 181px;
left: 137px;
content:"MPH";
font-size:12px;
font-weight:lighter;
opacity:0.5;
} .main section .round ul.digits li{
font-size: 20px;
display: block;
position: absolute;
top: 50%;
left: 50%;
line-height: 20px;
text-align: center;
font-weight: lighter;
} .main section .round ul.digits li:nth-child(1){
transform: translate(-93px, 35px);
}
.main section .round ul.digits li:nth-child(2){
transform: translate(-95px, -25px);
}
.main section .round ul.digits li:nth-child(3){
transform: translate(-65px, -70px);
}
.main section .round ul.digits li:nth-child(4){
transform: translate(-18px, -90px);
}
.main section .round ul.digits li:nth-child(5){
transform: translate(45px, -70px);
}
.main section .round ul.digits li:nth-child(6){
transform: translate(60px, -25px);
}
.main section .round ul.digits li:nth-child(7){
transform: translate(68px, 35px);
} .main section .round .hand{
width: .2em;
height: .2em;
background: #c00;
border-radius: 50%;
position: absolute;
top: 157px;
left: 148px; -webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear; -webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: rgba(0, 0, 0, .8) 0 0 .2em;
} .main section .round .hand:before{
content: "";
width: .2em;
height: 128px;
border-radius: .2em .2em 0 0/10em 10em 0 0;
background: #c00;
position: absolute;
top: -127px;
left: .1em;
margin: 0 0 -2em -.1em;
} .main section .round .digital{
position: absolute;
top: 225px;
left: 76px;
} .main section .round .digital input,.main section .round .digital ul{
float:left;
} .main section .round .digital ul{
width:20px;
height: 30px;
color: #ddd;
font-family: Consolas, monaco, monospace;
background:#000009;
margin:0 1px !important;
text-align:center;
overflow:hidden;
position: relative;
} .main section .round .digital ul li{
width:18px;
height:26px;
margin-top:2px;
background:#1A2730;
/*font-weight:lighter;*/
position: relative;
overflow:hidden;
margin-left:1px;
} .main section .round .digital ul.mph,.main section .round .digital ul.mph li{
background:none;
cursor: pointer;
overflow:visible;
} .main section .round .digital ul.mph li{
height: 30px;
margin-top:0;
} .main section .round .digital ul.mph b,.main section .round .digital ul.mph b:before,.main section .round .digital ul.mph span{
display:block;
position: relative;
}
.main section .round .digital ul.mph b{
width:16px;
height:16px;
border-radius:8px;
background:white;
top:-2px;
margin-left:2px;
} .main section .round .digital ul.mph b.selected:before{
background:red;
width:12px;
height: 12px;
content:"";
border-radius:6px;
top:2px;
left:2px;
} .main section .round .digital ul.mph span{
width:20px;
height:15px;
font-size:12px;
top:-6px;
} .main section .round .digital ul.mph:first-child{
margin-right: 10px !important;
} .main section .round .digital ul.mph:last-child{
margin-left: 10px !important;
} .main section .round p{
position: absolute;
bottom:10px;
text-align:center;
width: 100%;
font-size:21px;
} .main section .round .digital ul li span {
width: 20px;
height: 26px;
display: block;
position: relative;
top: -234px;
} .main section .round .digital ul.d4/*:nth-child(4)*/ li{
/* -webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;*/
} #r1 .digital ul.d4 li{
top: -252px;
} #r2 .digital ul.d4 li{
top: -168px;
} #r3 .digital ul.d4 li{
top: -140px;
} #r4 .digital ul.d3 li{
top: -84px;
} #r4 .digital ul.d4 li{
top: -112px;
} #r5 .digital ul.d4 li{
top: -112px;
} #r6 .digital ul.d4 li{
top: -224px;
}
</style>
</head>
<body>
<div class="main">
<header>
<h1>心血管医用气体</h1>
</header>
<section>
<div class="round" id="r1" data-value="0.42">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>氧气区域管线压力</p>
</div>
<div class="round" id="r2" data-value="0.43">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>压缩空气区域管线压力</p>
</div>
<div class="round" id="r3" data-value="0.44">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>CO2区域管线压力</p>
</div>
<div class="round" id="r4" data-value="0066">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>30</li>
<li>40</li>
<li>50</li>
<li style="transform:translate(-10px, -90px);">60</li>
<li>70</li>
<li style="transform:translate(75px, -25px);">80</li>
<li style="transform:translate(72px, 35px);">90</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul class="d3">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>真空区域管线压力</p>
</div>
<div class="round" id="r5" data-value="0.45">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>笑气区域管线压力</p>
</div>
<div class="round" id="r6" data-value="0.51">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>5</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>氮气区域管线压力</p>
</div>
</section>
</div>
</body>
<script>
$(".round").each(function(){
var deg = -110;
$(this).find("ul.mark li").each(function(){
var ty = "-120px";
if($(this).index() % 2 == 0){
ty = "-115px";
} $(this).css("transform","rotate("+deg+"deg) translateY("+ty+")");
deg += 220 / 24;
});
}); $(".digital").find("ul:not(.mph):last").click(function(){ }); function getDeg(num){
return -110 + 220 / 24 * (num - 1);
} var dig = 28;
//---------r1---------
var r1_deg = getDeg(9);
$("#r1").find(".hand")
.css("transform","rotate("+r1_deg+"deg)"); var r1_status = false; setTimeout(function(){
var r1 = $("#r1"); r1_status = null; var new_r1_deg = getDeg(13) r1.find(".hand").css("transform","rotate("+new_r1_deg+"deg)");
var num = r1.find(".d4 li").css("top"); num = num.substring(0,num.length - 2); //r1.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px");
r1.find(".d4 li").animate({
top: parseInt(num) + 28 * 5 + "px"
},1500);
}, 3000); setTimeout(function(){
r1_status = true;
},5000); setInterval(function(){
if(r1_status == null){return;} var r1 = $("#r1").find(".hand")[0]; var r1_deg = r1.style.cssText; var n = r1_deg.substring(18,r1_deg.length - 5); n = r1_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r1.style.cssText = "transform:rotate("+n+"deg)"; r1_status = !r1_status;
},500); //---------r2---------
$("#r2").find(".hand")
.css("transform","rotate(-12.5deg)"); var r2_status = false; setTimeout(function(){
var r2 = $("#r2"); r2_status = null; var new_r2_deg = getDeg(9) r2.find(".hand").css("transform","rotate("+new_r2_deg+"deg)");
var num = r2.find(".d4 li").css("top"); num = num.substring(0,num.length - 2); //r2.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px");
r2.find(".d4 li").animate({
top: parseInt(num) - 28 * 3 + "px"
},1500);
}, 5000); setTimeout(function(){
r2_status = true;
},6000); setInterval(function(){
if(r2_status == null){return;} var r2 = $("#r2").find(".hand")[0]; var r2_deg = r2.style.cssText; var n = r2_deg.substring(18,r2_deg.length - 5); n = r2_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r2.style.cssText = "transform:rotate("+n+"deg)"; r2_status = !r2_status;
},500); //---------r3---------
$("#r3").find(".hand")
.css("transform","rotate(-3.9deg)"); var r3_status = false;
//*
setInterval(function(){
if(r3_status == null){return;} var r3 = $("#r3").find(".hand")[0]; var r3_deg = r3.style.cssText; var n = r3_deg.substring(18,r3_deg.length - 5); n = r3_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r3.style.cssText = "transform:rotate("+n+"deg)"; r3_status = !r3_status;
},500);//*/ //---------r4---------
var r4_deg = getDeg(15);
$("#r4").find(".hand")
.css("transform","rotate("+r4_deg+"deg)"); var r4_status = true; setTimeout(function(){
var r4 = $("#r4"); r4_status = null; var new_r4_deg = getDeg(17) r4.find(".hand").css("transform","rotate("+new_r4_deg+"deg)"); var num = r4.find(".d4 li").css("top");
num = num.substring(0,num.length - 2); //r4.find(".d4 li").css("top",parseInt(num) + 28 * i + "px"); r4.find(".d4 li").animate({
top: parseInt(num) + 28 * 4 + "px"
},1000, function() {
var d3 = r4.find(".d3 li").css("top");
d3 = d3.substring(0,d3.length - 2); r4.find(".d4 li").stop();
r4.find(".d4 li").css("top","-252px"); r4.find(".d3 li").css("top",parseInt(d3) + 28 + "px"); r4_status = false;
});
}, 7000);
/*
setTimeout(function(){
var r4 = $("#r4");
var d3 = r4.find(".d3 li").css("top");
d3 = d3.substring(0,d3.length - 2); r4.find(".d4 li").stop();
r4.find(".d4 li").css("top","-252px"); r4.find(".d3 li").css("top",parseInt(d3) + 28 + "px");
}, 6000);
*/
//*
setInterval(function(){
if(r4_status == null){return;} var r4 = $("#r4").find(".hand")[0]; var r4_deg = r4.style.cssText; var n = r4_deg.substring(18,r4_deg.length - 5); n = r4_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r4.style.cssText = "transform:rotate("+n+"deg)"; r4_status = !r4_status;
},500);//*/ var r5_deg = getDeg(13);
$("#r5").find(".hand")
.css("transform","rotate("+r5_deg+"deg)");
var r5_status = false;
//*
setInterval(function(){
if(r5_status == null){return;} var r5 = $("#r5").find(".hand")[0]; var r5_deg = r5.style.cssText; var n = r5_deg.substring(18,r5_deg.length - 5); n = r5_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r5.style.cssText = "transform:rotate("+n+"deg)"; r5_status = !r5_status;
},500);//*/ var r6_deg = getDeg(17);
$("#r6").find(".hand")
.css("transform","rotate(42.666667deg)");
var r6_status = false; setTimeout(function(){
var r6 = $("#r6"); r6_status = null; var new_r6_deg = getDeg(21) r6.find(".hand").css("transform","rotate("+new_r6_deg+"deg)");
var num = r6.find(".d4 li").css("top"); num = num.substring(0,num.length - 2); //r6.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px");
r6.find(".d4 li").animate({
top: parseInt(num) + 28 * 4 + "px"
},1500);
}, 9000); setTimeout(function(){
r6_status = true;
},10000);
//*
setInterval(function(){
if(r6_status == null){return;} var r6 = $("#r6").find(".hand")[0]; var r6_deg = r6.style.cssText; var n = r6_deg.substring(18,r6_deg.length - 5); n = r6_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r6.style.cssText = "transform:rotate("+n+"deg)"; r6_status = !r6_status;
},500);//*/
</script>
</html>
HTML+CSS3 纯代码实现转盘效果的更多相关文章
- css3纯手写loading效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 心跳（纯代码制作心形，animation动画）
思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </ ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- 纯CSS3实现的动感菜单效果
1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...
- Android 纯代码加入点击效果
项目中非常多的Button, 同一时候配置非常多button切图,Selector是不是非常烦, 使用以下这个类,就能够直接为Button添加点击效果. 不用多个图片,不用Selector. 使用方法 ...
- AS3.0纯代码编写的两款loading效果
AS3.0纯代码编写的两款loading效果 效果一 效果二 代码很简单,实现的原理一样,只不过矩形用到了Matrix类,对注册点进行了调整,效果可用于视频播放器缓冲时的loading效果,下面看代码 ...
- Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
- 9种纯CSS3人物信息卡片动态展示效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
随机推荐
- 用ALAssetsLibrary将过滤后图片写入照片库
转载自:http://blog.sina.com.cn/s/blog_61235faa0100z3dp.html CIImage *saveToSave = [filter outputImage]; ...
- HTTP常见错误 400/401/403/404/500及更多
HTTP 错误 400 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无法重复此请求. HTTP 错误 401 401.1 未授权:登录失败 此错误表明传输给服务器的证 ...
- Android流量监控 思路，想法
1,开启一个服务,每5分钟跑动一次更新流量,用于能够准确记录流量 每一个小时,更新一次流量,用于清除非本月的流量 2,保存流量的时候,进行判断 a,若是数据库中保存的 ...
- CSS构造超链接
超链接边框 派生超链接 属性选择器超链接 动态超链接 图像翻转超链接 CSS工具提示 1.给链接加上边框 A:link { Color: #f00; Text- ...
- shiro安全三部曲
源:http://blog.csdn.net/boonya/article/details/8233435 第一部分 Shiro简介及项目目录结构 最新官方示例下载:http://shiro.apac ...
- 项目经验之:再来一章：excel导入数据 封装成最棒的不容易！！！
我见过很的系统,包括OA,ERP,CRM等,在常用的功能当中,从外部导入数据是最常用到的.因为很多客户需要以excel的形式提供数据,,这样的方式我们又如何做呢, 大家最常见的做法可能是这样的,在需要 ...
- MEF 编程指南（八）：过滤目录
当使用子容器的时候,基于特定的标准(Specific Criteria)过滤目录是很必要的.比如,基于部件构造策略的过滤器是很常见的.下面的代码片段演示了如何构建的特殊途径(Particular Ap ...
- PHP+MySQL多语句执行<转自wooyun>
发起这个帖子,估计就很多人看到题目就表示不屑了.一直以来PHP+MySQL环境下,无论是写程序或者是注入攻击,是无法多语句执行的,这么广为人知的常识,没理由会有人不知道.可权威就是用来被挑战的,常识也 ...
- URAL 1777 D - Anindilyakwa 暴力
D - AnindilyakwaTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/v ...
- HomeSnap
http://arnauddegiuli.github.io/HomeSnap/ OnBufferingUpdateListener https://github.com/LuckyJayce/Mat ...