【项目】仿IOS时钟

1.图片展示

（表针是转的，哭唧唧）
2.HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿手机时钟</title>
<link rel="stylesheet" href="./CSS/index.css">
</head>
<body><div class="clock"><ul class="dial"> <!-- <li class="num"><span>1</span></li><li class="num"><span>2</span></li><li class="num">3</li><li class="num">4</li><li class="num">5</li><li class="num">6</li><li class="num">7</li><li class="num">8</li><li class="num">9</li><li class="num">10</li><li class="num">11</li><li class="num">12</li>--></ul><div class="point"></div><div class="hour"></div><div class="min"></div><div class="sec"></div></div><script type="text/javascript" src="./JS/index.js"></script></body>
</html>

3.CSS

@CHARSET "UTF-8";
body,ul{margin: 0;padding: 0;
}
li{list-style: none;
}
.clock{width: 230px;height: 230px;background: black;margin: 100px auto;border-radius: 40px;position:relative;overflow:hidden;/* 写在dial的父级解决margin塌陷的问题 */
}
.dial{width: 200px;height: 200px;/* 实现水平垂直居中，父级元素要写position:relative; */position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;border-radius: 50%;background: white;/* margin: 15px auto; */
}
li{position: absolute;  top:0;left: 50%;width:30px;margin-left: -15px;text-align: center;transform-origin:15px 100px;font-weight: 600;
}
/* 由于span不是块元素 */
li span{display: inline-block;
}
.point{width: 10px;height: 10px;border-radius: 50%;position: absolute;left:50%;top:50%;margin-left: -5px;margin-top: -5px;background-color: black;
}.hour{width: 4px;height: 70px;background-color:black;position:absolute;left:50%;top:45px;margin-left: -2px;transform-origin:center bottom;transform:rotate(30deg);
}
.min{width: 4px;height: 90px;background-color:black;position: absolute;left: 50%;top:25px;margin-left: -2px;transform-origin:center bottom;transform:rotate(60deg);
}
.sec{width: 2px;height: 100px;background-color:red;position: absolute;left: 50%;top:25px;margin-left: -1px;transform-origin:center 90px;transform:rotate(90deg);
}/*
1.水平居中两种方式
margin position
2.
transform:rotate
3.对于自身而言
transform-origin
4.
inth-child:nth-of-type区别*/
/* li:NTH-CHILD(1) span{transform:rotate(-30deg);
}
li:NTH-CHILD(1) {transform:rotate(30deg);
}
li:NTH-CHILD(2) span{transform:rotate(-60deg);
}
li:NTH-CHILD(2) {transform:rotate(60deg);
}
li:NTH-CHILD(3) {transform:rotate(90deg);
}
li:NTH-CHILD(4) {transform:rotate(120deg);
}
li:NTH-CHILD(5) {transform:rotate(150deg);
}
li:NTH-CHILD(6) {transform:rotate(180deg);
}
li:NTH-CHILD(7) {transform:rotate(210deg);
}
li:NTH-CHILD(8) {transform:rotate(240deg);
}
li:NTH-CHILD(9) {transform:rotate(270deg);
}
li:NTH-CHILD(10) {transform:rotate(300deg);
}
li:NTH-CHILD(11) {transform:rotate(330deg);
}
li:NTH-CHILD(12) {transform:rotate(360deg);
}*/

4.JS

var total=12;
var str="";
var oDail=document.getElementsByClassName("dial")[0];
var oHour=document.getElementsByClassName("hour")[0];
var oMin=document.getElementsByClassName("min")[0];
var oSec=document.getElementsByClassName("sec")[0];function init(){for(var i=1;i<=total;i++){str+='<li class="num"style="transform:rotate('+i*30+'deg)">\<span style="transform:rotate('+(-i)*30+'deg)">' + i + '</span>\</li>';}oDail.innerHTML=str;time();
}
init();
function time(){var date=new Date();var sec=date.getSeconds();var msec=date.getMilliseconds();var fullSecond=sec+msec/1000;oSec.style.transform='rotate('+fullSecond*6+'deg)';var min=date.getMinutes();var fillMin=min+fullSecond/60;oMin.style.transform='rotate('+fillMin*6+'deg)';var hour=date.getHours();var fillHour=hour+fillMin/60;oHour.style.transform='rotate('+fillHour*30+'deg)';setTimeout(time,1000/60);
}
//1.new Date()
//2.字符串拼接

【项目】仿IOS时钟相关推荐

视频教程-微信小程序项目实战：高仿iOS计算器-微信开发
微信小程序项目实战:高仿iOS计算器东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过1 ...
仿苹果手机闹钟_高仿iOS系统闹钟 UserNotifications
Alarm_Clock_UserNotifications 仿ios系统闹钟添加闹钟效果图收到通知效果图更新日志 2018.09.12 由于iOS系统限制了注册本地推送的数量,最大的注册量为64 ...
安卓设置菊花动画_Android仿ios加载loading菊花图效果
项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loading,一般用的比较多的是仿照ios 的菊花加载loading 图,当然一些条件下还会涉及到加载成功/ 失败情况 ...
android 仿ios三级联动,仿iOS的PickerView控件，有时间选择和选项选择并支持一二三级联动效果...
Android-PickerView 注意事项.详请使用方式.更新日志等,请查看 Wiki文档 Wiki文档,Wiki文档,Wiki文档 !~ 重要的事情说三遍对于使用上有任何疑问或优化建议等,欢迎 ...
Android Study 之通过DialogFragment玩转高仿IOS弹框~ ^.^
LZ-Say:在努力向前奔跑的途中,不要忘记让自己始终保持一个良好的状态,一颗初心,一颗永不言弃的心,一起加油` 前言 LZ虽说是搞Android的,但是对IOS的风格样式甚是酷爱,感觉简约大方,而今 ...
Android仿IOS解锁密码界面-自定义view系列（6）
Android仿IOS解锁密码界面-自定义view系列功能简介主要实现步骤-具体内容看github项目里的代码 xml相关属性设置 Android Studio 代码 Android技术生活交流 ...
uni-app、H5+ 仿IOS 实现安卓手势拖拽右滑关闭当前页面并返回上级页面 + 阴影效果（侧滑返回）
背景在我们日常开发中,经常会效仿某些流行APP渲染动画效果,用来满足自己开发或公司开发的日常需要,学习一下新的东西还是好的,本案例是仿IOS 手势拖拽右滑关闭当前页面并返回主页的一个案例预览效 ...
Android仿IOS滑动关机-自定义view系列（6）
Android仿IOS滑动关机-自定义view系列功能简介 GIf演示主要实现步骤-具体内容看github项目里的代码 Android技术生活交流更多其他页面-自定义View-实用功能合集:点击 ...
Android仿IOS吸边弹簧阻尼移动组件SpringMovingView-自定义view系列（3）
() Android仿ios吸边弹簧阻尼效果的移动组件SpringMovingView 功能简介 Android技术生活交流 Gif演示实现步骤 java代码 Android技术生活交流更多其他页 ...

【项目】仿IOS时钟

【项目】仿IOS时钟相关推荐

最新文章

热门文章