css3+js+html实现模拟时钟
2016-06-24 20:14
435 查看
<!DOCTYPE html>
<html>
<head>
<span style="white-space:pre"> </span><title>border</title>
<span style="white-space:pre"> </span><style type="text/css">
<span style="white-space:pre"> </span>*{
<span style="white-space:pre"> </span>margin:0;
<span style="white-space:pre"> </span>padding:0;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>.one{
<span style="white-space:pre"> </span>width:300px;
<span style="white-space:pre"> </span>height:300px;
<span style="white-space:pre"> </span>text-align: center;
<span style="white-space:pre"> </span>position:relative;
<span style="white-space:pre"> </span>background-color:yellow;
<span style="white-space:pre"> </span>top:50%;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-150px;
<span style="white-space:pre"> </span>border-radius:100%;
<span style="white-space:pre"> </span>transition:all;
<span style="white-space:pre"> </span>-webkit-transition-duration: 3s;
<span style="white-space:pre"> </span>transition-duration: 3s;
<span style="white-space:pre"> </span>-webkit-transition-delay: .2s;
<span style="white-space:pre"> </span>transition-delay: .2s;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>.one span{
<span style="white-space:pre"> </span>display:inline-block;
<span style="white-space:pre"> </span>width:10px;
<span style="white-space:pre"> </span>height:10px;
<span style="white-space:pre"> </span>background-color:red;
<span style="white-space:pre"> </span>position:absolute;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#t0{
<span style="white-space:pre"> </span>top:0;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-5px;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#t3{
<span style="white-space:pre"> </span>top:50%;
<span style="white-space:pre"> </span>right:0;
<span style="white-space:pre"> </span>margin-top:-5px;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#t6{
<span style="white-space:pre"> </span>bottom:0;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-5px;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#t9{
<span style="white-space:pre"> </span>top:50%;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>margin-top:-5px;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ss{
<span style="white-space:pre"> </span>width:4%;
<span style="white-space:pre"> </span>height:80%;
<span style="white-space:pre"> </span>top:10%;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-top:0%;
<span style="white-space:pre"> </span>margin-left:-2%;
<span style="white-space:pre"> </span>background-color:rgba(52, 52, 52, 0);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ss .left{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:4%;
<span style="white-space:pre"> </span>top:0;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>background-color:green;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ss .right{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:46%;
<span style="white-space:pre"> </span>background-color:orange;
<span style="white-space:pre"> </span>top:0;
<span style="white-space:pre"> </span>left:4%;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ff{
<span style="white-space:pre"> </span>width:4%;
<span style="white-space:pre"> </span>height:90%;
<span style="white-space:pre"> </span>top:5%;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-2%;
<span style="white-space:pre"> </span>background-color:rgba(52, 52, 52, 0);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ff .shang{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:4%;
<span style="white-space:pre"> </span>top:0%;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>background-color:green;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ff .xia{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:46%;
<span style="white-space:pre"> </span>top:4%;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>background-color:blue;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#mm{
<span style="white-space:pre"> </span>width:2%;
<span style="white-space:pre"> </span>height:92%;
<span style="white-space:pre"> </span>background-color:rgba(52, 52, 52, 0);
<span style="white-space:pre"> </span>top:4%;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-1%;
<span style="white-space:pre"> </span>transform:rotate(0);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>#mm .qian{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:4%;
<span style="white-space:pre"> </span>top:1%;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>background-color:black;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#mm .hou{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:46%;
<span style="white-space:pre"> </span>top:4%;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>background-color:pink;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#zhong{
<span style="white-space:pre"> </span>width:10%;
<span style="white-space:pre"> </span>height:10%;
<span style="white-space:pre"> </span>border-radius:100%;
<span style="white-space:pre"> </span>top:50%;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-5%;
<span style="white-space:pre"> </span>margin-top:-5%;
<span style="white-space:pre"> </span>background-color:greenyellow;
<span style="white-space:pre"> </span>}
<span style="white-
4000
space:pre"> </span></style>
</head>
<body>
<div class="one">
<span style="white-space:pre"> </span><span id="t0"></span>
<span style="white-space:pre"> </span><span id="t3"></span>
<span style="white-space:pre"> </span><span id="t6"></span>
<span style="white-space:pre"> </span><span id="t9"></span>
<span style="white-space:pre"> </span><span id="ss">
<span style="white-space:pre"> </span><span class="left"></span><span class="right"></span>
<span style="white-space:pre"> </span></span>
<span style="white-space:pre"> </span><span id="ff">
<span style="white-space:pre"> </span><span class="shang"></span><span class="xia"></span>
<span style="white-space:pre"> </span></span>
<span style="white-space:pre"> </span><span id="mm">
<span style="white-space:pre"> </span><span class="qian"></span><span class="hou"></span>
<span style="white-space:pre"> </span></span>
<span style="white-space:pre"> </span><span id="zhong"></span>
</div>
<script type="text/javascript">
<span style="white-space:pre"> </span>var oss = document.getElementById("ss");
<span style="white-space:pre"> </span>var off = document.getElementById("ff");
<span style="white-space:pre"> </span>var omm = document.getElementById("mm");
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>setInterval(text,1000);
function text(){
var a = new Date();
var b = a.getDay();
var d = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var c = a.getFullYear()+"年"+(a.getMonth()+1)+"月"+a.getDate()+"日"+a.getHours()+"时"+a.getMinutes()+"分"+a.getSeconds()+"秒";
var x = 6;
<span style="white-space:pre"> </span>var i = a.getSeconds();
<span style="white-space:pre"> </span>var j = a.getMinutes();
<span style="white-space:pre"> </span>var k = a.getHours();
<span style="white-space:pre"> </span>console.log(a.getHours());
<span style="white-space:pre"> </span>omm.style.transform = "rotate("+i*x+"deg)";
<span style="white-space:pre"> </span>off.style.transform = "rotate("+j*x+"deg)";
<span style="white-space:pre"> </span>oss.style.transform = "rotate("+k*30+"deg)";<span style="white-space:pre"> </span>
}
<span style="white-space:pre"> </span>
</script>
</body>
</html>以上是代码，下面是效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- html5 web数据存储
- 最后一次说说闭包
- Ajax