zoukankan      html  css  js  c++  java
  • css3 钟表

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style id= "css">
    #wrap{
    	200px;height: 200px;position: relative;border-radius: 50%;
    	border:1px solid black;margin: 100px auto;
    }
    #wrap ul{
    	margin:0px;padding: 0px;height: 200px;list-style: none;position: relative;
    }
    #wrap ul li {
    	 2px; height: 6px; background: black;position: absolute;left: 98px;top: 0px; -webkit-transform-origin:center 100px;
    }
    #wrap ul li:nth-of-type(5n+1){height:10px;background:#000;}
    #hour{
    	 6px;height: 45px;background: #000;position: absolute; left: 97px;top: 55px;-webkit-transform-origin:bottom;
    }
    #min{
    	 4px;height: 65px;background: #999;position: absolute; left: 98px;top: 35px;-webkit-transform-origin:bottom;
    }
    #sec{
    	 2px;height: 80px;background: red;position: absolute; left: 99px;top: 20px;-webkit-transform-origin:bottom;
    }
    #icon{
    	10px;height: 10px;background: #000;position:absolute;border-radius: 50%;left: 95px;top:95px;
    }
    </style>
    <script>
    	window.onload = function (){
    		var oList = document.getElementById("list");
    		var aLi = "";
    		var oHour = document.getElementById("hour");
    		var oMin = document.getElementById("min");
    		var oSec = document.getElementById("sec");
    		for(var i = 0; i < 60; i++)
    		{
    			
    			aLi +="<li style='-webkit-transform:rotate("+6*i+"deg)'></li>";
    
    		}
    		oList.innerHTML = aLi;
    		setInterval( function(){
    			toTime(oHour,oMin,oSec);
    		},1000);
    	
    
    		function toTime(oHour,oMin,oSec)
    		{
    			var oDate=new Date();
    			var iSec=oDate.getSeconds();
    			var iMin=oDate.getMinutes()+iSec/60;
    			var iHour=(oDate.getHours()%12)+iMin/60;
    			oSec.style.WebkitTransform="rotate("+(iSec*360/60)+"deg)";
    			oMin.style.WebkitTransform="rotate("+(iMin*360/60)+"deg)";
    			oHour.style.WebkitTransform="rotate("+(iHour*360/12)+"deg)";
    		}
    
    	}
    </script>
    </head>
    	<body>
    		<div id = "wrap">
    			<ul id = "list">
    			</ul
    		</div>
    		<div id="hour"></div>
    		<div id="min"></div>
    		<div id="sec"></div>
    		<div id="icon"></div>
    	</body>
    </html>
    

      

  • 相关阅读:
    Json概述以及python对json的相关操作
    tcpdump学习(2):基本使用
    tcpdump学习(1):安装
    mysql的expain(zz)
    ubuntu下使用mysql的一点笔记
    mysql的mysqladmin的用法
    mysql的一些工具(系统自带)
    django 分页django-pure-pagination(zz)
    mysql之any,some all(zz)
    Docker Ubuntu容器安装ping(zz)
  • 原文地址:https://www.cnblogs.com/mayufo/p/4396543.html
Copyright © 2011-2022 走看看