【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

使用CSS3纯代码来实现模拟时钟，及指针动画功能。
在这里主要使用到css3一些基本元素：
border-radius：圆角边框，画圆形；表盘
Transform：变换，旋转，扭曲；刻度盘，指针形状
Animation：时分秒指针转动。
:before/:after :伪元素

基本思路：

 <div id="clock" class="">
 <ul>
  <li class="kedu"></li>
  <li class="kedu"></li>
  <li class="kedu"></li>
  <li class="kedu"></li>
  <li class="kedu"></li>
  <li class="kedu"></li>
  <li class="kedu"></li>
  <li class="kedu"></li>
  <li class="kedu"></li>
  <li class="kedu"></li>
  <li class="shzi s3">3</li>
  <li class="shzi s6">6</li>
  <li class="shzi s9">9</li>
  <li class="shzi s12">12</li>
  <li class="hh"></li>
  <li class="mm"></li>
  <li class="ss"></li>
  <li class="ms"></li>
  <li class="biaopan"></li>
  <li class="biaozhou"></li>
  <li class="logo">♔</li>
 </ul>
  </div>

-----------------------
1.使用div+css画圆来定义时钟底盘，使用其伪类:before和:after，相当于增加两个容器，用于设计表盘轮廓或定位线；使用border-radius属性设计圆形。

图1.使用伪元素将一个div变为三个可用的容器。

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
 
  <style type="text/css">
 #clock{
 position:absolute;
 width:50px;
 height:50px;
 background:#000;
 border-radius:10px;
 }
 #clock:before{
 content:" ";
 position:absolute;
 top:20px;
 left:20px;
 width:50px;
 height:50px;
 background:#0f0;
 border-radius:20px;
 }
 #clock:after{
 content:" ";
 position:absolute;
 top:40px;
 left:40px;
 width:50px;
 height:50px;
 background:#f0f;
 border-radius:100%;
 border-radius:25px;
 }
 
  </style>
 </head>
 
 <body>
  <div id="clock" class="">  </div>
 </body>
</html>

2.使用li的block属性设计两端的边框来定义时钟的60个刻度。设置li的上下边框线使其成为2个刻度，使用li的伪类:before和:after，分别增加2个刻度；即时，1个li元素就可以定义3个层块6个刻度。所以，需要10个li来完成60十个刻度。
<style type="text/css">
.Numerals{
display:inline-block;
width:3px;height:351px;
top:11px;left:203px;
border-top:15px solid #000;
border-bottom:15px solid #000;
}

</style>
<ul>
<li class="Numerals"></li>
<li></li>
</ul>
然后通过旋转完成60个刻度。

3.定义指针：li为指针主体，li:before和li:after来定义指针头部和尾部（矩形变形为菱形transform:rotate(-45deg) skew(-30deg,-30deg);，矩形3角圆角为水滴型border-radius:100% 0 100% 100%;）

4.指针动画：定位好表轴位置（旋转点）transform-origin:2px 100%;然后设计秒针分针时针的旋转动画即可：秒针每秒跳一格6度，60秒360度；分针12秒跳一格6度，3600秒360度；时针可以设计为连续走、每秒跳或按格跳、按半格跳等。

.hourHand{ animation:anim_hr 43200s linear infinite; }
.minuteHand{ animation:anim_min 3600s steps(60) infinite; }
.secondHand{ animation:anim_sec 60s steps(60) infinite; }

@keyframes anim_sec{
from{transform:rotate(0deg) ;}
to{ transform:rotate(360deg) ;}
}
@keyframes anim_min{
to{ transform:rotate(360deg) ;}
}
@keyframes anim_hr{
to{ transform:rotate(360deg) ;}
}

5.细节处理：表盘样式、logo、浏览器兼容性等。

6.效果图：

7.全部代码：/*---------------20150915---------------*/

<!DOCTYPE html>
<html >
<head>
 <title> 飛天网事-纯CSS模拟时钟+js对时。 </title>
 <meta charset="utf-8" />
 <meta name="description" content="飛天网事，WEB前端开发，纯css3代码时钟精彩案例" />
 <meta name="keywords" content="飛天网事，WEB前端开发，HTML5，CSS3，jQuery，" />
 <meta name="author" content="R.tian @eduppp.cn 2015">
 <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style"  content="white" />
 <meta content="telephone=no" name="format-detection" />
 <link rel="shortcut icon" type="image/x-icon" href="/web/css/eduppp.ico" />
 <link rel="shortcut icon" type="image/x-icon" href="/images/logo4.gif" />
 <link rel="apple-touch-icon" href="/images/logo.gif" />
 <link rel="apple-touch-icon" sizes="72x72" href="/images/logo.gif" />
 <link rel="apple-touch-icon" sizes="114x114" href="/images/logo.gif" />
<style type="text/css">
 #main{width:375px;height:375px;margin:auto;}
 #clockDial{/*--------底盘-------------*/
 position:absolute;z-index:100;
 width:401px;
 height:401px;
 background:#333;
 border-radius:100%;
 box-shadow:0 0 15px #000;
 -webkit-transform:scale(0.6);
 }
 /*--------底盘--纵横定位线(调试用）-----------*/
 /*#clockDial:before{
 content:" ";
 position:absolute;
 width:3px;left:202px;
 height:351px;top:26px;
 background:#0000ff;
 }
 #clockDial:after{
 content:" ";
 position:absolute;
 width:3px;left:202px;
 height:351px;top:26px;
 background:#0000ff;
 transform:rotate(90deg);
 }*/
 #clockDial:before{/*--------底盘--边框外阴影-----------*/
 content:" ";
 position:absolute;
 width:442px;left:-21px;
 height:442px;top:-21px;
 border-radius:100%;
 box-shadow:0 0 30px #000;*/
 }/**/
 #clockDial:after{/*--------底盘--边框-----------*/
 content:" ";
 position:absolute;
 width:440px;left:-20px;
 height:440px;top:-20px;
 border-radius:100%;
 box-shadow:0 0 20px 10px #003366 inset;
 }/**/
 .Numerals{display:inline-block;z-index:3;}
 .Numerals{/*--------10个刻度线 * 两端----主标签-------*/
 position:absolute;
 width:3px;height:351px;
 top:11px;left:203px;
 border-top:15px solid #fff;
 border-bottom:15px solid #fff;
 box-shadow:0 0 10px 1px #0000ff;
 transform-origin:50% 50%;
 -webkit-transform-origin:50% 50%;
 }
 .Numerals:before{/*--------10个刻度线 * 两端----副标签-------*/
 content:" ";
 position:absolute;
 width:3px;height:351px;
 top:-15px;
 border-top:15px solid #fff;
 border-bottom:15px solid #fff;
 transform:rotate(60deg);
 -webkit-transform:rotate(60deg);
 box-shadow:0 0 10px 1px #0000ff;
 transform-origin:50% 50%;
 -webkit-transform-origin:50% 50%;
 }
 .Numerals:after{/*--------10个刻度线 * 两端-----副标签------*/
 content:" ";
 position:absolute;
 width:3px;height:351px;
 top:-15px;left:0px;
 border-top:15px solid #fff;
 border-bottom:15px solid #fff;
 border-left:0px;
 border-right:0px;
 transform:rotate(120deg);
 -webkit-transform:rotate(120deg);
 box-shadow:0 0 10px 1px #0000ff;
 transform-origin:50% 50%;
 -webkit-transform-origin:50% 50%;
 }
 /*--------10个刻度线 * 3线 * 两端 ---方位-----------*/
 .Numerals:nth-child(2){
 transform:rotate(6deg);-webkit-transform:rotate(6deg);
 }
 .Numerals:nth-child(3){
 transform:rotate(12deg);-webkit-transform:rotate(12deg);
 }
 .Numerals:nth-child(4){transform:rotate(18deg);-webkit-transform:rotate(18deg); }
 .Numerals:nth-child(5){transform:rotate(24deg);-webkit-transform:rotate(24deg); }
 .Numerals:nth-child(6){transform:rotate(30deg);-webkit-transform:rotate(30deg); }
 .Numerals:nth-child(7){transform:rotate(36deg);-webkit-transform:rotate(36deg); }
 .Numerals:nth-child(8){transform:rotate(42deg); -webkit-transform:rotate(42deg); }
 .Numerals:nth-child(9){transform:rotate(48deg); -webkit-transform:rotate(48deg); }
 .Numerals:nth-child(10){transform:rotate(54deg);-webkit-transform:rotate(54deg); }
 .Num{z-index:10;}
 #clockFace{z-index:5;}
 #pivot{z-index:11;}
 #clockFace{/*--------表盘-----------*/
 display:block;position:absolute;opacity:0.9;
 top:30px;left:32px;
 width:343px;height:343px;
 background:#333;
 border-radius:100%;
 }
 #clockFace:before{/*--------12/6刻度-----------*/
 content:" ";
 display:block;position:absolute;
 width:7px;height:322px;left:50%;top:50%;
 margin:-191px 0 0 -3px;
 border-top:30px solid #fff;
 border-bottom:30px solid #fff;
 }
 #clockFace:after{/*--------3/9刻度-----------*/
 content:" ";
 display:block;position:absolute;
 width:7px;height:322px;left:50%;top:50%;
 margin:-191px 0 0 -3px;
 border-top:30px solid #fff;
 border-bottom:30px solid #fff;
 transform:rotate(90deg);
 }
 .Num{/*--------3、6、9、12数字位置-----------*/
 z-index:9;
 display:block;position:absolute;
 left:50%;top:50%;font-size:22pt;color:#fff;
 }
 .num3{margin:-15px 0 0 150px}
 .num6{margin:130px 0 0 -5px}
 .num9{margin:-15px 0 0 -155px}
 .num12{margin:-165px 0 0 -10px}
 /*--------其他数字位置-----------*/
 .num3:before{content:"1";font-size:16pt;
 margin:-140px 0 0 -70px;display:block;position:absolute; }
 .num3:after{content:"2";font-size:16pt;
 margin:-110px 0 0 -10px;display:block;position:absolute; }
 .num6:before{content:"4";font-size:16pt;
 margin:-60px 0 0 145px;display:block;position:absolute; }
 .num6:after{content:"5";font-size:16pt;
 margin:-35px 0 0 85px;display:block;position:absolute; }
 .num9:before{content:"7";font-size:16pt;
 margin:145px 0 0 70px;display:block;position:absolute; }
 .num9:after{content:"8";font-size:16pt;
 margin:52px 0 0 12px;display:block;position:absolute; }
 .num12:before{content:"10";font-size:16pt;
 margin:70px 0 0 -140px;display:block;position:absolute; }
 .num12:after{content:"11";font-size:16pt;
 margin:-20px 0 0 -80px;display:block;position:absolute; }
 /*--------表轴原点--------------------------------------------*/
 #pivot {
 z-index:90;
 display:block;position:absolute; left:50%;top:50%;
 margin:-5px 0 0 -2px;
 width:11px;height:11px;
 border-radius:5px;
 background:#fff;
 box-shadow:0 0 10px 1px #ff0 ;
 }
 /*----------------时针-------------------------------------------*/
 #hourHand{/*--------时针：主线-----------*/
 z-index:10;
 display:block;position:absolute;
 left:50%;top:50%;margin:-100px 0 0 0;
 width:7px;height:136px;
 background:#ff0; box-shadow:0 0 10px #000;
 opacity:0.7;
 transform-origin:50% 101px;
 -webkit-transform-origin:50% 101px;
 }
 #hourHand:after{/*--------时针：头-----------*/
 content:" ";display:block;position:absolute; left:3px;top:-10px;
 width:20px;height:20px;
 border-radius:0px 0;
 transform-origin:0 100%;
 -webkit-transform-origin:0 100%;
 transform:rotate(-45deg) skew(-20deg,-20deg);
 -webkit-transform:rotate(-45deg) skew(-20deg,-20deg);
 background:#ff0;
 }
 #hourHand:before{/*--------时针：尾-----------*/
 content:" ";display:block;position:absolute; left:2px;top:120px;
 width:20px;height:20px;
 border-radius:100% 0 100% 100%;
 transform-origin:4px 100%;
 -webkit-transform-origin:4px 100%;
 transform:rotate(-45deg) ;
 -webkit-transform:rotate(-45deg) ;
 background:#ff0;box-shadow:0 0 10px #000;
 }
 /*---------------分针--------------------------------------------*/
 #minuteHand{/*--------分针：主线-----------*/
 z-index:10;
 display:block;position:absolute;
 left:50%;top:50%;margin:-120px 0 0 1px;
 width:5px;height:156px;
 background:#0f0; box-shadow:0 0 10px #000;
 opacity:0.6;
 transform-origin:50% 121px;
 -webkit-transform-origin:50% 121px;
 }
 #minuteHand:after{/*--------分针：头-----------*/
 content:" ";display:block;position:absolute; left:2px;top:-10px;
 width:20px;height:20px;
 border-radius:0px 0;
 transform-origin:0 100%;
 -webkit-transform-origin:0 100%;
 transform:rotate(-45deg) skew(-30deg,-30deg);
 -webkit-transform:rotate(-45deg) skew(-30deg,-30deg);
 background:#0f0;
 }
 #minuteHand:before{/*--------分针：尾-----------*/
 content:" ";display:block;position:absolute; left:2px;top:150px;
 width:20px;height:20px;
 border-radius:100% 0 100% 100%;
 transform-origin:2px 100%;
 -webkit-transform-origin:2px 100%;
 transform:rotate(-45deg) ;
 -webkit-transform:rotate(-45deg) ;
 background:#0f0;box-shadow:0 0 10px #000;
 }
 /*-----------------秒针------------------------------------------*/
 #secondHand{/*--------秒针：主线-----------*/
 z-index:10;
 display:block;position:absolute;
 left:50%;top:50%;margin:-140px 0 0 2px;
 width:3px;height:176px;
 background:#f00; box-shadow:0 0 10px #000;
 opacity:0.7;
 transform-origin:50% 141px;
 -webkit-transform-origin:50% 141px;
 }
 #secondHand:after{/*--------秒针：头-----------*/
 content:" ";display:block;position:absolute; left:2px;top:-10px;
 width:30px;height:30px;
 border-radius:5px 0;
 transform-origin:0 100%;
 -webkit-transform-origin:0 100%;
 transform:rotate(-45deg) skew(-30deg,-30deg);
 -webkit-transform:rotate(-45deg) skew(-30deg,-30deg);
 background:#f00;
 }
 #secondHand:before{/*--------秒针：尾-----------*/
 content:" ";display:block;position:absolute; left:1px;top:180px;
 width:20px;height:20px;
 border-radius:100% 0 100% 100%;
 transform-origin:2px 100%;
 -webkit-transform-origin:2px 100%;
 transform:rotate(-45deg) ;
 -webkit-transform:rotate(-45deg) ;
 background:#f00;box-shadow:0 0 10px #000;
 }
 /*--------动画:指针----(使用JavaScript脚本対时）-----------------------------------*/
 /*
 #hourHand{ animation:anim_hr 43200s linear infinite; }
 #minuteHand{ animation:anim_min 3600s  steps(60) infinite; }
 #secondHand{ animation:anim_sec 60s steps(60) infinite; }
 @keyframes anim_sec{
  from{transform:rotate(0deg) ;}
  to{ transform:rotate(360deg) ;}
 }
 @keyframes anim_min{
  to{ transform:rotate(360deg) ;}
 }
 @keyframes anim_hr{
  to{ transform:rotate(360deg) ;}
 }
 */
 /*-----------------------------------------------------------*/
 #millisecond{/*--------毫秒小盘-----------*/
 z-index:9;
 display:block;position:absolute;
 left:50%;left:50%;
 margin:220px 0 0 -38px;
 width:80px;height:80px;
 border:1px dashed #fff;
 border-radius:100%;
 background:#555;
 opacity:0.3;
 box-shadow:0 0 10px 1px #fff inset;
 }
 #millisecond:after{/*--------毫秒：指针----------*/
 content:" ";
 display:block;position:absolute;
 margin:4px 0 0 37px;
 width:3px;height:35px;
 border:1px dashed #990099;
 background:#9900cc;
 border-radius:100%;
 opacity:1.5;
 }
 #millisecond:after{/*--------毫秒：动画----------*/
 transform-origin:50% 35px;
 -webkit-transform-origin:50% 35px;
 animation:anim_l 1s linear infinite;
 -webkit-animation:anim_l 1s linear infinite;
 }
 @keyframes anim_l{
  from{ transform:rotate(0deg) ; -webkit-transform:rotate(0deg) ;}
  to{ transform:rotate(360deg) ; -webkit-transform:rotate(360deg) ;}
 }
 /*-----------------------------------------------------------*/
 #logo{
 position:absolute;z-index:8;
 left:191px;top:80px;
 display:inline;
 color:#fff;
 font-size:25px;
 opacity:1;
 }
 #logo:before{
 content:"eduppp.cn";
 display:block;position:absolute;font-family:"方正舒体" ;
 left:50%;top:50%;margin:5px 0 0 -38px;
 color:#fff;
 opacity:0.8;
 font-size:20px;
 }
 #logo:after{
 content:"Copyright @R.tian 2015";
 display:block;position:absolute;
 margin:210px 0 0 -45px;
 width:150px;
 border:0px solid #cc3300;
 color:#fff;
 font-size:12px;
 opacity:0.6;
 }
 #face{z-index:8;
 position:absolute;
 left:80px;
 top:75px;
 width:250px;
 height:250px;
 border:0px solid #09c;
 background:#0099ff;
 border-radius:40px;
 border-radius:40px;
 opacity:0.1;
 }
 #face:before{content:" ";
 position:absolute;
 width:250px;
 height:250px;
 border:0px solid #00c;
 background:#0099ff;
 transform:rotate(60deg);
 border-radius:40px;
 -webkit-transform:rotate(60deg);
 }
 #face:after{content:" ";
 position:absolute;
 width:250px;
 height:250px;
 border:0px solid #a9c;
 background:#0099ff;
 border-radius:40px;
 transform:rotate(120deg);
 -webkit-transform:rotate(120deg);
 }
</style>
<script type="text/javascript">
 //----使用Js控制动画时间，每秒对三个指针定位。
 //----CSS3的动画animation，使用js对时后无法达到三个指针同步（0秒时，三针同时旋转）。
 /**/
 window.onload=function() {//当文档加载完成时执行该代码。
  var clock = new Clock();
  clock.start();
 };
 function Clock() {
  var d = new Date();
  var h = d.getHours() % 12;
  var m = d.getMinutes();
  var s = d.getSeconds();
  this.start = function() {
   var clock = new Clock();
   document.getElementById("secondHand").style.webkitTransform="rotate("+s*6+"deg)";
   document.getElementById("minuteHand").style.webkitTransform="rotate("+m*6+"deg)";
   document.getElementById("hourHand").style.webkitTransform="rotate("+( h*30+parseInt(m/6)*3 )+"deg)";
   document.getElementById("secondHand").style.transform="rotate("+s*6+"deg)";
   document.getElementById("minuteHand").style.transform="rotate("+m*6+"deg)";
   document.getElementById("hourHand").style.transform="rotate("+( h*30+parseInt(m/6)*3 )+"deg)";
   window.setTimeout(function() {clock.start();}, 500);
  };
 }
</script>
</head>
<body>
<div id="main" class="">
  <div id="clockDial" class="">
 <ul>
  <li class="Numerals"></li>
  <li class="Numerals"></li>
  <li class="Numerals"></li>
  <li class="Numerals"></li>
  <li class="Numerals"></li>
  <li class="Numerals"></li>
  <li class="Numerals"></li>
  <li class="Numerals"></li>
  <li class="Numerals"></li>
  <li class="Numerals"></li>
  <li class="Num num3">3</li>
  <li class="Num num6">6</li>
  <li class="Num num9">9</li>
  <li class="Num num12">12</li>
  <li id="hourHand"></li>
  <li id="minuteHand"></li>
  <li id="secondHand"></li>
  <li id="millisecond"></li>
  <li id="clockFace"></li>
  <li id="logo">♔</li>
  <li id="pivot"></li>
  <li id="face"></li>
 </ul>
  </div>
 </div>
 </body>
</html>

--------------------- 本文来自 rtian001 的CSDN 博客，全文地址请点击：https://blog.csdn.net/rtian001/article/details/48684247?utm_source=copy

【CSS3】纯CSS代码实现模拟时钟，+js对时功能。的更多相关文章

[刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图实现思路 ...
css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
纯css代码写旋转动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
使用纯css代码实现div的“回”字型“叠放”效果
正如大家所知道的那样,div是一个块级元素,也是网页编写过程中使用频率最高的一个元素,通过不同的样式控制可以实现一些最常见的页面效果,当然也可以实现一些比较复杂的页面效果,这里就展示一个本人面试过程中 ...
页面元素固定在页面底部的纯css代码（兼容IE6）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
分享一段css代码学到的js知识
[].forEach.call($$('*'),function(val){ val.style.outline = '1px solid #'+(~~(Math.random()*(1<< ...
纯CSS实现箭头、气泡让提示功能具有三角形图标（简单实例）
<style type="text/css"> /*向上箭头,类似A,只有三个边,不能指定上边框*/ .arrow-up { width: 0px; height: 0 ...
纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
纯css实现checkbox开关切换按钮
我们都知道 checkbox 标签默认样式实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...

随机推荐

VMware虚拟机安装Ubuntu系统英文改中文的方法
首先点击右上角的这个桌面 1,Change Desktop Background 图片发自简书App 2.到系统设置(System Settings)--- 点击Language Support ...
thinkCMF----自定义配置调用
有些时候,需要在后台给网站一些其他的配置: 这个配置,一般都是通过修改代码实现的,ThinkCMF本身没有这个配置: 找到site.html 增加一个Group就可以: 在配置里面做相应的配置就可以:
thinkCMF----路由跳转
使用ThinkCMF的时候,在模板界面上,可能会用到一些自定义路由,ThinkCMF路由的基本配置与用法: ThinkCMF自带有路由美化的功能: 这种路由都是当你创建栏目或创建文章的时候,自动生成的 ...
hdu2586（LCA最近公共祖先）
How far away ? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
9.5Django
2018-9-5 15:23:00 配置数据库信息 setting MySQLdb 不支持python3 创建表 pycharm 连接数据库好强大的赶脚
OpenCV Create Circular Mask 圆形遮罩
在OpenCV中,比较常见的是矩形遮罩CvRect,没有专门提供圆形的mask,那么我们只能自己写一个来模拟圆形mask的函数,需要提供的参数为原图的大小,以及圆形mask的圆心位置和半径即可,返回一 ...
OpenCV Save CvRect to File 保存CvRect变量到文件
在OpenCv中,我们有时候需要查看CvRect变量的值,我们可以通过将其保存到文件来查看,保存的代码如下: void writeCvRectToFile(CvRect &rect, cons ...
idea启动tomcat后访问项目报java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet
一.报错“java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet” 1.File --- ...
PL/SQL常用表达式及举例（一）
IF 判断条件 THEN 满足条件时执行语句 END IF; DECLARE v_countResult NUMBER; BEGIN SELECT COUNT(empno) INTO v_countR ...
Connections in Galaxy War----zoj3261
题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3261 题意:有n个星球编号为0—n-1;能量分别为p[i]:有 ...

【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

【CSS3】纯CSS代码实现模拟时钟，+js对时功能。的更多相关文章

随机推荐

热门专题